@undp/design-system-react/dist/input-search-QdRH-k1d.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./createLucideIcon-JAvQ_M0R.js";
import { Button as n } from "./Button.js";
import { Input as r } from "./Input.js";
import i from "react";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
var s = t("search", [["path", {
	d: "m21 21-4.34-4.34",
	key: "14j7rj"
}], ["circle", {
	cx: "11",
	cy: "11",
	r: "8",
	key: "4ej97u"
}]]), c = i.forwardRef(({ className: t, inputClassName: c, buttonClassName: l, onSearch: u, searchOnlyOnClick: d, buttonVariant: f, buttonChildren: p, showSearchButton: m, inputVariant: h, inputSize: g, rounded: _, placeholder: v, ...y }, b) => {
	let [x, S] = i.useState(void 0), [C, w] = i.useState(!1);
	return /* @__PURE__ */ o("div", {
		className: e("flex items-stretch gap-0", t),
		ref: b,
		children: [/* @__PURE__ */ o("div", {
			className: "relative w-full",
			children: [/* @__PURE__ */ a(r, {
				...y,
				variant: h,
				type: "text",
				className: c,
				onChange: (e) => {
					S(e.target.value), d || u?.(e.target.value);
				},
				inputSize: g,
				rounded: _,
				onKeyDown: (e) => {
					e.key === "Enter" && u?.(x);
				},
				onFocus: () => w(!0),
				onBlur: () => w(!1)
			}), !C && (x === "" || !x) && /* @__PURE__ */ o("div", {
				className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
				children: [p ? null : /* @__PURE__ */ a(s, { className: "mr-2 h-4 w-4 text-content-placeholder" }), /* @__PURE__ */ a("span", {
					className: "text-content-placeholder",
					children: v || "Search..."
				})]
			})]
		}), m === !1 ? null : /* @__PURE__ */ a(n, {
			variant: f || "icon",
			className: e("py-0", l),
			padding: g,
			arrow: !1,
			onClick: () => {
				u?.(x);
			},
			children: p || /* @__PURE__ */ a(s, { className: "stroke-2" })
		})]
	});
});
c.displayName = "Search";
//#endregion
export { c as t };

//# sourceMappingURL=input-search-QdRH-k1d.js.map