import { t as e } from "../../chunks/clsx.js";
import { Button as t } from "../buttons/Button.js";
import { FormControl as n } from "./FormControl.js";
import { useValue as r } from "../hooks/useValue.js";
import { useId as i } from "react";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
//#region lib/ui/forms/NumberField.tsx
var s = {
	width: "28px",
	height: "28px"
};
function c(e) {
	let t = i(), { id: n = t, name: a = n, value: o = 0, onChange: s, min: c = 0, max: l = 10, disabled: u = !1, dataTestId: d = "NumberField", inline: f = !0, labels: p, ...m } = e, { value: h, setValue: g } = r({
		defaultValue: o,
		formatter: Number,
		onChange: s
	}), _ = (e) => {
		let t = Number(e.target.value);
		t >= c && t <= l && g(Number(t), e.nativeEvent);
	}, v = (e) => {
		h < l && g(h + 1, e);
	}, y = (e) => {
		h > c && g(h - 1, e);
	};
	return {
		...m,
		id: n,
		min: c,
		max: l,
		name: a,
		value: h,
		dataTestId: d,
		disabled: u,
		inline: f,
		labels: p,
		handleChange: _,
		increase: v,
		decrease: y
	};
}
var l = (r) => {
	let { disabled: i, min: l, max: u, label: d, description: f, id: p, dataTestId: m, value: h, handleChange: g, increase: _, decrease: v, errorMessage: y, validationStatus: b, hideRequiredStar: x, required: S, inline: C, labels: w, ...T } = c(r);
	return /* @__PURE__ */ a(n, {
		id: p,
		label: d,
		description: f,
		className: e("flex items-center", r.className),
		dataName: "NumberField",
		dataTestId: m,
		errorMessage: y,
		validationStatus: b,
		disabled: i,
		required: S,
		hideRequiredStar: x,
		layout: "vertical",
		inline: C,
		children: /* @__PURE__ */ o("div", {
			className: "flex items-center gap-x-8",
			children: [
				/* @__PURE__ */ a(t, {
					onClick: (e) => v(e.nativeEvent),
					variant: "circle",
					disabled: h <= l || i,
					icon: "MinusDefault",
					"aria-label": w.decrease,
					"data-testid": `${m}-decrease`
				}),
				/* @__PURE__ */ a("input", {
					...T,
					className: e("text-b2 text-center font-bold outline-none", { "bg-pearl text-grey": i }),
					style: s,
					type: "number",
					title: w.input,
					id: p,
					onChange: g,
					disabled: i,
					required: S,
					value: h,
					min: l,
					max: u
				}),
				/* @__PURE__ */ a(t, {
					onClick: (e) => _(e.nativeEvent),
					variant: "circle",
					"aria-label": w.increase,
					disabled: h >= u || i,
					icon: "PlusDefault",
					"data-testid": `${m}-increase`
				})
			]
		})
	});
};
//#endregion
export { l as NumberField, c as useNumberField };

//# sourceMappingURL=NumberField.js.map