@payfit/unity-components/dist/esm/components/form-field/TanstackFormField.js

import { useFieldContext as e } from "../../hooks/tanstack-form-context.js";
import { FieldA11yContext as t } from "./TanstackFormField.context.js";
import { useId as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
import { uyTv as s } from "@payfit/unity-themes";
import { jsx as c } from "react/jsx-runtime";
//#region src/components/form-field/TanstackFormField.tsx
var l = s({ base: ["uy:group/field", "uy:flex uy:flex-col uy:gap-100"] });
function u({ children: s, className: u }) {
	let d = n(), f = a(null), p = e(), m = p.form.formId || d, h = p.name.replace(/[^\w-]/g, "-"), [g, _] = o(!1), [v, y] = o(!1);
	r(() => {
		let e = f.current;
		if (!e) return;
		let t = e.querySelector("[data-unity-slot=\"form-field-helper-text\"]"), n = e.querySelector("[data-unity-slot=\"form-field-contextual-link\"]");
		_(!!t), y(!!n);
	}, [s]);
	let b = i(() => {
		let e = `form-${m}-field-${h}`, t = {
			fieldGroupId: e,
			labelId: `${e}__label`,
			inputId: `${e}__input`,
			feedbackTextId: `${e}__feedback-text`
		};
		return g && (t.helperTextId = `${e}__helper-text`), v && (t.contextualLinkId = `${e}__contextual-link`), t;
	}, [
		m,
		h,
		g,
		v
	]);
	return /* @__PURE__ */ c(t.Provider, {
		value: b,
		children: /* @__PURE__ */ c("div", {
			ref: f,
			id: b.fieldGroupId,
			role: "group",
			className: l({ className: u }),
			"data-unity-slot": "form-field",
			"data-invalid": !p.state.meta.isValid,
			children: s
		})
	});
}
u.displayName = "TanstackFormField";
//#endregion
export { u as TanstackFormField };