@primer/react-brand/esm/forms/TextInput/TextInput.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../../node_modules/clsx/dist/clsx.js";
import { useId as t } from "../../hooks/useId.js";
import { Text as n } from "../../Text/Text.js";
import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
import r from "./TextInput.module.js";
import i, { forwardRef as a, useMemo as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
var l = a(({ className: a, disabled: l, fullWidth: u = !1, invisible: d = !1, leadingText: f, leadingVisual: p, monospace: m, placeholder: h, size: g = "medium", trailingText: _, trailingVisual: v, validationStatus: y, ...b }, x) => {
	let S = t(), C = f && !p, w = p && !f, T = _ && !v, E = v && !_, D = `${S}-leading-text`, O = `${S}-leading-visual`, k = `${S}-trailing-visual`, A = `${S}-trailing-text`, j = o(() => [
		{
			condition: C,
			id: D
		},
		{
			condition: w,
			id: O
		},
		{
			condition: E,
			id: k
		},
		{
			condition: T,
			id: A
		}
	].filter(({ condition: e }) => e).map(({ id: e }) => e).join(" "), [
		C,
		w,
		E,
		T,
		D,
		O,
		k,
		A
	]);
	return /* @__PURE__ */ c("span", {
		className: e(r["TextInput-wrapper"], r[`TextInput-wrapper--${g}`], u && r["TextInput-wrapper--fullWidth"], d && r["TextInput-wrapper--invisible"], l && r["TextInput-wrapper--disabled"], m && r["TextInput-wrapper--monospace"], y && r[`TextInput-wrapper--${y}`]),
		children: [
			C && /* @__PURE__ */ s("span", {
				className: e(r["TextInput-leading-text"], r[`TextInput-leading-text--${g}`], l && r["TextInput-leading-text--disabled"], y && r[`TextInput-leading-text--${y}`]),
				children: /* @__PURE__ */ s(n, {
					size: g === "large" ? "200" : "100",
					as: "span",
					className: e(r["TextInput-leading-text-inner"], r[`TextInput-leading-text-inner--${g}`]),
					id: D,
					children: f
				})
			}),
			w && /* @__PURE__ */ s("span", {
				className: e(r["TextInput-leading-visual"], r[`TextInput-leading-visual--${g}`]),
				children: p && i.isValidElement(p) ? i.cloneElement(p, {
					className: e(r["TextInput-leading-visual-icon"], r[`TextInput-leading-visual-icon--${g}`]),
					width: g === "large" ? 20 : 16,
					height: g === "large" ? 20 : 16,
					id: O
				}) : null
			}),
			/* @__PURE__ */ s("input", {
				type: "text",
				ref: x,
				className: e(r.TextInput, "TextInput", r[`TextInput--${g}`], u && r["TextInput--fullWidth"], p && r[`TextInput--has-leading-visual--${g}`], v && r[`TextInput--has-trailing-visual--${g}`], y && r[`TextInput--${y}`], f && !p && r["TextInput--has-leading-text"], _ && !v && r["TextInput--has-trailing-text"], a),
				placeholder: h,
				disabled: l,
				"aria-invalid": y === "error",
				"aria-describedby": j || void 0,
				...b
			}),
			E && /* @__PURE__ */ s("span", {
				className: e(r["TextInput-trailing-visual"], r[`TextInput-trailing-visual--${g}`]),
				children: v && i.isValidElement(v) ? i.cloneElement(v, {
					className: e(r["TextInput-trailing-visual-icon"], r[`TextInput-trailing-visual-icon--${g}`]),
					width: g === "large" ? 20 : 16,
					height: g === "large" ? 20 : 16,
					id: k
				}) : null
			}),
			T && /* @__PURE__ */ s("span", {
				className: e(r["TextInput-trailing-text"], r[`TextInput-trailing-text--${g}`], l && r["TextInput-trailing-text--disabled"], y && r[`TextInput-trailing-text--${y}`]),
				children: /* @__PURE__ */ s(n, {
					size: g === "large" ? "200" : "100",
					as: "span",
					className: e(r["TextInput-trailing-text-inner"], r[`TextInput-trailing-text-inner--${g}`]),
					id: A,
					children: _
				})
			})
		]
	});
});
l.displayName = "TextInput";
//#endregion
export { l as TextInput };

//# sourceMappingURL=TextInput.js.map