/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-6b06f3c
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import { useLocale, useNumberField } from 'react-aria';
import { useNumberFieldState } from 'react-stately';
import { useProviderProps } from '../../../provider.js';
import { tasty } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { castNullableNumberValue, } from '../../../utils/react/nullableValue.js';
import { useFieldProps } from '../../form/index.js';
import { TextInputBase } from '../TextInput/index.js';
import { StepButton } from './StepButton.js';
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);
    // Merge user-provided labelProps with aria labelProps
    const mergedLabelProps = mergeProps(labelProps, userLabelProps);
    const steppers = showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : undefined;
    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: mergedLabelProps, inputProps: { ...inputProps, 'data-input-type': 'numberinput' }, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? (_jsxs(_Fragment, { children: [suffix, steppers] })) : (_jsxs(_Fragment, { 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';
export { _NumberInput as NumberInput };

        