import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { forwardRef, useRef, useId, isValidElement } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { S as Spinner } from './Spinner-B7tTWcP6.js';
import { t as textFieldStyles } from './TextField.module-DklyLNKz.js';
import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
import { B as Button } from './Button-BNzCI47m.js';
import { I as Icon } from './Icon-B4uCvMU9.js';
import { S as SvgAdd } from './add-BcQkAUip.js';
import { F as FieldLabel } from './FieldLabel-Cm5A1Jcx.js';
import { u as useNumberField } from './useNumberField-D_ic9i2q.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
import { u as useFocusWithin } from './useFocusWithin-hi77jsrB.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
import { useTrackingId } from './useTrackingId.js';
import { s as stripInlineMarkdown } from './stripInlineMarkdown-BZzgG-Zm.js';
import { H as Helper } from './Helper-B_VAFgGd.js';

import './NumberField.css';const small = "_small_1n8zj_31";
const large = "_large_1n8zj_36";
const numberFieldStyles = {
	"stepper-buttons": "_stepper-buttons_1n8zj_1",
	"stepper-button": "_stepper-button_1n8zj_1",
	small: small,
	large: large
};

const SvgRemove = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z" }));

const NumberField = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      className,
      error,
      errorAriaLive: _errorAriaLive,
      defaultValue: defaultValueProp,
      value: valueProp,
      label,
      moreInfo,
      prefix,
      suffix,
      size,
      required,
      onChange: onChangeProp,
      onFocus: onFocusProp,
      onBlur: onBlurProp,
      id: idProp,
      description,
      hint,
      warning,
      loading,
      disabled,
      readOnly,
      labelProps,
      style,
      placeholder,
      minValue,
      maxValue,
      maximumFractionDigits = 0,
      minimumFractionDigits = 0,
      step = 1,
      hideControls = false,
      hideLabel = false,
      isHighlighted = false,
      ...rest
    } = componentProps;
    const numberFieldRef = useRef(null);
    const { props: wrapperProps } = useFocusWithin({
      onFocus: (e) => {
        onFocusProp?.(e);
      },
      onBlur: (e) => {
        onBlurProp?.(e);
      }
    });
    const { inputProps, inputRef, incrementButtonProps, decrementButtonProps } = useNumberField({
      minValue,
      maxValue,
      maximumFractionDigits,
      minimumFractionDigits,
      step,
      value: valueProp,
      defaultValue: defaultValueProp,
      onChange: onChangeProp,
      label,
      readOnly
    });
    const combinedInputRef = useMergeRefs([numberFieldRef, inputRef, ref]);
    const labelUid = useId();
    const id = idProp ?? labelUid;
    const prefixUid = useId();
    const suffixUid = useId();
    const helperUid = useId();
    const moreInfoUid = useId();
    warnDeprecatedErrorUsage("NumberField", error);
    if (label === void 0) {
      warnOnce(
        "NumberField: label will be required in v4.0.0. Use hideLabel to visually hide the label."
      );
    }
    const errorMessages = typeof error === "boolean" || error === void 0 ? void 0 : error;
    const hasHelperText = hint || errorMessages || warning || description;
    const ariaDescribedBy = [hasHelperText && helperUid, moreInfo && moreInfoUid].filter(Boolean).join(" ") || void 0;
    const styleCombined = { ...style, ...layoutStyles };
    const data = {
      label: childrenToString(props.label),
      prefix: childrenToString(props.prefix),
      suffix: childrenToString(props.suffix),
      description: childrenToString(props.description),
      size: props.size,
      minValue: props.minValue,
      maxValue: props.maxValue,
      step: props.step,
      maximumFractionDigits: props.maximumFractionDigits,
      minimumFractionDigits: props.minimumFractionDigits
    };
    const trackingId = useTrackingId({
      name: "NumberField",
      data,
      hasOverride: !!props["data-tracking-id"]
    });
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cx(textFieldStyles["textfield"], className),
        "data-anv": "number-field",
        style: styleCombined,
        ...wrapperProps,
        children: [
          label && !hideLabel && /* @__PURE__ */ jsx(
            FieldLabel,
            {
              moreInfo,
              moreInfoId: moreInfo ? moreInfoUid : void 0,
              required,
              htmlFor: id,
              ...labelProps,
              children: label
            }
          ),
          /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx(textFieldStyles["input-wrapper"], {
                [textFieldStyles["small"]]: size === "small",
                [textFieldStyles["large"]]: size === "large",
                [textFieldStyles["highlight"]]: isHighlighted,
                [numberFieldStyles["small"]]: size === "small",
                [numberFieldStyles["large"]]: size === "large"
              }),
              role: "presentation",
              onClick: () => numberFieldRef.current?.focus(),
              children: [
                prefix ? /* @__PURE__ */ jsx(
                  "div",
                  {
                    "aria-hidden": true,
                    className: textFieldStyles["prefix"],
                    id: `prefix${prefixUid}`,
                    children: prefix
                  }
                ) : null,
                /* @__PURE__ */ jsx(
                  "input",
                  {
                    id,
                    className: cx(textFieldStyles["input"], {
                      [textFieldStyles["error"]]: error
                    }),
                    "data-tracking-id": trackingId,
                    ...rest,
                    ...inputProps,
                    required,
                    placeholder,
                    readOnly,
                    disabled,
                    ref: combinedInputRef,
                    "aria-label": (
                      // TODO(v4.0.0): remove typeof check — label will always be string
                      hideLabel && typeof label === "string" ? stripInlineMarkdown(label) : label ? void 0 : placeholder
                    ),
                    "aria-describedby": ariaDescribedBy,
                    "aria-invalid": error ? !!error : void 0
                  }
                ),
                loading ? /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: textFieldStyles["loading-spinner-wrapper"],
                    "data-testid": "spinner",
                    children: /* @__PURE__ */ jsx(Spinner, { size: "small" })
                  }
                ) : null,
                suffix ? /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: textFieldStyles["suffix"],
                    "aria-hidden": true,
                    id: `suffix${suffixUid}`,
                    children: suffix
                  }
                ) : null,
                !hideControls && !disabled && !readOnly && /* @__PURE__ */ jsxs("div", { className: numberFieldStyles["stepper-buttons"], children: [
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      appearance: "secondary",
                      size: "small",
                      className: numberFieldStyles["stepper-button"],
                      ...decrementButtonProps,
                      children: /* @__PURE__ */ jsx(Icon, { svg: SvgRemove })
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      appearance: "secondary",
                      size: "small",
                      className: numberFieldStyles["stepper-button"],
                      ...incrementButtonProps,
                      children: /* @__PURE__ */ jsx(Icon, { svg: SvgAdd })
                    }
                  )
                ] })
              ]
            }
          ),
          hasHelperText ? /* @__PURE__ */ jsx(
            Helper,
            {
              id: helperUid,
              hint,
              showCounter: false,
              error: typeof errorMessages === "string" || Array.isArray(errorMessages) ? errorMessages : void 0,
              warning,
              errorMessage: isValidElement(errorMessages) ? errorMessages : void 0,
              description
            }
          ) : null
        ]
      }
    );
  }
);
NumberField.displayName = "NumberField";

export { NumberField as N };
//# sourceMappingURL=NumberField-CjC6KHKl.js.map
