@lobehub/ui/es/base-ui/Input/InputNumber.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Icon from "../../Icon/Icon.mjs";
import { rootVariants, styles } from "./style.mjs";
import { isPressEnter } from "./pressEnter.mjs";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx, useThemeMode } from "antd-style";
import { ChevronDown, ChevronUp } from "lucide-react";
import { NumberField } from "@base-ui/react/number-field";
//#region src/base-ui/Input/InputNumber.tsx
const controlIconSize = {
	large: 13,
	middle: 12,
	small: 10
};
const InputNumber = memo(({ ref, className, classNames, styles: customStyles, style, variant, shadow, size = "middle", controls = true, changeOnWheel, onChange, placeholder, format, precision, prefix, suffix, onPressEnter, ...rest }) => {
	const { isDarkMode } = useThemeMode();
	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
	const controlClassName = cx(styles.numberControl, size === "small" && styles.numberControlSmall, size === "large" && styles.numberControlLarge);
	const mergedFormat = precision === void 0 ? format : {
		...format,
		maximumFractionDigits: precision,
		minimumFractionDigits: precision
	};
	return /* @__PURE__ */ jsxs(NumberField.Root, {
		allowWheelScrub: changeOnWheel,
		className: cx(rootVariants({
			shadow,
			size,
			variant: mergedVariant
		}), className),
		format: mergedFormat,
		style,
		onValueChange: onChange,
		...rest,
		children: [
			prefix && /* @__PURE__ */ jsx("span", {
				className: styles.slot,
				children: prefix
			}),
			/* @__PURE__ */ jsx(NumberField.Input, {
				className: cx(styles.input, styles.numberInput, classNames?.input),
				placeholder,
				ref,
				style: customStyles?.input,
				onKeyDown: (event) => {
					if (isPressEnter(event)) onPressEnter?.(event);
				}
			}),
			suffix && /* @__PURE__ */ jsx("span", {
				className: styles.slot,
				children: suffix
			}),
			controls && /* @__PURE__ */ jsxs("div", {
				className: cx(styles.numberControls, size === "small" && styles.numberControlsSmall),
				children: [/* @__PURE__ */ jsx(NumberField.Increment, {
					className: controlClassName,
					children: /* @__PURE__ */ jsx(Icon, {
						icon: ChevronUp,
						size: controlIconSize[size]
					})
				}), /* @__PURE__ */ jsx(NumberField.Decrement, {
					className: controlClassName,
					children: /* @__PURE__ */ jsx(Icon, {
						icon: ChevronDown,
						size: controlIconSize[size]
					})
				})]
			})
		]
	});
});
InputNumber.displayName = "InputNumber";
var InputNumber_default = Object.assign(InputNumber, { formBinding: { emptyValue: null } });
//#endregion
export { InputNumber_default as default };

//# sourceMappingURL=InputNumber.mjs.map