/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d4ad2ea | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { useProviderProps } from "../../../provider.js";
import { useFormProps } from "../../form/Form/Form.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { wrapWithField } from "../../form/wrapper.js";
import { _DateInputBase } from "./DateInputBase.js";
import { DatePickerSegment } from "./DatePickerSegment.js";
import { DEFAULT_TIME_PROPS } from "./props.js";
import { useFocusManagerRef } from "./utils.js";
import { CONTAINER_STYLES } from "@tenphi/tasty";
import { forwardRef, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useTimeField } from "react-aria";
import { useTimeFieldState } from "react-stately";

//#region src/components/fields/DatePicker/TimeInput.tsx
function TimeInput(props, ref) {
	props = useProviderProps(props);
	props = useFormProps(props);
	props = useFieldProps(props, { defaultValidationTrigger: "onBlur" });
	props = Object.assign({}, DEFAULT_TIME_PROPS, props);
	extractStyles(props, CONTAINER_STYLES);
	let { qa, inputStyles, wrapperStyles, autoFocus, isDisabled, isReadOnly, isRequired, validationState, size = "medium", labelProps: userLabelProps } = props;
	let domRef = useFocusManagerRef(ref);
	let state = useTimeFieldState({
		...props,
		locale: "en-US"
	});
	let fieldRef = useRef(null);
	let { labelProps, fieldProps } = useTimeField(props, state, fieldRef);
	return wrapWithField(/* @__PURE__ */ jsx(_DateInputBase, {
		ref: fieldRef,
		qa: qa || "TimeInput",
		inputType: "timeinput",
		size,
		fieldProps,
		isDisabled,
		autoFocus,
		inputStyles,
		styles: wrapperStyles,
		validationState,
		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DatePickerSegment, {
			segment,
			state,
			isDisabled,
			isReadOnly,
			isRequired
		}, i))
	}), domRef, {
		...props,
		labelProps: mergeProps$1(labelProps, userLabelProps)
	});
}
/**
* TimeFields allow users to enter and edit time values using a keyboard.
* Each part of the time is displayed in an individually editable segment.
*/
const _TimeInput = forwardRef(TimeInput);
_TimeInput.displayName = "TimeInput";

//#endregion
export { _TimeInput };
//# sourceMappingURL=TimeInput.js.map