/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-29d58ba | Cube Dev Team */
import { tasty } from "../../../tasty/tasty.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { useProviderProps } from "../../../provider.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { TextInputBase } from "../TextInput/TextInputBase.js";
import { castNullableNumberValue } from "../../../utils/react/nullableValue.js";
import { StepButton } from "./StepButton.js";
import { forwardRef, useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useLocale, useNumberField } from "react-aria";
import { useNumberFieldState } from "react-stately";

//#region src/components/fields/NumberInput/NumberInput.tsx
const StyledTextInputBase = tasty(TextInputBase, { inputStyles: { textAlign: "right" } });
const StepperContainer = tasty({ styles: {
	display: "grid",
	gridColumns: "1sf",
	gridRows: "1sf 1sf",
	flow: "column",
	placeSelf: "stretch",
	margin: "(.5x - 1bw) left"
} });
function NumberInput(props, ref) {
	props = castNullableNumberValue(props);
	props = useProviderProps(props);
	props = useFieldProps(props);
	let { hideStepper, suffix, value, defaultValue, onChange, inputRef, labelProps: userLabelProps, ...otherProps } = props;
	let showStepper = !hideStepper;
	let { locale } = useLocale();
	let state = useNumberFieldState({
		...props,
		locale
	});
	let localInputRef = useRef(null);
	inputRef = inputRef ?? localInputRef;
	let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(props, state, inputRef);
	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
	const steppers = showStepper ? /* @__PURE__ */ jsxs(StepperContainer, { children: [/* @__PURE__ */ jsx(StepButton, {
		isDisabled: props.isDisabled,
		direction: "up",
		...incrementButtonProps,
		size: otherProps.size
	}), /* @__PURE__ */ jsx(StepButton, {
		isDisabled: props.isDisabled,
		direction: "down",
		...decrementButtonProps,
		size: otherProps.size
	})] }) : void 0;
	return /* @__PURE__ */ jsx(StyledTextInputBase, {
		...otherProps,
		ref,
		labelProps: mergedLabelProps,
		inputProps: {
			...inputProps,
			"data-input-type": "numberinput"
		},
		inputRef,
		wrapperProps: groupProps,
		suffixPosition: "after",
		suffix: showStepper ? props.suffixPosition === "before" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [suffix, steppers] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [steppers, suffix] }) : suffix
	});
}
/**
* NumberFields allow users to enter a number and increment or decrement the value using stepper buttons.
*/
const _NumberInput = forwardRef(NumberInput);
_NumberInput.cubeInputType = "Number";
_NumberInput.displayName = "NumberInput";

//#endregion
export { _NumberInput };
//# sourceMappingURL=NumberInput.js.map