@zayne-labs/ui-react 0.10.9 → 0.10.11

package/dist/esm/ui/form/index.js

@@ -1,9 +1,577 @@
 "use client";
 
 
-import "../../slot-WVWfOlr3.js";
-import "../../for-DK5rEY_m.js";
-import "../../cn-s-D7vHW1.js";
-import { FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, form_parts_exports, useFormRootContext, useStrictFormFieldContext } from "../../form-DyGy9LnA.js";
+import { __export } from "../../chunk-CTAAG5j7.js";
+import { SlotRoot } from "../../slot-WVWfOlr3.js";
+import { ForWithWrapper } from "../../for-BYsFEk3R.js";
+import { cnMerge } from "../../cn-DdD3uYxA.js";
+import { composeRefs, composeTwoEventHandlers, getMultipleSlots } from "@zayne-labs/toolkit-react/utils";
+import { defineEnum, isObject } from "@zayne-labs/toolkit-type-helpers";
+import { Fragment, createElement, useEffect, useId, useMemo, useRef } from "react";
+import { ContextError, createCustomContext, useCallbackRef, useToggle } from "@zayne-labs/toolkit-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { dataAttr, on, toArray } from "@zayne-labs/toolkit-core";
+import { Controller, FormProvider, useFormContext, useFormContext as useFormRootContext, useFormState, useWatch } from "react-hook-form";
 
