/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { formStyles } from "../styles/formStyles.js";
import { Label } from "../common/Label.js";
import { InputError } from "../common/InputError.js";
import { InputDescription } from "../common/InputDescription.js";
import { CopyButton } from "../../core/CopyButton/CopyButton.js";
import "../../core/CopyButton/index.js";
import { forwardRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/forms/Input/TextField.tsx
/**
* TextField component - A complete form field with label, input, description, and error.
*
* This is a composite component that includes:
* - Label (optional)
* - Input Description (optional)
* - Input or Textarea element
* - Error messages (optional)
*
* For a simpler, composable input element, see the `Input` component.
*
* @example
* ```tsx
* <TextField
*   name="email"
*   type="email"
*   label="Email Address"
*   placeholder="Enter your email"
*   description="We'll never share your email"
*   errors={formErrors}
* />
* ```
*/
var TextField = forwardRef(({ name, type = "text", placeholder, label, description, className, errors, disabled, multiline = false, rows, cols, noMargin = false, noWrapper = false, showCopyToClipboard = false, testId, ...rest }, forwardedRef) => {
	const hasError = errors?.[name];
	let inputClassName = `${className ?? formStyles.defaultInputStyle} ${hasError ? formStyles.inputErrorGlow : ""} ${disabled ? "cursor-not-allowed" : ""} ${showCopyToClipboard ? "pr-10" : ""}`;
	if (multiline) inputClassName = `${inputClassName} ${formStyles.textarea}`;
	const id = rest.id ?? name;
	const assignRef = (element) => {
		if (typeof forwardedRef === "function") forwardedRef(element);
		else if (forwardedRef && "current" in forwardedRef) forwardedRef.current = element;
	};
	const commonProps = {
		id,
		className: inputClassName,
		placeholder,
		disabled,
		"aria-invalid": hasError ? true : void 0,
		"data-testid": testId,
		name,
		...rest
	};
	const inputElement = multiline ? /* @__PURE__ */ jsx("textarea", {
		ref: assignRef,
		rows: rows ?? 3,
		...commonProps
	}) : /* @__PURE__ */ jsx("input", {
		ref: assignRef,
		type,
		...commonProps
	});
	const copyValue = rest.value ?? rest.defaultValue ?? "";
	const fieldControl = showCopyToClipboard ? /* @__PURE__ */ jsxs("div", {
		className: "relative",
		children: [inputElement, /* @__PURE__ */ jsx("span", {
			className: `absolute right-1 ${multiline ? "top-1" : "inset-y-0 flex items-center"}`,
			children: /* @__PURE__ */ jsx(CopyButton, {
				value: String(copyValue),
				size: "sm",
				ariaLabel: label ? `Copy ${label}` : "Copy to clipboard"
			})
		})]
	}) : inputElement;
	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
		label && /* @__PURE__ */ jsx(Label, {
			htmlFor: id,
			children: label
		}),
		description && /* @__PURE__ */ jsx(InputDescription, { children: description }),
		fieldControl,
		hasError && /* @__PURE__ */ jsx(InputError, {
			errors,
			name
		})
	] });
	if (noWrapper) return content;
	return /* @__PURE__ */ jsx("div", {
		className: formStyles.inputWrapper,
		children: content
	});
});
TextField.displayName = "TextField";
//#endregion
export { TextField };

//# sourceMappingURL=TextField.js.map