import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Field.tsx
const FieldContext = React.createContext(null);
function useFieldControl() {
	return React.useContext(FieldContext);
}
function Field({ label, htmlFor, hint, error, required, children }) {
	const generatedId = React.useId();
	const controlId = htmlFor ?? generatedId;
	const hintId = hint ? `${controlId}-hint` : void 0;
	const errorId = error ? `${controlId}-error` : void 0;
	const describedBy = [hintId, errorId].filter(Boolean).join(" ") || void 0;
	return /* @__PURE__ */ jsx(FieldContext.Provider, {
		value: {
			id: controlId,
			invalid: Boolean(error),
			required,
			describedBy
		},
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-1",
			children: [
				/* @__PURE__ */ jsxs("label", {
					htmlFor: controlId,
					className: "text-sm font-medium text-fg",
					children: [label, required ? /* @__PURE__ */ jsx("span", {
						"aria-hidden": "true",
						children: " *"
					}) : null]
				}),
				children,
				hint ? /* @__PURE__ */ jsx("span", {
					id: hintId,
					className: "text-sm text-fg-muted",
					children: hint
				}) : null,
				error ? /* @__PURE__ */ jsx("span", {
					id: errorId,
					role: "alert",
					className: "text-sm text-danger",
					children: error
				}) : null
			]
		})
	});
}
//#endregion
export { Field, FieldContext, useFieldControl };