-export { form_parts_exports as Form, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, useStrictFormFieldContext as useFormFieldContext, useFormRootContext };
+//#region src/components/ui/form/icons.tsx
+const EyeIconClosed = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M15.175 8.325q.725.725 1.063 1.65t.237 1.9q0 .375-.275.638t-.65.262t-.638-.262t-.262-.638q.125-.65-.075-1.25T13.95 9.6t-1.025-.65t-1.275-.1q-.375 0-.638-.275t-.262-.65t.263-.637t.637-.263q.95-.1 1.875.238t1.65 1.062M12 6q-.475 0-.925.037t-.9.138q-.425.075-.763-.125t-.462-.6t.088-.775t.612-.45q.575-.125 1.163-.175T12 4q3.425 0 6.263 1.8t4.337 4.85q.1.2.15.413t.05.437t-.038.438t-.137.412q-.45 1-1.112 1.875t-1.463 1.6q-.3.275-.7.225t-.65-.4t-.212-.763t.337-.687q.6-.575 1.1-1.25t.875-1.45q-1.25-2.525-3.613-4.012T12 6m0 13q-3.35 0-6.125-1.812T1.5 12.425q-.125-.2-.187-.437T1.25 11.5t.05-.475t.175-.45q.5-1 1.163-1.912T4.15 7L2.075 4.9q-.275-.3-.262-.712T2.1 3.5t.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275l-3.5-3.45q-.875.275-1.775.413T12 19M5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.613 4.013T12 17q.5 0 .975-.062t.975-.138l-.9-.95q-.275.075-.525.113T12 16q-1.875 0-3.188-1.312T7.5 11.5q0-.275.038-.525t.112-.525zm4.2 4.2"
+	})
+});
+const EyeIconOpen = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.35 0-6.113-1.8t-4.362-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17"
+	})
+});
+
+//#endregion
+//#region src/components/ui/form/utils.ts
+const getFieldErrorMessage = (options) => {
+	const { errors, fieldName, type } = options;
+	if (fieldName === void 0 || !errors || Object.keys(errors).length === 0) return;
+	if (type === "root") return errors.root?.[fieldName]?.message;
+	const pathParts = fieldName.includes(".") ? fieldName.split(".") : null;
+	if (!pathParts) return errors[fieldName]?.message;
+	let extractedError = errors;
+	for (const part of pathParts) {
+		const currentError = extractedError[part];
+		if (!isObject(currentError)) break;
+		extractedError = currentError;
+	}
+	return extractedError.message;
+};
+const getEyeIcon = (options) => {
+	const { classNames, iconType, renderIconProps, withEyeIcon } = options;
+	if (!withEyeIcon) return null;
+	if (withEyeIcon === true) return {
+		closed: createElement(EyeIconClosed, { className: cnMerge("size-full", classNames?.eyeIcon) }),
+		open: createElement(EyeIconOpen, { className: cnMerge("size-full", classNames?.eyeIcon) })
+	}[iconType];
+	if (withEyeIcon.renderIcon) return withEyeIcon.renderIcon(renderIconProps);
+	if (withEyeIcon[iconType]) return withEyeIcon[iconType];
+	return null;
+};
+
+//#endregion
+//#region src/components/ui/form/form-context.ts
+const useFormMethodsContext = (options = {}) => {
+	const { strict = true } = options;
+	const formContext = useFormContext();
+	if (strict && !formContext) throw new ContextError(`useFormRootContext returned "null". Did you forget to wrap the necessary components within FormRoot?`);
+	return formContext;
+};
+const [LaxFormRootProvider, useLaxFormRootContext] = createCustomContext({
+	defaultValue: null,
+	hookName: "useLaxFormRootContext",
+	name: "LaxFormRootContext",
+	providerName: "FormRoot",
+	strict: false
+});
+const [StrictFormFieldProvider, useStrictFormFieldContext] = createCustomContext({
+	hookName: "useFormFieldContext",
+	name: "StrictFormFieldContext",
+	providerName: "FormField"
+});
+const [LaxFormFieldProvider, useLaxFormFieldContext] = createCustomContext({
+	defaultValue: null,
+	hookName: "useLaxFormFieldContext",
+	name: "LaxFormFieldContext",
+	providerName: "FormField",
+	strict: false
+});
+const useLaxFormFieldState = (options) => {
+	const { control = options?.control } = useFormMethodsContext({ strict: false }) ?? {};
+	const { name = options?.name } = useLaxFormFieldContext() ?? {};
+	const { disabled, errors } = (control ? useFormState : () => ({}))({
+		control,
+		name
+	});
+	const errorMessage = getFieldErrorMessage({
+		errors,
+		fieldName: name,
+		type: "regular"
+	});
+	return {
+		errors,
+		isDisabled: disabled,
+		isInvalid: Boolean(errorMessage)
+	};
+};
+
+//#endregion
+//#region src/components/ui/form/form.tsx
+function FormRoot(props) {
+	const { children, className, methods, withEyeIcon,...restOfProps } = props;
+	const formContextValue = useMemo(() => ({ withEyeIcon }), [withEyeIcon]);
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...methods,
+		children: /* @__PURE__ */ jsx(LaxFormRootProvider, {
+			value: formContextValue,
+			children: /* @__PURE__ */ jsx("form", {
+				className: cnMerge("flex flex-col", className),
+				...restOfProps,
+				"data-scope": "form",
+				"data-part": "root",
+				"data-slot": "form-root",
+				children
+			})
+		})
+	});
+}
+function FormField(props) {
+	const { children, className, name, withWrapper = true } = props;
+	const { isDisabled, isInvalid } = useLaxFormFieldState({ name });
+	const uniqueId = useId();
+	const fieldContextValue = useMemo(() => ({
+		formDescriptionId: `${name}-(${uniqueId})-form-item-description`,
+		formItemId: `${name}-(${uniqueId})-form-item`,
+		formMessageId: `${name}-(${uniqueId})-form-item-message`,
+		name
+	}), [name, uniqueId]);
+	const WrapperElement = withWrapper ? "div" : Fragment;
+	const wrapperElementProps = withWrapper && {
+		className: cnMerge("flex flex-col gap-2", className),
+		"data-part": "field",
+		"data-scope": "form",
+		"data-slot": "form-field",
+		"data-disabled": dataAttr(isDisabled),
+		"data-invalid": dataAttr(isInvalid)
+	};
+	return /* @__PURE__ */ jsx(StrictFormFieldProvider, {
+		value: fieldContextValue,
+		children: /* @__PURE__ */ jsx(LaxFormFieldProvider, {
+			value: fieldContextValue,
+			children: /* @__PURE__ */ jsx(WrapperElement, {
+				...wrapperElementProps,
+				children
+			})
+		})
+	});
+}
+function FormFieldController(props) {
+	const { control } = useFormMethodsContext();
+	const { name } = useStrictFormFieldContext();
+	const { render,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render,
+		...restOfProps
+	});
+}
+function FormFieldControlledField(props) {
+	const { name } = props;
+	const uniqueId = useId();
+	const fieldContextValue = useMemo(() => ({
+		formDescriptionId: `${name}-(${uniqueId})-form-item-description`,
+		formItemId: `${name}-(${uniqueId})-form-item`,
+		formMessageId: `${name}-(${uniqueId})-form-item-message`,
+		name
+	}), [name, uniqueId]);
+	return /* @__PURE__ */ jsx(StrictFormFieldProvider, {
+		value: fieldContextValue,
+		children: /* @__PURE__ */ jsx(LaxFormFieldProvider, {
+			value: fieldContextValue,
+			children: /* @__PURE__ */ jsx(Controller, { ...props })
+		})
+	});
+}
+function FormFieldContext(props) {
+	const { children, render } = props;
+	const fieldContextValues = useStrictFormFieldContext();
+	if (typeof children === "function") return children(fieldContextValues);
+	return render(fieldContextValues);
+}
+function FormLabel(props) {
+	const fieldContextValues = useStrictFormFieldContext();
+	const { children, htmlFor = fieldContextValues.formItemId,...restOfProps } = props;
+	const { isDisabled, isInvalid } = useLaxFormFieldState({ name: fieldContextValues.name });
+	return /* @__PURE__ */ jsx("label", {
+		"data-scope": "form",
+		"data-part": "label",
+		"data-slot": "form-label",
+		"data-disabled": dataAttr(isDisabled),
+		"data-invalid": dataAttr(isInvalid),
+		htmlFor,
+		...restOfProps,
+		children
+	});
+}
+function FormInputGroup(props) {
+	const { children, className,...restOfProps } = props;
+	const { isDisabled, isInvalid } = useLaxFormFieldState();
+	const { regularChildren, slots: [leftItemSlot, rightItemSlot] } = getMultipleSlots(children, [FormInputLeftItem, FormInputRightItem]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-scope": "form",
+		"data-part": "input-group",
+		"data-slot": "form-input-group",
+		"data-invalid": dataAttr(isInvalid),
+		"data-disabled": dataAttr(isDisabled),
+		className: cnMerge("flex items-center justify-between gap-2", className),
+		...restOfProps,
+		children: [
+			leftItemSlot,
+			regularChildren,
+			rightItemSlot
+		]
+	});
+}
+function FormInputLeftItem(props) {
+	const { as: Element = "span", children, className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "form",
+		"data-part": "left-item",
+		"data-slot": "form-left-item",
+		className: cnMerge("inline-flex items-center justify-center", className),
+		...restOfProps,
+		children
+	});
+}
+FormInputLeftItem.slotSymbol = Symbol("input-left-item");
+function FormInputRightItem(props) {
+	const { as: Element = "span", children, className,...restOfProps } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		"data-scope": "form",
+		"data-part": "right-item",
+		"data-slot": "form-right-item",
+		className: cnMerge("inline-flex items-center justify-center", className),
+		...restOfProps,
+		children
+	});
+}
+FormInputRightItem.slotSymbol = Symbol("input-right-item");
+const inputTypesWithoutFullWith = new Set(["checkbox", "radio"]);
+function FormInputPrimitive(props) {
+	const fieldContextValues = useLaxFormFieldContext();
+	const formRootContextValues = useLaxFormRootContext();
+	const { className, classNames, control, fieldState, id = fieldContextValues?.formItemId, name = fieldContextValues?.name, rules, type = "text", withEyeIcon = formRootContextValues?.withEyeIcon ?? true,...restOfProps } = props;
+	const fieldStateFromLaxFormField = useLaxFormFieldState({
+		control,
+		name
+	});
+	const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
+	const [isPasswordVisible, toggleVisibility] = useToggle(false);
+	const shouldHaveEyeIcon = withEyeIcon && type === "password";
+	const WrapperElement = shouldHaveEyeIcon ? FormInputGroup : Fragment;
+	const wrapperElementProps = shouldHaveEyeIcon && { className: cnMerge("w-full", classNames?.inputGroup, isInvalid && classNames?.error) };
+	const { register } = useFormMethodsContext({ strict: false }) ?? {};
+	const eyeIcon = getEyeIcon({
+		classNames,
+		iconType: isPasswordVisible ? "closed" : "open",
+		renderIconProps: { isPasswordVisible },
+		withEyeIcon
+	});
+	return /* @__PURE__ */ jsxs(WrapperElement, {
+		...wrapperElementProps,
+		children: [/* @__PURE__ */ jsx("input", {
+			"data-scope": "form",
+			"data-part": "input",
+			"data-slot": "form-input",
+			"aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
+			"aria-invalid": dataAttr(isInvalid),
+			"data-invalid": dataAttr(isInvalid),
+			"data-disabled": dataAttr(isDisabled),
+			id,
+			name,
+			type: type === "password" && isPasswordVisible ? "text" : type,
+			className: cnMerge(!inputTypesWithoutFullWith.has(type) && "flex w-full", `bg-transparent text-sm file:border-0 file:bg-transparent
+					placeholder:text-zu-muted-foreground focus-visible:outline-hidden
+					disabled:cursor-not-allowed disabled:opacity-50`, className, classNames?.input, type !== "password" && isInvalid && classNames?.error),
+			...Boolean(name) && register?.(name, rules),
+			...restOfProps
+		}), shouldHaveEyeIcon && /* @__PURE__ */ jsx(FormInputRightItem, {
+			as: "button",
+			type: "button",
+			onClick: toggleVisibility,
+			className: "size-5 shrink-0 lg:size-6",
+			children: eyeIcon
+		})]
+	});
+}
+function FormTextAreaPrimitive(props) {
+	const fieldContextValues = useLaxFormFieldContext();
+	const { className, classNames, control, fieldState, id = fieldContextValues?.formItemId, name = fieldContextValues?.name, rules,...restOfProps } = props;
+	const fieldStateFromLaxFormField = useLaxFormFieldState({
+		control,
+		name
+	});
+	const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
+	const { register } = useFormMethodsContext({ strict: false }) ?? {};
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-scope": "form",
+		"data-part": "textarea",
+		"data-slot": "form-textarea",
+		"aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
+		"aria-invalid": dataAttr(isInvalid),
+		"data-disabled": dataAttr(isDisabled),
+		"data-invalid": dataAttr(isInvalid),
+		id,
+		name,
+		className: cnMerge(`w-full bg-transparent text-sm placeholder:text-zu-muted-foreground
+				focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50`, className, classNames?.base, isInvalid && classNames?.error),
+		...Boolean(name) && register?.(name, rules),
+		...restOfProps
+	});
+}
+function FormSelectPrimitive(props) {
+	const fieldContextValues = useLaxFormFieldContext();
+	const { className, classNames, control, fieldState, id = fieldContextValues?.formItemId, name = fieldContextValues?.name, rules,...restOfProps } = props;
+	const fieldStateFromLaxFormField = useLaxFormFieldState({
+		control,
+		name
+	});
+	const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
+	const { register } = useFormMethodsContext({ strict: false }) ?? {};
+	return /* @__PURE__ */ jsx("select", {
+		defaultValue: "",
+		"data-scope": "form",
+		"data-part": "select",
+		"data-slot": "form-select",
+		"aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
+		"aria-invalid": dataAttr(isInvalid),
+		"data-disabled": dataAttr(isDisabled),
+		"data-invalid": dataAttr(isInvalid),
+		id,
+		name,
+		className: cnMerge(`w-full bg-transparent text-sm placeholder:text-zu-muted-foreground
+				focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50`, className, classNames?.base, isInvalid && classNames?.error),
+		...Boolean(name) && register?.(name, rules),
+		...restOfProps
+	});
+}
+const InputTypeMap = defineEnum({
+	select: FormSelectPrimitive,
+	textarea: FormTextAreaPrimitive
+});
+function FormInput(props) {
+	const { onBlur, onChange, ref, rules, type,...restOfProps } = props;
+	const { name } = useStrictFormFieldContext();
+	const { register } = useFormMethodsContext();
+	const SelectedInput = type === "textarea" || type === "select" ? InputTypeMap[type] : FormInputPrimitive;
+	const registerProps = name ? register(name, rules) : null;
+	return /* @__PURE__ */ jsx(SelectedInput, {
+		type,
+		name,
+		...registerProps,
+		...restOfProps,
+		ref: composeRefs(registerProps?.ref, ref),
+		onChange: composeTwoEventHandlers(registerProps?.onChange, onChange),
+		onBlur: composeTwoEventHandlers(registerProps?.onBlur, onBlur)
+	});
+}
+function FormTextArea(props) {
+	return /* @__PURE__ */ jsx(FormInput, {
+		...props,
+		type: "textarea"
+	});
+}
+function FormSelect(props) {
+	return /* @__PURE__ */ jsx(FormInput, {
+		...props,
+		type: "select"
+	});
+}
+function FormDescription(props) {
+	const { className,...restOfProps } = props;
+	const { formDescriptionId } = useLaxFormFieldContext() ?? {};
+	return /* @__PURE__ */ jsx("p", {
+		id: formDescriptionId,
+		className: cnMerge("text-[12px]", className),
+		...restOfProps
+	});
+}
+const FormErrorMessagePrimitive = (props) => {
+	const fieldContextValues = useLaxFormFieldContext();
+	const rootContextValues = useFormMethodsContext({ strict: false });
+	const { children, className, classNames, control = rootContextValues?.control, disableErrorAnimation = false, disableScrollToErrorField = false, fieldName = fieldContextValues?.name, renderItem, type = "regular" } = props;
+	const { errors } = useLaxFormFieldState({
+		control,
+		name: fieldName
+	});
+	const { formMessageId } = useLaxFormFieldContext() ?? {};
+	const containerRef = useRef(null);
+	const errorAnimationClass = classNames?.errorMessageAnimation ?? "animate-shake";
+	const getErrorElements = useCallbackRef(() => containerRef.current?.children ?? []);
+	useEffect(() => {
+		if (disableErrorAnimation) return;
+		if (!errors || Object.keys(errors).length === 0) return;
+		const errorMessageElements = getErrorElements();
+		if (errorMessageElements.length === 0) return;
+		const controller = new AbortController();
+		for (const element of errorMessageElements) {
+			element.classList.add(errorAnimationClass);
+			const onAnimationEnd = () => element.classList.remove(errorAnimationClass);
+			on("animationend", element, onAnimationEnd, {
+				once: true,
+				signal: controller.signal
+			});
+		}
+		return () => {
+			controller.abort();
+		};
+	}, [
+		disableErrorAnimation,
+		errorAnimationClass,
+		errors,
+		getErrorElements
+	]);
+	useEffect(() => {
+		if (disableScrollToErrorField) return;
+		if (!errors || Object.keys(errors).length === 0) return;
+		const errorMessageElements = getErrorElements();
+		if (errorMessageElements.length === 0) return;
+		const firstErrorElement = errorMessageElements[0];
+		if (!firstErrorElement) return;
+		if (document.querySelector(`[name='${fieldName}']`)?.matches(":is(input, select, textarea, [contenteditable='true'])")) return;
+		const frameID = requestAnimationFrame(() => {
+			const elementRect = firstErrorElement.getBoundingClientRect();
+			if (elementRect.top === 0) return;
+			const topWithOffset = elementRect.top - 100;
+			window.scrollTo({
+				behavior: "smooth",
+				top: window.scrollY + topWithOffset
+			});
+		});
+		return () => {
+			cancelAnimationFrame(frameID);
+		};
+	}, [
+		disableScrollToErrorField,
+		fieldName,
+		errors,
+		getErrorElements
+	]);
+	const fieldErrorMessage = getFieldErrorMessage({
+		errors,
+		fieldName,
+		type
+	});
+	if (!fieldErrorMessage) return null;
+	const errorMessageArray = toArray(fieldErrorMessage);
+	if (errorMessageArray.length === 0) return null;
+	const getRenderProps = (options) => {
+		const { index } = options;
+		return {
+			className: cnMerge(className, classNames?.errorMessage),
+			"data-index": index,
+			"data-part": "error-message",
+			"data-scope": "form",
+			"data-slot": "form-error-message",
+			id: formMessageId
+		};
+	};
+	const getRenderState = (options) => {
+		const { errorMessage, index } = options;
+		return {
+			errorMessage,
+			errorMessageArray,
+			index
+		};
+	};
+	const selectedChildren = typeof children === "function" ? children : renderItem;
+	return /* @__PURE__ */ jsx(ForWithWrapper, {
+		ref: containerRef,
+		className: cnMerge("flex flex-col", classNames?.container),
+		"data-part": "error-message-container",
+		"data-scope": "form",
+		"data-slot": "form-error-message-container",
+		each: errorMessageArray,
+		renderItem: (errorMessage, index) => {
+			return selectedChildren({
+				props: getRenderProps({ index }),
+				state: getRenderState({
+					errorMessage,
+					index
+				})
+			});
+		}
+	});
+};
+function FormErrorMessage(props) {
+	const fieldContextValues = useLaxFormFieldContext();
+	const { className, errorField = fieldContextValues?.name, type = "regular" } = props;
+	const { control } = useFormMethodsContext();
+	return /* @__PURE__ */ jsx(FormErrorMessagePrimitive, {
+		control,
+		fieldName: errorField,
+		type,
+		renderItem: ({ props: renderProps, state }) => /* @__PURE__ */ jsx("li", {
+			...renderProps,
+			className: cnMerge("text-[13px] text-zu-destructive", "data-[index=0]:mt-1", renderProps.className, className),
+			children: state.errorMessage
+		}, state.errorMessage)
+	});
+}
+function FormSubmit(props) {
+	const { as: Element = "button", asChild, children, type = "submit",...restOfProps } = props;
+	const Component$1 = asChild ? SlotRoot : Element;
+	return /* @__PURE__ */ jsx(Component$1, {
+		"data-part": "submit",
+		"data-scope": "form",
+		"data-slot": "form-submit",
+		type,
+		...restOfProps,
+		children
+	});
+}
+function FormSubscribeToFieldValue(props) {
+	const fieldContextValues = useLaxFormFieldContext();
+	const { children, name = fieldContextValues?.name, render } = props;
+	const { control } = useFormMethodsContext();
+	const formValue = useWatch({
+		control,
+		name
+	});
+	return (typeof children === "function" ? children : render)({ value: formValue });
+}
+function FormSubscribeToFormState(props) {
+	const fieldContextValues = useLaxFormFieldContext();
+	const { children, control, name = fieldContextValues?.name, render } = props;
+	const formState = useFormState({
+		control,
+		name
+	});
+	return (typeof children === "function" ? children : render)(formState);
+}
+
+//#endregion
+//#region src/components/ui/form/form-parts.ts
+var form_parts_exports = __export({
+	ControlledField: () => FormFieldControlledField,
+	Description: () => FormDescription,
+	ErrorMessage: () => FormErrorMessage,
+	ErrorMessagePrimitive: () => FormErrorMessagePrimitive,
+	Field: () => FormField,
+	FieldContext: () => FormFieldContext,
+	FieldController: () => FormFieldController,
+	Input: () => FormInput,
+	InputGroup: () => FormInputGroup,
+	InputLeftItem: () => FormInputLeftItem,
+	InputPrimitive: () => FormInputPrimitive,
+	InputRightItem: () => FormInputRightItem,
+	Label: () => FormLabel,
+	Root: () => FormRoot,
+	Select: () => FormSelect,
+	Submit: () => FormSubmit,
+	SubscribeToFieldValue: () => FormSubscribeToFieldValue,
+	SubscribeToFormState: () => FormSubscribeToFormState,
+	TextArea: () => FormTextArea,
+	TextAreaPrimitive: () => FormTextAreaPrimitive
+});
+
+//#endregion
+export { form_parts_exports as Form, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, useStrictFormFieldContext as useFormFieldContext, useFormRootContext };
+//# sourceMappingURL=index.js.map