"use client";
import { cn } from "./index3.js";
import { createSafeContext } from "./index21.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/molecules/forms/Field/Field.tsx
/** Get state-aware text color class for helper text (description, hints). */
function getStateHelperColor(state) {
	switch (state) {
		case "success": return "text-success/80";
		case "destructive": return "text-destructive/80";
		default: return "text-muted-foreground/80";
	}
}
/** Get state-aware text color class for labels. */
function getStateLabelColor(state) {
	switch (state) {
		case "success": return "text-success";
		case "destructive": return "text-destructive";
		default: return "text-secondary-foreground";
	}
}
var [FieldContext, useFieldContext] = createSafeContext("Field");
/** Optional context hook for components that can work standalone. */
function useFieldContextOptional() {
	return React.useContext(FieldContext);
}
/** Hook to get field control props from context for custom form controls. */
function useFieldControlProps() {
	const context = useFieldContextOptional();
	if (!context) return {};
	const ariaDescribedBy = [context.descriptionId, context.state === "destructive" ? context.errorId : null].filter(Boolean).join(" ") || void 0;
	return {
		id: context.id,
		"aria-invalid": context.state === "destructive" ? true : void 0,
		"aria-describedby": ariaDescribedBy,
		"aria-required": context.required ? true : void 0,
		disabled: context.disabled,
		required: context.required,
		state: context.state
	};
}
function FieldRoot({ layout = "stacked", state = "default", disabled, required, className, children, ...props }) {
	const id = `field-${React.useId()}`;
	const descriptionId = `${id}-description`;
	const errorId = `${id}-error`;
	const contextValue = React.useMemo(() => ({
		id,
		descriptionId,
		errorId,
		state,
		disabled,
		required,
		layout
	}), [
		id,
		descriptionId,
		errorId,
		state,
		disabled,
		required,
		layout
	]);
	return /* @__PURE__ */ jsx(FieldContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsx("div", {
			"data-slot": "field",
			"data-layout": layout,
			"data-state": state,
			"data-disabled": disabled || void 0,
			className: cn("flex w-full transition-opacity motion-reduce:transition-none", layout === "stacked" && "flex-col gap-1.5", layout === "inline" && "flex-row items-start gap-2", disabled && "opacity-50", className),
			...props,
			children
		})
	});
}
FieldRoot.displayName = "Field";
function FieldTop({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "field-top",
		className: cn("flex items-center justify-between gap-2", className),
		...props,
		children
	});
}
FieldTop.displayName = "FieldTop";
function FieldTopRight({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "field-top-right",
		className: cn("text-xs leading-5 transition-colors motion-reduce:transition-none", getStateHelperColor(useFieldContextOptional()?.state), className),
		...props,
		children
	});
}
FieldTopRight.displayName = "FieldTopRight";
function FieldLabel({ className, required, labelIcon, children, ...props }) {
	const context = useFieldContextOptional();
	const isRequired = required || context?.required;
	return /* @__PURE__ */ jsxs("label", {
		"data-slot": "field-label",
		htmlFor: context?.id,
		className: cn("text-sm font-medium leading-5 transition-colors motion-reduce:transition-none", getStateLabelColor(context?.state), className),
		...props,
		children: [
			children,
			isRequired && /* @__PURE__ */ jsx("span", {
				className: "text-destructive ms-0.5",
				"aria-hidden": "true",
				children: "*"
			}),
			labelIcon && /* @__PURE__ */ jsx("span", {
				className: "text-muted-foreground ms-1 inline-flex align-middle",
				children: labelIcon
			})
		]
	});
}
FieldLabel.displayName = "FieldLabel";
function FieldControl({ children }) {
	useFieldContext();
	return children(useFieldControlProps());
}
FieldControl.displayName = "FieldControl";
function FieldBottom({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "field-bottom",
		className: cn("flex items-center justify-between gap-2", className),
		...props,
		children
	});
}
FieldBottom.displayName = "FieldBottom";
function FieldBottomRight({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "field-bottom-right",
		className: cn("text-xs leading-5 transition-colors motion-reduce:transition-none", getStateHelperColor(useFieldContextOptional()?.state), className),
		...props,
		children
	});
}
FieldBottomRight.displayName = "FieldBottomRight";
function FieldDescription({ className, children, ...props }) {
	const context = useFieldContextOptional();
	return /* @__PURE__ */ jsx("p", {
		id: context?.descriptionId,
		"data-slot": "field-description",
		className: cn("text-sm leading-5 transition-colors motion-reduce:transition-none", getStateHelperColor(context?.state), className),
		...props,
		children
	});
}
FieldDescription.displayName = "FieldDescription";
function FieldError({ className, children, ...props }) {
	const context = useFieldContextOptional();
	if (!children) return null;
	return /* @__PURE__ */ jsx("span", {
		id: context?.errorId,
		"data-slot": "field-error",
		role: "alert",
		className: cn("text-destructive text-sm font-normal", "animate-in fade-in-0 slide-in-from-top-1 duration-200 motion-reduce:animate-none", className),
		...props,
		children
	});
}
FieldError.displayName = "FieldError";
var Field = Object.assign(FieldRoot, {
	Root: FieldRoot,
	Top: FieldTop,
	Label: FieldLabel,
	TopRight: FieldTopRight,
	Control: FieldControl,
	Bottom: FieldBottom,
	Description: FieldDescription,
	BottomRight: FieldBottomRight,
	Error: FieldError
});
//#endregion
export { Field, FieldBottom, FieldBottomRight, FieldControl, FieldDescription, FieldError, FieldLabel, FieldTop, FieldTopRight, useFieldContextOptional, useFieldControlProps };

//# sourceMappingURL=index22.js.map