/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
"use client";
import { Search } from "../../icons/index.js";
import { formStyles } from "../styles/formStyles.js";
import React, { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Input, SearchField } from "react-aria-components";
//#region src/forms/SearchField/SearchField.tsx
/**
* SearchField component - A search input with clear button and proper semantics.
*
* Built on React Aria's SearchField for accessibility and UX best practices.
* Includes automatic debouncing (300ms default) and a clear button.
*
* @example
* ```tsx
* <SearchField
*   value={searchQuery}
*   onChange={setSearchQuery}
*   placeholder="Search..."
*   aria-label="Search products"
*   debounce={500}
* />
* ```
*/
var SearchField$1 = React.forwardRef(({ value: externalValue = "", onChange, onSubmit, placeholder = "Search...", "aria-label": ariaLabel, className, isDisabled, debounce = 300 }, ref) => {
	const [internalValue, setInternalValue] = useState(externalValue);
	useEffect(() => {
		setInternalValue(externalValue);
	}, [externalValue]);
	useEffect(() => {
		const timeout = setTimeout(() => {
			if (onChange && internalValue !== externalValue) onChange(internalValue);
		}, debounce);
		return () => clearTimeout(timeout);
	}, [internalValue, debounce]);
	return /* @__PURE__ */ jsx(SearchField, {
		value: internalValue,
		onChange: setInternalValue,
		onSubmit,
		isDisabled,
		"aria-label": ariaLabel,
		className,
		ref,
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative",
			children: [/* @__PURE__ */ jsx("div", {
				className: "absolute left-3 top-1/2 -translate-y-1/2 text-(--text-subtle) pointer-events-none",
				children: /* @__PURE__ */ jsx(Search, { className: "w-5 h-5" })
			}), /* @__PURE__ */ jsx(Input, {
				placeholder,
				className: `${formStyles.defaultInputStyle} pl-10`
			})]
		})
	});
});
SearchField$1.displayName = "SearchField";
//#endregion
export { SearchField$1 as SearchField };

//# sourceMappingURL=SearchField.js.map