"use client";
import { parts } from "./field.anatomy.js";
import { FieldProvider, useFieldContext } from "./use-field-context.js";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/components/field/field-item.tsx
var FieldItem = (props) => {
	const { value, children } = props;
	const parentField = useFieldContext();
	return /* @__PURE__ */ jsx(FieldProvider, {
		value: useMemo(() => {
			if (!parentField) throw new Error("Field.Item must be used within Field.Root");
			const controlId = `field::${parentField.ids.control}::item::${value}`;
			const labelId = `${controlId}::label`;
			const getControlProps = () => ({
				...parentField.getInputProps(),
				id: controlId
			});
			return {
				...parentField,
				ids: {
					...parentField.ids,
					control: controlId,
					label: labelId
				},
				getLabelProps: () => ({
					...parentField.getLabelProps(),
					id: labelId,
					htmlFor: controlId
				}),
				getInputProps: () => ({
					...getControlProps(),
					...parts.input.attrs
				}),
				getSelectProps: () => ({
					...getControlProps(),
					...parts.select.attrs
				}),
				getTextareaProps: () => ({
					...getControlProps(),
					...parts.textarea.attrs
				})
			};
		}, [parentField, value]),
		children
	});
};
FieldItem.displayName = "FieldItem";
//#endregion
export { FieldItem };
