@choice-ui/react 1.3.10

package/dist/cjs/components/numeric-input/dist/index.cjs

@@ -0,0 +1,1262 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const require$$0 = require("react/jsx-runtime");
+const index$1 = require("../../icon-button/dist/index.cjs");
+const iconsReact = require("@choiceform/icons-react");
+const index$2 = require("../../chip/dist/index.cjs");
+const usehooksTs = require("usehooks-ts");
+const index = require("../../tooltip/dist/index.cjs");
+const useDisableScroll = require("../../../shared/hooks/use-disable-scroll/use-disable-scroll.cjs");
+const mergeProps = require("../../../shared/utils/merge-props/merge-props.cjs");
+const mergeRefs = require("../../../shared/utils/merge-refs/merge-refs.cjs");
+const tcx = require("../../../shared/utils/tcx/tcx.cjs");
+const useModifierKeys = require("../../../shared/hooks/use-modifier-keys/use-modifier-keys.cjs");
+const useMergedValue = require("../../../shared/hooks/use-merged-value/use-merged-value.cjs");
+const usePressMove = require("../../../shared/hooks/use-press/use-press-move.cjs");
+var NumericInputContext = React.createContext(void 0);
+function useNumericInputContext() {
+  const context = React.useContext(NumericInputContext);
+  if (!context) {
+    throw new Error("useNumericInputContext must be used within a NumericInput component");
+  }
+  return context;
+}
+var NumericInputTv = tcx.tcv({
+  slots: {
+    container: ["group/input grid h-6 before:border-transparent", "input__number"],
+    input: ["peer", "h-6 w-full", "cursor-default appearance-none truncate"],
+    tooltip: "col-span-3 col-start-1 row-start-1 h-6"
+  },
+  variants: {
+    variant: {
+      default: {
+        input: "bg-secondary-background placeholder:text-secondary-foreground"
+      },
+      light: {
+        input: "bg-gray-100 text-gray-900 placeholder:text-black/50"
+      },
+      dark: {
+        input: "bg-gray-700 text-white placeholder:text-white/50"
+      },
+      reset: {}
+    },
+    prefixElement: {
+      true: {},
+      false: {}
+    },
+    suffixElement: {
+      true: {},
+      false: {}
+    },
+    variableValue: {
+      true: {},
+      false: {}
+    },
+    selected: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {},
+      false: {}
+    },
+    focused: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundSlots: [
+    // 基础输入框样式
+    {
+      slots: ["input"],
+      variableValue: false,
+      prefixElement: false,
+      class: "px-2"
+    },
+    // 无前缀时的圆角
+    {
+      slots: ["input"],
+      variableValue: false,
+      prefixElement: false,
+      class: "rounded-l-md"
+    },
+    // 无后缀时的圆角
+    {
+      slots: ["input"],
+      suffixElement: false,
+      class: "rounded-r-md"
+    }
+  ],
+  compoundVariants: [
+    // 默认变体的状态样式
+    {
+      variant: ["default", "light", "dark"],
+      selected: true,
+      class: {
+        container: ["before:border-selected-boundary/50"]
+      }
+    },
+    {
+      variant: "default",
+      selected: false,
+      disabled: false,
+      class: {
+        container: [
+          "focus-within:before:border-selected-boundary",
+          "not-focus-within:hover:before:border-default-boundary"
+        ]
+      }
+    },
+    // Themes
+    {
+      variant: "light",
+      selected: false,
+      disabled: false,
+      class: {
+        container: [
+          "focus-within:before:border-selected-boundary",
+          "not-focus-within:hover:before:border-gray-200"
+        ]
+      }
+    },
+    {
+      variant: "dark",
+      selected: false,
+      disabled: false,
+      class: {
+        container: [
+          "focus-within:before:border-selected-boundary",
+          "not-focus-within:hover:before:border-gray-600"
+        ]
+      }
+    },
+    // 禁用
+    {
+      disabled: true,
+      variant: "default",
+      class: {
+        input: "disabled:text-disabled-foreground disabled:bg-secondary-background"
+      }
+    },
+    {
+      disabled: true,
+      variant: "light",
+      class: {
+        input: "disabled:bg-gray-100 disabled:text-black/30"
+      }
+    },
+    {
+      disabled: true,
+      variant: "dark",
+      class: {
+        input: "disabled:bg-gray-700 disabled:text-white/50"
+      }
+    },
+    {
+      focused: true,
+      variant: ["default", "light", "dark"],
+      class: {
+        container: "before:border-selected-boundary"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    selected: false,
+    disabled: false,
+    focused: false
+  }
+});
+var NumericInputMenuTriggerTv = tcx.tcv({
+  base: "flex-none rounded-l-none rounded-r-md [grid-area:action]",
+  variants: {
+    disabled: {
+      true: ""
+    },
+    type: {
+      menu: "",
+      action: ""
+    },
+    variant: {
+      default: "",
+      light: "",
+      dark: "",
+      reset: ""
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      variant: "default",
+      type: "action",
+      class: "bg-secondary-background"
+    },
+    {
+      disabled: false,
+      variant: "light",
+      class: "bg-gray-100 text-black/50"
+    },
+    {
+      disabled: false,
+      variant: "dark",
+      class: "bg-gray-700 text-white/50"
+    },
+    // Disabled
+    {
+      disabled: true,
+      variant: "default",
+      class: "bg-secondary-background text-disabled-foreground"
+    },
+    {
+      disabled: true,
+      variant: "light",
+      class: "bg-gray-100 text-black/30"
+    },
+    {
+      disabled: true,
+      variant: "dark",
+      class: "bg-gray-700 text-white/50"
+    }
+  ],
+  defaultVariants: {
+    disabled: false,
+    type: "menu",
+    variant: "default"
+  }
+});
+var NumericInputVariableTv = tcx.tcv({
+  slots: {
+    root: "flex flex-1 items-center pr-1 [grid-area:variable]",
+    chip: "z-2 select-none"
+  },
+  variants: {
+    prefixElement: {
+      true: {},
+      false: {
+        root: "rounded-l-md pl-1"
+      }
+    },
+    variant: {
+      default: {},
+      light: {},
+      dark: {},
+      reset: {}
+    },
+    disabled: {
+      true: {
+        root: "pointer-events-none"
+      },
+      false: {}
+    },
+    selected: {
+      true: {
+        root: "pointer-events-none"
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      variant: "default",
+      class: {
+        root: "bg-secondary-background",
+        chip: [
+          "group-focus-within/input:border-selected-boundary",
+          "group-focus-within/input:bg-selected-background"
+        ]
+      }
+    },
+    {
+      disabled: false,
+      variant: "light",
+      class: {
+        root: "bg-gray-100 text-black/50",
+        chip: [
+          "border-gray-200 bg-white text-gray-900 hover:bg-gray-100",
+          "group-focus-within/input:border-selected-boundary",
+          "group-focus-within/input:bg-blue-200"
+        ]
+      }
+    },
+    {
+      disabled: false,
+      variant: "dark",
+      class: {
+        root: "bg-gray-700 text-white/50",
+        chip: [
+          "border-gray-600 bg-gray-800 text-white hover:bg-gray-700",
+          "group-focus-within/input:border-selected-boundary",
+          "group-focus-within/input:bg-blue-700"
+        ]
+      }
+    },
+    {
+      disabled: true,
+      variant: "default",
+      class: {
+        root: "bg-secondary-background",
+        chip: "text-disabled-foreground bg-secondary-background"
+      }
+    },
+    {
+      disabled: true,
+      variant: "light",
+      class: {
+        root: "bg-gray-100",
+        chip: "border-gray-200 bg-gray-100 text-black/30"
+      }
+    },
+    {
+      disabled: true,
+      variant: "dark",
+      class: {
+        root: "bg-gray-700",
+        chip: "border-gray-600 bg-gray-700 text-gray-400"
+      }
+    }
+  ],
+  defaultVariants: {
+    prefixElement: false,
+    variant: "default",
+    disabled: false,
+    selected: false
+  }
+});
+var NumericInputElementTv = tcx.tcv({
+  base: ["select-none", "z-2 h-6 w-6", "flex flex-none items-center justify-center"],
+  variants: {
+    type: {
+      handler: "select-none",
+      action: "[grid-area:action]",
+      menu: "ml-px [grid-area:action]"
+    },
+    position: {
+      prefix: "rounded-l-md",
+      suffix: "rounded-r-md"
+    },
+    disabled: {
+      true: "text-disabled-foreground",
+      false: "text-secondary-foreground"
+    },
+    variant: {
+      default: "",
+      light: "",
+      dark: "",
+      reset: ""
+    }
+  },
+  compoundVariants: [
+    {
+      type: "handler",
+      position: "prefix",
+      class: "[grid-area:prefix-handler]"
+    },
+    {
+      type: "handler",
+      position: "suffix",
+      class: "[grid-area:suffix-handler]"
+    },
+    {
+      type: "handler",
+      disabled: false,
+      class: "cursor-ew-resize"
+    },
+    {
+      disabled: false,
+      variant: "default",
+      class: "bg-secondary-background"
+    },
+    {
+      disabled: false,
+      variant: "light",
+      class: "bg-gray-100 text-black/50"
+    },
+    {
+      disabled: false,
+      variant: "dark",
+      class: "bg-gray-700 text-white/50"
+    },
+    {
+      disabled: true,
+      variant: "default",
+      class: "bg-secondary-background text-disabled-foreground"
+    },
+    {
+      disabled: true,
+      variant: "light",
+      class: "bg-gray-100 text-black/30"
+    },
+    {
+      disabled: true,
+      variant: "dark",
+      class: "bg-gray-700 text-white/30"
+    }
+  ],
+  defaultVariants: {
+    disabled: false,
+    variant: "default"
+  }
+});
+var NumericInputMenuActionPromptTv = tcx.tcv({
+  base: [
+    "[grid-area:action]",
+    "w-6 pr-2",
+    "flex items-center justify-center",
+    "rounded-r-md",
+    "pointer-events-none z-3"
+  ],
+  variants: {
+    disabled: {
+      true: "text-secondary-foreground bg-default-background",
+      false: "bg-secondary-background group-focus-within/input:hidden group-hover/input:hidden"
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+var NumericInputElement = React.memo(
+  React.forwardRef(function NumericInputElement2(props, ref) {
+    const { type = "handler", className, position, children } = props;
+    const context = useNumericInputContext();
+    const handlerProps = context.handlerProps;
+    const elementClassName = NumericInputElementTv({
+      type,
+      position,
+      disabled: context.disabled,
+      variant: context.variant
+    });
+    const elementProps = React.useMemo(
+      () => type === "handler" ? handlerProps : {},
+      [type, handlerProps]
+    );
+    return /* @__PURE__ */ require$$0.jsx(
+      "div",
+      {
+        ref,
+        className: tcx.tcx(elementClassName, className),
+        "data-element-position": position,
+        "data-element-type": type,
+        ...elementProps,
+        children
+      }
+    );
+  })
+);
+NumericInputElement.displayName = "NumericInputElement";
+var NumericInputMenuTrigger = React.forwardRef(
+  (props, ref) => {
+    const { className, type = "menu", ...rest } = props;
+    const context = useNumericInputContext();
+    const style = NumericInputMenuTriggerTv({
+      type,
+      disabled: context.disabled,
+      variant: context.variant
+    });
+    return /* @__PURE__ */ require$$0.jsx(
+      index$1.IconButton,
+      {
+        ref,
+        variant: type === "menu" ? context.disabled ? "ghost" : "solid" : void 0,
+        className: tcx.tcx(style, className),
+        disabled: context.disabled,
+        ...rest,
+        children: /* @__PURE__ */ require$$0.jsx(iconsReact.ChevronDownSmall, {})
+      }
+    );
+  }
+);
+NumericInputMenuTrigger.displayName = "NumericInputMenuTrigger";
+var NumericInputMenuActionPrompt = React.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const context = useNumericInputContext();
+  return /* @__PURE__ */ require$$0.jsx(
+    "div",
+    {
+      ref,
+      className: tcx.tcx(NumericInputMenuActionPromptTv({ disabled: context.disabled }), className),
+      ...rest,
+      children
+    }
+  );
+});
+NumericInputMenuActionPrompt.displayName = "NumericInputMenuActionPrompt";
+var NumericInputVariable = React.forwardRef(
+  (props, ref) => {
+    const { onClick, className, hasPrefixElement, value } = props;
+    const context = useNumericInputContext();
+    const styles = NumericInputVariableTv({
+      prefixElement: hasPrefixElement,
+      variant: context.variant,
+      disabled: context.disabled,
+      selected: context.selected
+    });
+    return /* @__PURE__ */ require$$0.jsx("div", { className: tcx.tcx(styles.root(), className), children: /* @__PURE__ */ require$$0.jsx(
+      index$2.Chip,
+      {
+        as: "button",
+        className: styles.chip(),
+        ref,
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick == null ? void 0 : onClick(e);
+        },
+        disabled: context.disabled,
+        children: String(value)
+      }
+    ) });
+  }
+);
+NumericInputVariable.displayName = "NumericInputVariable";
+var precedence = {
+  "+": 1,
+  "-": 1,
+  "*": 2,
+  "/": 2,
+  "(": 0,
+  ")": 0
+};
+var applyOperation = (op, b, a) => {
+  switch (op) {
+    case "+":
+      return a + b;
+    case "-":
+      return a - b;
+    case "*":
+      return a * b;
+    case "/":
+      return a / b;
+    default:
+      throw new Error(`Invalid operation: ${op}`);
+  }
+};
+var evaluate = (expression) => {
+  const ops = [];
+  const nums = [];
+  let num = "";
+  const precedenceOf = (op) => precedence[op];
+  for (let i = 0; i < expression.length; i++) {
+    const char = expression[i];
+    if (char === " ") continue;
+    if (char >= "0" && char <= "9" || char === "." || char === "-" && i === 0) {
+      num += char;
+    } else {
+      if (num) {
+        nums.push(parseFloat(num));
+        num = "";
+      }
+      if (char === "(") {
+        ops.push(char);
+      } else if (char === ")") {
+        while (ops.length && ops[ops.length - 1] !== "(") {
+          const op = ops.pop();
+          const b = nums.pop();
+          const a = nums.pop();
+          nums.push(applyOperation(op, b, a));
+        }
+        ops.pop();
+      } else {
+        while (ops.length && precedenceOf(ops[ops.length - 1]) >= precedenceOf(char)) {
+          const op = ops.pop();
+          const b = nums.pop();
+          const a = nums.pop();
+          nums.push(applyOperation(op, b, a));
+        }
+        ops.push(char);
+      }
+    }
+  }
+  if (num) {
+    nums.push(parseFloat(num));
+  }
+  while (ops.length) {
+    const op = ops.pop();
+    const b = nums.pop();
+    const a = nums.pop();
+    nums.push(applyOperation(op, b, a));
+  }
+  const result = nums.pop();
+  if (result === void 0) {
+    throw new Error(`Invalid expression: ${expression}`);
+  }
+  return result;
+};
+function parseInputValue(input) {
+  let values = [];
+  let isInputNumber = false;
+  let isObjectNumber = false;
+  try {
+    if (typeof input === "string" || typeof input === "number") {
+      values = String(input).split(",").map((char) => evaluate(char));
+      isInputNumber = values.length > 0;
+    } else if (Array.isArray(input)) {
+      values = input.map((item) => evaluate(String(item)));
+      isInputNumber = values.length > 0;
+    } else if (typeof input === "object" && input !== null) {
+      isObjectNumber = true;
+    }
+  } catch (_error) {
+  }
+  return { values, isInputNumber, isObjectNumber };
+}
+function extractValuesFromString(input, regex, keys) {
+  const match = input.match(regex);
+  if (!match) return null;
+  const result = {};
+  keys.forEach((key, index2) => {
+    try {
+      const value = evaluate(match[index2 + 1] ?? match[1]);
+      result[key] = value;
+    } catch (error) {
+      result[key] = 0;
+    }
+  });
+  return result;
+}
+function parsePattern(pattern) {
+  const keys = [];
+  const regexPattern = pattern.replace(/[\s]*\{([\w|,]+)\}[\s]*/g, (_match, key) => {
+    const keyArr = key.split(",");
+    keys.push(keyArr[0]);
+    return "(.+)";
+  });
+  const regex = new RegExp(`^${regexPattern}$`);
+  return { keys, regexPattern, regex };
+}
+function formatResult(pattern, result) {
+  return pattern.replace(/\{([\w|,]+)\}/g, (_match, key) => {
+    const keyArr = key.split(",");
+    return keyArr[1] === "hidden" ? "" : String(result[keyArr[0]]);
+  });
+}
+function applyConstraints(value, min = -Infinity, max = Infinity, decimal = 2) {
+  const roundedValue = parseFloat(value.toFixed(decimal));
+  return Math.min(Math.max(roundedValue, min), max);
+}
+function applyConstraintsToValues(values, min = -Infinity, max = Infinity, decimal = 2) {
+  for (const key in values) {
+    values[key] = applyConstraints(values[key], min, max, decimal);
+  }
+}
+function applyTransform(values, transformFn) {
+  if (!transformFn) return;
+  for (const key in values) {
+    values[key] = transformFn(values[key]);
+  }
+}
+var dealWithNumericValueCatch = (options) => {
+  try {
+    return dealWithNumericInputValue(options);
+  } catch (_error) {
+    return void 0;
+  }
+};
+var dealWithNumericInputValue = ({
+  input,
+  pattern,
+  call,
+  max = Infinity,
+  min = -Infinity,
+  decimal = 2
+}) => {
+  const { keys, regex } = parsePattern(pattern);
+  const { values, isInputNumber, isObjectNumber } = parseInputValue(input);
+  const result = {};
+  if (typeof input === "string" && input.match(regex) && !isInputNumber && !isObjectNumber) {
+    const extractedValues = extractValuesFromString(input, regex, keys);
+    if (extractedValues) {
+      Object.assign(result, extractedValues);
+    }
+  } else if (isInputNumber) {
+    keys.forEach((key, index2) => {
+      result[key] = values[index2] ?? values[0];
+    });
+  } else if (isObjectNumber) {
+    const objInput = input;
+    Object.keys(objInput).forEach((key) => {
+      if (typeof objInput[key] === "number") {
+        result[key] = objInput[key];
+      }
+    });
+    keys.forEach((key) => {
+      if (result[key] === void 0) {
+        result[key] = 0;
+      }
+    });
+  } else {
+    throw new Error(`Invalid input: ${input}`);
+  }
+  if (call) {
+    applyTransform(result, call);
+  }
+  applyConstraintsToValues(result, min, max, decimal);
+  const resStr = formatResult(pattern, result);
+  return {
+    array: Object.values(result),
+    string: resStr,
+    object: result
+  };
+};
+function compareNumericArrays(array1, array2) {
+  if (!(array1 == null ? void 0 : array1.length) && !(array2 == null ? void 0 : array2.length)) return true;
+  if (!(array1 == null ? void 0 : array1.length) || !(array2 == null ? void 0 : array2.length)) return false;
+  if (array1.length !== array2.length) return false;
+  return array1.every(
+    (value, index2) => value !== void 0 && array2[index2] !== void 0 && value === array2[index2]
+  );
+}
+function compareNumericObjects(object1, object2) {
+  if (!object1 && !object2) return true;
+  if (!object1 || !object2) return false;
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) return false;
+  return keys1.every((key) => object1[key] === object2[key]);
+}
+function compareNumberResults(result1, result2) {
+  if (!result1 && !result2) return true;
+  if (!result1 || !result2) return false;
+  const isSameArray = compareNumericArrays(result1.array, result2.array);
+  const isSameObject = compareNumericObjects(result1.object, result2.object);
+  return isSameArray || isSameObject;
+}
+function isExpressionInput(displayValue, processedValue) {
+  return displayValue !== processedValue.string;
+}
+function useInputInteractions({
+  inputRef,
+  displayValue,
+  setDisplayValue,
+  isFocused,
+  setIsFocused,
+  expression,
+  min,
+  max,
+  decimal,
+  disabled,
+  readOnly,
+  innerValue,
+  setValue,
+  updateValue,
+  getCurrentStep,
+  onChange,
+  onEmpty,
+  value
+}) {
+  const initialValueRef = React.useRef("");
+  const handleInputChange = usehooksTs.useEventCallback((e) => {
+    setDisplayValue(e.target.value);
+  });
+  const handleInputFocus = usehooksTs.useEventCallback((e) => {
+    initialValueRef.current = e.target.value;
+    setIsFocused(true);
+    e.target.select();
+  });
+  const handleInputBlur = usehooksTs.useEventCallback(() => {
+    setIsFocused(false);
+    if (disabled || readOnly) return;
+    try {
+      const valuePre = dealWithNumericInputValue({
+        input: displayValue,
+        pattern: expression,
+        max,
+        min,
+        decimal
+      });
+      const isExpressionInputValue = isExpressionInput(displayValue, valuePre);
+      const isSameValue = compareNumberResults(innerValue, valuePre);
+      if (isSameValue) {
+        setDisplayValue(valuePre.string);
+        setValue(valuePre);
+        return;
+      }
+      setValue(valuePre);
+      onChange == null ? void 0 : onChange(
+        typeof value === "string" ? valuePre.string : typeof value === "number" ? valuePre.array[0] : Array.isArray(value) ? valuePre.array : valuePre.object,
+        valuePre
+      );
+      setDisplayValue(valuePre.string);
+    } catch (_error) {
+      if (displayValue === "") {
+        onEmpty == null ? void 0 : onEmpty();
+      }
+      if (initialValueRef.current) {
+        setDisplayValue(initialValueRef.current);
+      }
+    }
+  });
+  const handleKeyDown = usehooksTs.useEventCallback((e) => {
+    var _a;
+    if (disabled) return;
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      (_a = inputRef.current) == null ? void 0 : _a.blur();
+    }
+    if (e.key === "ArrowUp") {
+      updateValue((value2) => value2 + getCurrentStep());
+    }
+    if (e.key === "ArrowDown") {
+      updateValue((value2) => value2 - getCurrentStep());
+    }
+  });
+  return {
+    inputHandlers: {
+      onChange: handleInputChange,
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      onKeyDown: handleKeyDown
+    },
+    initialValueRef
+  };
+}
+function useNumericValueProcessing({
+  value,
+  defaultValue,
+  expression,
+  min,
+  max,
+  decimal
+}) {
+  const expressionRef = React.useRef(expression);
+  React.useEffect(() => {
+    expressionRef.current = expression;
+  }, [expression]);
+  const defaultValuePre = React.useMemo(
+    () => defaultValue !== void 0 && defaultValue !== null && defaultValue !== "" ? dealWithNumericValueCatch({
+      input: defaultValue,
+      pattern: expression,
+      min,
+      max,
+      decimal
+    }) : void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const valuePre = React.useMemo(
+    () => value !== void 0 && value !== null && value !== "" ? dealWithNumericValueCatch({
+      input: value,
+      pattern: expression,
+      min,
+      max,
+      decimal
+    }) : void 0,
+    [value, expression, min, max, decimal]
+  );
+  return { valuePre, defaultValuePre, expressionRef };
+}
+function useStepCalculation(shiftPressed, metaPressed, shiftStep, step) {
+  return React.useCallback(() => {
+    if (shiftPressed) return shiftStep;
+    if (metaPressed) return 1;
+    return step;
+  }, [shiftPressed, metaPressed, shiftStep, step]);
+}
+function useNumericInput(props) {
+  const {
+    decimal,
+    defaultValue,
+    disabled,
+    expression = "{value}",
+    max,
+    min,
+    readOnly,
+    ref,
+    shiftStep = 10,
+    step = 1,
+    value,
+    onChange,
+    onEmpty,
+    onPressEnd,
+    onPressStart
+  } = props;
+  const innerRef = React.useRef(null);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [displayValue, setDisplayValue] = React.useState("");
+  const { shiftPressed, metaPressed } = useModifierKeys.useModifierKeys(disabled);
+  const getCurrentStep = useStepCalculation(shiftPressed, metaPressed, shiftStep, step);
+  const { valuePre, defaultValuePre, expressionRef } = useNumericValueProcessing({
+    value,
+    defaultValue,
+    expression,
+    min,
+    max,
+    decimal
+  });
+  const [innerValue, setValue] = useMergedValue.useMergedValue({
+    value: valuePre,
+    defaultValue: defaultValuePre,
+    allowEmpty: true
+  });
+  React.useEffect(() => {
+    if (!innerValue) {
+      setDisplayValue("");
+      return;
+    }
+    const valuePre2 = dealWithNumericInputValue({
+      input: innerValue.object,
+      pattern: expression,
+      max,
+      min,
+      decimal
+    });
+    if (JSON.stringify(valuePre2.object) !== JSON.stringify(innerValue.object)) {
+      setValue(valuePre2);
+    }
+    setDisplayValue(valuePre2.string);
+  }, [innerValue, expression, max, min, decimal, setValue]);
+  const updateValue = React.useCallback(
+    (updateFn) => {
+      if (disabled || readOnly) return;
+      setValue((prev) => {
+        if (!prev) {
+          const initialValue = dealWithNumericInputValue({
+            input: 0,
+            pattern: expressionRef.current,
+            call: updateFn,
+            max,
+            min,
+            decimal
+          });
+          onChange == null ? void 0 : onChange(
+            typeof value === "string" ? initialValue.string : typeof value === "number" ? initialValue.array[0] : Array.isArray(value) ? initialValue.array : initialValue.object,
+            initialValue
+          );
+          return initialValue;
+        }
+        const valuePre2 = dealWithNumericInputValue({
+          input: prev.object,
+          pattern: expressionRef.current,
+          call: updateFn,
+          max,
+          min,
+          decimal
+        });
+        const hasChanged = (() => {
+          if (typeof value === "string" || typeof value === "number" || Array.isArray(value)) {
+            return JSON.stringify(valuePre2.object) !== JSON.stringify(prev.object);
+          }
+          if (typeof value === "object" && value !== null) {
+            const prevKeys = Object.keys(prev.object);
+            const newKeys = Object.keys(valuePre2.object);
+            if (prevKeys.length !== newKeys.length) return true;
+            return prevKeys.some((key) => prev.object[key] !== valuePre2.object[key]);
+          }
+          return true;
+        })();
+        if (hasChanged) {
+          onChange == null ? void 0 : onChange(
+            typeof value === "string" ? valuePre2.string : typeof value === "number" ? valuePre2.array[0] : Array.isArray(value) ? valuePre2.array : valuePre2.object,
+            valuePre2
+          );
+        }
+        return valuePre2;
+      });
+    },
+    [disabled, readOnly, setValue, max, min, decimal, onChange, value]
+  );
+  const { inputHandlers } = useInputInteractions({
+    inputRef: innerRef,
+    displayValue,
+    setDisplayValue,
+    isFocused,
+    setIsFocused,
+    expression,
+    min,
+    max,
+    decimal,
+    disabled,
+    readOnly,
+    innerValue,
+    setValue,
+    updateValue,
+    getCurrentStep,
+    onChange,
+    onEmpty,
+    value
+  });
+  const { isPressed: handlerPressed, pressMoveProps } = usePressMove.usePressMove({
+    disabled,
+    onPressStart: (e) => {
+      const wasFocused = isFocused;
+      if (onPressStart && "nativeEvent" in e) {
+        onPressStart(e.nativeEvent);
+      }
+      if (wasFocused && innerRef.current) {
+        requestAnimationFrame(() => {
+          var _a, _b;
+          (_a = innerRef.current) == null ? void 0 : _a.focus();
+          (_b = innerRef.current) == null ? void 0 : _b.select();
+        });
+      }
+      onPressStart == null ? void 0 : onPressStart(e);
+    },
+    onPressEnd: (e) => {
+      if (isFocused && innerRef.current) {
+        requestAnimationFrame(() => {
+          var _a, _b;
+          (_a = innerRef.current) == null ? void 0 : _a.focus();
+          (_b = innerRef.current) == null ? void 0 : _b.select();
+        });
+      }
+      if (onPressEnd && "nativeEvent" in e) {
+        onPressEnd(e.nativeEvent);
+      }
+      onPressEnd == null ? void 0 : onPressEnd(e);
+    },
+    onPressMoveLeft: (delta) => {
+      updateValue((value2) => value2 - delta * getCurrentStep());
+    },
+    onPressMoveRight: (delta) => {
+      updateValue((value2) => value2 + delta * getCurrentStep());
+    }
+  });
+  const inputProps = {
+    ref: mergeRefs.mergeRefs(innerRef, ref),
+    disabled,
+    readOnly,
+    value: displayValue,
+    ...inputHandlers
+  };
+  const handlerProps = {
+    ...pressMoveProps,
+    ref: pressMoveProps.ref
+  };
+  return {
+    handlerPressed,
+    inputProps,
+    handlerProps
+  };
+}
+var NumericInputBase = React.forwardRef((props, ref) => {
+  const {
+    id,
+    className,
+    classNames,
+    decimal,
+    defaultValue,
+    disabled,
+    expression = "{value}",
+    max,
+    min,
+    placeholder,
+    readOnly,
+    required,
+    shiftStep = 10,
+    step = 1,
+    value,
+    variant = "default",
+    focused = false,
+    selected = false,
+    tooltip,
+    onChange,
+    onEmpty,
+    onPressEnd,
+    onPressStart,
+    onIsEditingChange,
+    triggerRef,
+    name,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    children
+  } = props;
+  const inputRef = React.useRef(null);
+  const { handlerPressed, inputProps, handlerProps } = useNumericInput({
+    decimal,
+    defaultValue,
+    disabled,
+    expression,
+    max,
+    min,
+    readOnly,
+    shiftStep,
+    step,
+    value,
+    onChange,
+    onEmpty,
+    onPressEnd,
+    onPressStart,
+    ref: mergeRefs.mergeRefs(inputRef, ref)
+  });
+  const { disableScrollProps } = useDisableScroll.useDisableScroll({ ref: inputRef });
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleFocus = usehooksTs.useEventCallback((e) => {
+    var _a;
+    onIsEditingChange == null ? void 0 : onIsEditingChange(true);
+    setIsFocused(true);
+    (_a = inputProps.onFocus) == null ? void 0 : _a.call(inputProps, e);
+  });
+  const handleBlur = usehooksTs.useEventCallback((e) => {
+    var _a;
+    onIsEditingChange == null ? void 0 : onIsEditingChange(false);
+    setIsFocused(false);
+    (_a = inputProps.onBlur) == null ? void 0 : _a.call(inputProps);
+  });
+  const contextValue = React.useMemo(
+    () => ({
+      variant,
+      // 状态
+      value,
+      defaultValue,
+      disabled,
+      readOnly,
+      selected,
+      focused,
+      handlerPressed,
+      // 配置
+      min,
+      max,
+      step,
+      shiftStep,
+      decimal,
+      expression,
+      // 事件处理方法
+      onChange,
+      onEmpty,
+      onPressStart,
+      onPressEnd,
+      onIsEditingChange,
+      // 处理程序
+      handlerProps
+    }),
+    [
+      variant,
+      value,
+      defaultValue,
+      disabled,
+      readOnly,
+      selected,
+      focused,
+      handlerPressed,
+      min,
+      max,
+      step,
+      shiftStep,
+      decimal,
+      expression,
+      onChange,
+      onEmpty,
+      onPressStart,
+      onPressEnd,
+      onIsEditingChange,
+      handlerProps
+    ]
+  );
+  const { prefix, suffix, variable, actionPrompt } = React.useMemo(() => {
+    const result = { prefix: [], suffix: [], variable: [], actionPrompt: [] };
+    function findAll(children2) {
+      React.Children.forEach(children2, (child) => {
+        if (React.isValidElement(child)) {
+          switch (child.type) {
+            case NumericInput.Prefix:
+              result.prefix.push(child);
+              break;
+            case NumericInput.Suffix:
+              result.suffix.push(child);
+              break;
+            case NumericInput.Variable:
+              result.variable.push(child);
+              break;
+            case NumericInput.ActionPrompt:
+              result.actionPrompt.push(child);
+              break;
+          }
+          if (child.props && child.props.children) {
+            findAll(child.props.children);
+          }
+        }
+      });
+    }
+    findAll(children);
+    return result;
+  }, [children]);
+  const prefixNode = prefix[0] || null;
+  const suffixNode = suffix[0] || null;
+  const variableNode = variable[0] || null;
+  const actionPromptNode = actionPrompt[0] || null;
+  const styles = NumericInputTv({
+    variant,
+    selected: selected || handlerPressed,
+    focused,
+    disabled,
+    prefixElement: !!prefixNode,
+    suffixElement: !!suffixNode,
+    variableValue: !!variableNode
+  });
+  return /* @__PURE__ */ require$$0.jsx(NumericInputContext.Provider, { value: contextValue, children: /* @__PURE__ */ require$$0.jsxs(
+    "div",
+    {
+      ref: triggerRef,
+      className: tcx.tcx(styles.container(), classNames == null ? void 0 : classNames.container, className),
+      onMouseDown: (e) => {
+        e.stopPropagation();
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      children: [
+        prefixNode && React.cloneElement(prefixNode, { position: "prefix" }),
+        /* @__PURE__ */ require$$0.jsx(
+          "input",
+          {
+            ...mergeProps.mergeProps(inputProps, disableScrollProps),
+            name,
+            id,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            "data-1p-ignore": true,
+            autoComplete: "off",
+            spellCheck: false,
+            required,
+            className: tcx.tcx("[grid-area:input]", styles.input(), classNames == null ? void 0 : classNames.input),
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            placeholder
+          }
+        ),
+        variableNode && React.cloneElement(variableNode, { hasPrefixElement: !!prefixNode }),
+        actionPromptNode && React.cloneElement(actionPromptNode),
+        suffixNode && React.cloneElement(suffixNode, { position: "suffix" }),
+        tooltip && !isFocused && /* @__PURE__ */ require$$0.jsx(index.Tooltip, { ...tooltip, children: /* @__PURE__ */ require$$0.jsx(
+          "span",
+          {
+            tabIndex: -1,
+            className: styles.tooltip(),
+            onFocusCapture: () => {
+              if (inputRef.current) {
+                inputRef.current.focus();
+              }
+            }
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+NumericInputBase.displayName = "NumericInput";
+var PrefixComponent = (props) => /* @__PURE__ */ require$$0.jsx(NumericInputElement, { ...props });
+var SuffixComponent = (props) => /* @__PURE__ */ require$$0.jsx(NumericInputElement, { ...props });
+var VariableComponent = (props) => /* @__PURE__ */ require$$0.jsx(NumericInputVariable, { ...props });
+var ActionPromptComponent = (props) => /* @__PURE__ */ require$$0.jsx(NumericInputMenuActionPrompt, { ...props });
+var MenuTrigger = NumericInputMenuTrigger;
+var NumericInput = Object.assign(NumericInputBase, {
+  Prefix: PrefixComponent,
+  Suffix: SuffixComponent,
+  Variable: VariableComponent,
+  ActionPrompt: ActionPromptComponent,
+  MenuTrigger
+});
+exports.NumericInput = NumericInput;
+exports.NumericInputBase = NumericInputBase;
+exports.NumericInputElement = NumericInputElement;
+exports.NumericInputMenuActionPrompt = NumericInputMenuActionPrompt;
+exports.NumericInputMenuTrigger = NumericInputMenuTrigger;
+exports.NumericInputVariable = NumericInputVariable;
+exports.useInputInteractions = useInputInteractions;
+exports.useNumericInput = useNumericInput;
+exports.useNumericValueProcessing = useNumericValueProcessing;
+exports.useStepCalculation = useStepCalculation;