"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/number-control/index.tsx
var number_control_exports = {};
__export(number_control_exports, {
  NumberControl: () => NumberControl,
  default: () => number_control_default
});
module.exports = __toCommonJS(number_control_exports);
var import_clsx = __toESM(require("clsx"), 1);
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_compose = require("@wordpress/compose");
var import_deprecated = __toESM(require("@wordpress/deprecated"), 1);
var import_number_control_styles = require("./styles/number-control-styles.cjs");
var inputControlActionTypes = __toESM(require("../input-control/reducer/actions.cjs"), 1);
var import_math = require("../utils/math.cjs");
var import_values = require("../utils/values.cjs");
var import_h_stack = require("../h-stack/index.cjs");
var import_spacer = require("../spacer/index.cjs");
var import_utils = require("../utils/index.cjs");
var import_use_deprecated_props = require("../utils/use-deprecated-props.cjs");
var import_deprecated_36px_size = require("../utils/deprecated-36px-size.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var noop = () => {
};
function UnforwardedNumberControl(props, forwardedRef) {
  const {
    __unstableStateReducer: stateReducerProp,
    className,
    dragDirection = "n",
    hideHTMLArrows = false,
    spinControls = hideHTMLArrows ? "none" : "native",
    isDragEnabled = true,
    isShiftStepEnabled = true,
    label,
    max = Infinity,
    min = -Infinity,
    required = false,
    shiftStep = 10,
    step = 1,
    spinFactor = 1,
    type: typeProp = "number",
    value: valueProp,
    size = "default",
    suffix,
    onChange = noop,
    __shouldNotWarnDeprecated36pxSize,
    ...restProps
  } = (0, import_use_deprecated_props.useDeprecated36pxDefaultSizeProp)(props);
  (0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
    componentName: "NumberControl",
    size,
    __next40pxDefaultSize: restProps.__next40pxDefaultSize,
    __shouldNotWarnDeprecated36pxSize
  });
  if (hideHTMLArrows) {
    (0, import_deprecated.default)("wp.components.NumberControl hideHTMLArrows prop ", {
      alternative: 'spinControls="none"',
      since: "6.2",
      version: "6.3"
    });
  }
  const inputRef = (0, import_element.useRef)();
  const mergedRef = (0, import_compose.useMergeRefs)([inputRef, forwardedRef]);
  const isStepAny = step === "any";
  const baseStep = isStepAny ? 1 : (0, import_values.ensureNumber)(step);
  const baseSpin = (0, import_values.ensureNumber)(spinFactor) * baseStep;
  const constrainValue = (value, stepOverride) => {
    if (!isStepAny) {
      value = (0, import_math.ensureValidStep)(value, min, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
    }
    return `${(0, import_math.clamp)(value, min, max)}`;
  };
  const baseValue = constrainValue(0);
  const autoComplete = typeProp === "number" ? "off" : void 0;
  const classes = (0, import_clsx.default)("components-number-control", className);
  const cx = (0, import_utils.useCx)();
  const spinButtonClasses = cx(size === "small" && import_number_control_styles.styles.smallSpinButtons);
  const spinValue = (value, direction, event) => {
    event?.preventDefault();
    const shift = event?.shiftKey && isShiftStepEnabled;
    const delta = shift ? (0, import_values.ensureNumber)(shiftStep) * baseSpin : baseSpin;
    let nextValue = (0, import_values.isValueEmpty)(value) ? baseValue : value;
    if (direction === "up") {
      nextValue = (0, import_math.add)(nextValue, delta);
    } else if (direction === "down") {
      nextValue = (0, import_math.subtract)(nextValue, delta);
    }
    return constrainValue(nextValue, shift ? delta : void 0);
  };
  const numberControlStateReducer = (state, action) => {
    const nextState = {
      ...state
    };
    const {
      type,
      payload
    } = action;
    const event = payload.event;
    const currentValue = nextState.value;
    if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
      nextState.value = spinValue(currentValue, type === inputControlActionTypes.PRESS_UP ? "up" : "down", event);
    }
    if (type === inputControlActionTypes.DRAG && isDragEnabled) {
      const [x, y] = payload.delta;
      const enableShift = payload.shiftKey && isShiftStepEnabled;
      const modifier = enableShift ? (0, import_values.ensureNumber)(shiftStep) * baseSpin : baseSpin;
      let directionModifier;
      let delta;
      switch (dragDirection) {
        case "n":
          delta = y;
          directionModifier = -1;
          break;
        case "e":
          delta = x;
          directionModifier = (0, import_i18n.isRTL)() ? -1 : 1;
          break;
        case "s":
          delta = y;
          directionModifier = 1;
          break;
        case "w":
          delta = x;
          directionModifier = (0, import_i18n.isRTL)() ? 1 : -1;
          break;
      }
      if (delta !== 0) {
        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
        const distance = delta * modifier * directionModifier;
        nextState.value = constrainValue(
          // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
          (0, import_math.add)(currentValue, distance),
          enableShift ? modifier : void 0
        );
      }
    }
    if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
      const applyEmptyValue = required === false && currentValue === "";
      nextState.value = applyEmptyValue ? currentValue : (
        // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
        constrainValue(currentValue)
      );
    }
    return nextState;
  };
  const buildSpinButtonClickHandler = (direction) => (event) => onChange(String(spinValue(valueProp, direction, event)), {
    // Set event.target to the <input> so that consumers can use
    // e.g. event.target.validity.
    event: {
      ...event,
      target: inputRef.current
    }
  });
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_number_control_styles.Input, {
    autoComplete,
    inputMode: "numeric",
    ...restProps,
    className: classes,
    dragDirection,
    hideHTMLArrows: spinControls !== "native",
    isDragEnabled,
    label,
    max: max === Infinity ? void 0 : max,
    min: min === -Infinity ? void 0 : min,
    ref: mergedRef,
    required,
    step,
    type: typeProp,
    value: valueProp,
    __unstableStateReducer: (state, action) => {
      var _stateReducerProp;
      const baseState = numberControlStateReducer(state, action);
      return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
    },
    size,
    __shouldNotWarnDeprecated36pxSize: true,
    suffix: spinControls === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
      children: [suffix, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
        marginBottom: 0,
        marginRight: 2,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_h_stack.HStack, {
          spacing: 1,
          children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_number_control_styles.SpinButton, {
            className: spinButtonClasses,
            icon: import_icons.plus,
            size: "small",
            label: (0, import_i18n.__)("Increment"),
            onClick: buildSpinButtonClickHandler("up")
          }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_number_control_styles.SpinButton, {
            className: spinButtonClasses,
            icon: import_icons.reset,
            size: "small",
            label: (0, import_i18n.__)("Decrement"),
            onClick: buildSpinButtonClickHandler("down")
          })]
        })
      })]
    }) : suffix,
    onChange
  });
}
var NumberControl = (0, import_element.forwardRef)(UnforwardedNumberControl);
var number_control_default = NumberControl;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  NumberControl
});
//# sourceMappingURL=index.cjs.map
