@jfrader/ui 0.4.0 → 0.5.0

package/dist/scroll-area-CcZyiSOQ.js

@@ -0,0 +1,371 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-latest-callback-cj1OOQL6.js";
+import { useCallback as o, useEffect as s, useRef as c } from "react";
+import { vars as l } from "@jfrader/tokens/vars";
+import { createElement as u } from "@emotion/react";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+//#region src/components/scroll-area/scroll-area.tsx
+var p = 900, m = .9, h = 1, g = e({
+	label: "scroll-area",
+	position: "relative",
+	display: "grid",
+	minInlineSize: 0,
+	minBlockSize: 0,
+	"--scroll-area-hit": l.space[8],
+	"--scroll-area-min-thumb": l.space[8],
+	"--scroll-area-fade": l.space[6],
+	"&:hover > [data-ui=\"scroll-area-track\"], &:focus-within > [data-ui=\"scroll-area-track\"], &[data-scrolling] > [data-ui=\"scroll-area-track\"], &[data-dragging] > [data-ui=\"scroll-area-track\"], &[data-scrollbars=\"always\"] > [data-ui=\"scroll-area-track\"]": { opacity: 1 },
+	"&:focus-within > [data-ui=\"scroll-area-viewport\"]": { maskImage: "none" },
+	[r]: { "& > [data-ui=\"scroll-area-track\"]": { display: "none" } }
+}), _ = e({
+	label: "scroll-area-viewport",
+	minInlineSize: 0,
+	minBlockSize: 0,
+	maxBlockSize: "100%",
+	overflowX: "hidden",
+	overflowY: "auto",
+	"&:focus-visible": n,
+	maskImage: "linear-gradient(to bottom, transparent, black var(--fade-top), black calc(100% - var(--fade-bottom)), transparent), linear-gradient(to right, transparent, black var(--fade-left), black calc(100% - var(--fade-right)), transparent)",
+	maskComposite: "intersect",
+	"&[data-orientation=\"horizontal\"]": {
+		overflowX: "auto",
+		overflowY: "hidden"
+	},
+	"&[data-orientation=\"both\"]": {
+		overflowX: "auto",
+		overflowY: "auto"
+	},
+	"&[data-scrollbars=\"native\"]": { scrollbarWidth: "auto" },
+	"&:not([data-scrollbars=\"native\"])": {
+		scrollbarWidth: "none",
+		"&::-webkit-scrollbar": { display: "none" }
+	},
+	[r]: {
+		maskImage: "none",
+		"&:not([data-scrollbars=\"native\"])": {
+			scrollbarWidth: "auto",
+			"&::-webkit-scrollbar": { display: "block" }
+		}
+	}
+}), v = e({
+	display: "flow-root",
+	minInlineSize: "100%",
+	"&[data-orientation=\"horizontal\"], &[data-orientation=\"both\"]": { inlineSize: "max-content" }
+}), y = e({
+	label: "scroll-area-track",
+	opacity: 0,
+	touchAction: "none",
+	userSelect: "none",
+	transition: `opacity ${l.motion.duration.base} ${l.motion.easeStandard}`,
+	"&[hidden]": { display: "none" },
+	[i]: { transition: "none" }
+}), b = e({
+	label: "scroll-area-thumb",
+	"&::after": {
+		content: "\"\"",
+		position: "absolute",
+		backgroundColor: l.color.borderControl,
+		borderRadius: l.radius.full,
+		transition: `background-color ${l.motion.duration.fast} ${l.motion.easeStandard}`
+	},
+	"&[data-axis=\"block\"]::after": {
+		insetBlock: 0,
+		inlineSize: l.space[2],
+		insetInlineStart: `calc(50% - ${l.space[2]} / 2)`
+	},
+	"&[data-axis=\"inline\"]::after": {
+		insetInline: 0,
+		blockSize: l.space[2],
+		insetBlockStart: `calc(50% - ${l.space[2]} / 2)`
+	},
+	"&:hover::after": { backgroundColor: l.color.text },
+	[i]: { "&::after": { transition: "none" } }
+}), x = {
+	block: {
+		position: "absolute",
+		insetInlineStart: "auto",
+		insetInlineEnd: 0,
+		insetBlockStart: 0,
+		insetBlockEnd: "auto",
+		inlineSize: "var(--scroll-area-hit)",
+		blockSize: "var(--track-size)",
+		transform: "none"
+	},
+	inline: {
+		position: "absolute",
+		insetInlineStart: 0,
+		insetInlineEnd: "auto",
+		insetBlockStart: "auto",
+		insetBlockEnd: 0,
+		blockSize: "var(--scroll-area-hit)",
+		inlineSize: "var(--track-size)",
+		transform: "none"
+	}
+}, S = {
+	block: {
+		position: "absolute",
+		insetBlockStart: 0,
+		insetBlockEnd: "auto",
+		insetInlineStart: 0,
+		insetInlineEnd: "auto",
+		inlineSize: "100%",
+		blockSize: "var(--thumb-size)",
+		transform: "translateY(var(--thumb-position))"
+	},
+	inline: {
+		position: "absolute",
+		insetBlockStart: 0,
+		insetBlockEnd: "auto",
+		left: 0,
+		right: "auto",
+		blockSize: "100%",
+		inlineSize: "var(--thumb-size)",
+		transform: "translateX(var(--thumb-position))"
+	}
+};
+function C(e, t) {
+	let n = typeof e == "function" ? e(t) : void 0;
+	return e && typeof e != "function" && (e.current = t), () => {
+		typeof n == "function" ? n() : typeof e == "function" ? e(null) : e && (e.current = null);
+	};
+}
+function w({ ref: e, children: n, className: r, sx: i, orientation: l = "vertical", fade: w, scrollbars: T = "auto", hideDelay: E = p, maxBlockSize: D, snap: O, wheelToHorizontal: k = !1, onScroll: A, onEdgeChange: j, slotProps: M, ...N }) {
+	let P = c(null), F = c(null), I = c(/* @__PURE__ */ new WeakSet()), L = c({}), R = c({}), z = c(null), B = a(j), V = M?.viewport?.ref, H = o((e) => {
+		P.current = e;
+		let t = C(V, e);
+		return () => {
+			P.current = null, t();
+		};
+	}, [V]);
+	s(() => {
+		let e = P.current, t = F.current, n = e?.ownerDocument.defaultView, r = e?.parentElement;
+		if (!e || !t || !n || !r) return;
+		let i = 0, a = 0, o, s, c = {
+			block: {
+				length: 0,
+				thumb: 0,
+				offset: 0,
+				maximum: 0
+			},
+			inline: {
+				length: 0,
+				thumb: 0,
+				offset: 0,
+				maximum: 0
+			}
+		}, u = () => n.getComputedStyle(e).direction === "rtl", d = () => {
+			r.setAttribute("data-scrolling", ""), n.clearTimeout(a), a = n.setTimeout(() => r.removeAttribute("data-scrolling"), Number.isFinite(E) ? Math.max(0, E) : p);
+		}, f = () => {
+			n.cancelAnimationFrame(i), i = 0;
+			let t = l === "horizontal" ? 0 : Math.max(0, e.scrollHeight - e.clientHeight), a = l === "vertical" ? 0 : Math.max(0, e.scrollWidth - e.clientWidth), s = Math.max(0, Math.min(a, u() ? a + e.scrollLeft : e.scrollLeft)), d = Math.max(0, Math.min(t, e.scrollTop)), f = {
+				top: d > h,
+				bottom: t - d > h,
+				left: s > h,
+				right: a - s > h
+			};
+			(!o || Object.keys(f).some((e) => f[e] !== o?.[e])) && (o = f, B(f));
+			for (let t of Object.keys(f)) e.style.setProperty(`--fade-${t}`, f[t] ? "var(--scroll-area-fade)" : "0px");
+			let p = parseFloat(n.getComputedStyle(L.current.block).width) || 0, m = parseFloat(n.getComputedStyle(r).getPropertyValue("--scroll-area-min-thumb")) || p;
+			for (let n of ["block", "inline"]) {
+				let r = n === "block", i = r ? e.clientHeight : e.clientWidth, o = r ? t : a, l = Math.max(0, i - ((r ? a : t) > 0 ? p : 0)), u = Math.min(l, Math.max(m, l * i / (i + o || 1))), f = r ? d : s, h = o > 0 ? f / o * (l - u) : 0;
+				c[n] = {
+					length: l,
+					thumb: u,
+					maximum: o,
+					offset: f
+				};
+				let g = L.current[n], _ = R.current[n];
+				g && _ && (g.hidden = o <= 0 || T === "native", g.style.setProperty("--track-size", `${l}px`), _.style.setProperty("--thumb-size", `${u}px`), _.style.setProperty("--thumb-position", `${h}px`));
+			}
+		}, g = () => {
+			i ||= n.requestAnimationFrame(f);
+		}, _ = (t, n, r = "auto") => {
+			let i = Math.max(0, Math.min(c[t].maximum, n));
+			e.scrollTo(t === "block" ? {
+				top: i,
+				behavior: r
+			} : {
+				left: u() ? i - c.inline.maximum : i,
+				behavior: r
+			});
+		}, v = (t) => {
+			if (!s || t && t.pointerId !== s.pointerId) return;
+			let n = s;
+			s = void 0, e.style.scrollSnapType = n.snap, r.removeAttribute("data-dragging"), n.track.hasPointerCapture(n.pointerId) && n.track.releasePointerCapture(n.pointerId), d();
+		};
+		z.current = {
+			end: v,
+			press: (t, i) => {
+				if (i.defaultPrevented || i.button !== 0 || i.isPrimary === !1 || T === "native") return;
+				f();
+				let a = L.current[t], o = R.current[t];
+				if (!a || !o || a.hidden) return;
+				i.preventDefault(), d();
+				let l = t === "block" ? i.clientY : i.clientX;
+				if (o.contains(i.target)) v(), s = {
+					axis: t,
+					pointerId: i.pointerId,
+					start: l,
+					offset: c[t].offset,
+					track: a,
+					snap: e.style.scrollSnapType
+				}, e.style.scrollSnapType = "none", r.setAttribute("data-dragging", ""), a.setPointerCapture(i.pointerId);
+				else {
+					let r = o.getBoundingClientRect(), i = l < (t === "block" ? r.top : r.left) ? -1 : 1;
+					_(t, c[t].offset + i * m * (t === "block" ? e.clientHeight : e.clientWidth), n.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth");
+				}
+			},
+			move: (e) => {
+				if (!s || e.pointerId !== s.pointerId || e.defaultPrevented) return;
+				let t = c[s.axis], n = t.length - t.thumb;
+				n <= 0 || _(s.axis, s.offset + ((s.axis === "block" ? e.clientY : e.clientX) - s.start) / n * t.maximum);
+			}
+		};
+		let y = (t) => {
+			if (I.current.has(t)) {
+				t.preventDefault();
+				return;
+			}
+			if (!k || l !== "horizontal" || !e.contains(t.target) || t.defaultPrevented || t.ctrlKey || t.metaKey || t.deltaX !== 0 || t.deltaY === 0) return;
+			f();
+			let r = parseFloat(n.getComputedStyle(e).lineHeight) || parseFloat(n.getComputedStyle(e).fontSize), i = t.deltaY * ([
+				1,
+				r,
+				e.clientWidth
+			][t.deltaMode] ?? 1) * (u() ? -1 : 1), { offset: a, maximum: o } = c.inline;
+			i < 0 && a <= 0 || i > 0 && a >= o || (t.preventDefault(), _("inline", a + i));
+		}, b = () => {
+			g(), d();
+		}, x = new n.ResizeObserver(g);
+		x.observe(e), x.observe(t);
+		let S = new n.MutationObserver(g);
+		return S.observe(t, {
+			subtree: !0,
+			childList: !0,
+			characterData: !0,
+			attributes: !0
+		}), e.addEventListener("scroll", b), k && l === "horizontal" && e.ownerDocument.addEventListener("wheel", y, { passive: !1 }), g(), () => {
+			v(), x.disconnect(), S.disconnect(), e.removeEventListener("scroll", b), e.ownerDocument.removeEventListener("wheel", y), n.cancelAnimationFrame(i), n.clearTimeout(a), r.removeAttribute("data-scrolling"), z.current = null;
+		};
+	}, [
+		l,
+		T,
+		E,
+		k,
+		B
+	]);
+	let { ref: U, css: W, className: G, style: K, onScroll: q, onWheel: J, onWheelCapture: Y, ...X } = M?.viewport ?? {}, Z = M?.track, Q = M?.thumb, $ = w !== void 0 && Number.isFinite(w) ? { "--scroll-area-fade": `${Math.max(0, w)}px` } : void 0;
+	return /* @__PURE__ */ d(t, {
+		className: r,
+		styles: g,
+		sx: i,
+		children: (t) => /* @__PURE__ */ f("div", {
+			...N,
+			ref: e,
+			"data-ui": "scroll-area",
+			"data-scrollbars": T,
+			className: t,
+			style: {
+				...$,
+				...N.style
+			},
+			onWheel: (e) => {
+				N.onWheel?.(e), e.defaultPrevented && I.current.add(e.nativeEvent);
+			},
+			onWheelCapture: (e) => {
+				N.onWheelCapture?.(e), e.defaultPrevented && I.current.add(e.nativeEvent);
+			},
+			children: [/* @__PURE__ */ d("div", {
+				...X,
+				ref: H,
+				css: [_, W],
+				className: G,
+				"data-ui": "scroll-area-viewport",
+				"data-orientation": l,
+				"data-scrollbars": T,
+				tabIndex: X.tabIndex ?? 0,
+				role: X.role ?? (X["aria-label"] || X["aria-labelledby"] ? "region" : void 0),
+				style: {
+					...K,
+					...D === void 0 ? {} : { maxBlockSize: D },
+					...O === void 0 ? {} : { scrollSnapType: O }
+				},
+				onScroll: (e) => {
+					q?.(e), A?.(e);
+				},
+				onWheel: (e) => {
+					J?.(e), e.defaultPrevented && I.current.add(e.nativeEvent);
+				},
+				onWheelCapture: (e) => {
+					Y?.(e), e.defaultPrevented && I.current.add(e.nativeEvent);
+				},
+				children: /* @__PURE__ */ d("div", {
+					ref: F,
+					css: v,
+					"data-orientation": l,
+					"data-ui": "scroll-area-content",
+					children: n
+				})
+			}), ["block", "inline"].map((e) => /* @__PURE__ */ u("div", {
+				...Z,
+				key: e,
+				ref: (t) => {
+					t && (L.current[e] = t);
+					let n = C(Z?.ref, t);
+					return () => {
+						delete L.current[e], n();
+					};
+				},
+				css: [y, Z?.css],
+				style: {
+					...Z?.style,
+					...x[e]
+				},
+				"data-ui": "scroll-area-track",
+				"data-axis": e,
+				"aria-hidden": "true",
+				tabIndex: void 0,
+				hidden: !0,
+				onPointerDown: (t) => {
+					Z?.onPointerDown?.(t), z.current?.press(e, t);
+				},
+				onPointerMove: (e) => {
+					Z?.onPointerMove?.(e), z.current?.move(e);
+				},
+				onPointerUp: (e) => {
+					Z?.onPointerUp?.(e), z.current?.end(e);
+				},
+				onPointerCancel: (e) => {
+					Z?.onPointerCancel?.(e), z.current?.end(e);
+				},
+				onLostPointerCapture: (e) => {
+					Z?.onLostPointerCapture?.(e), z.current?.end(e);
+				}
+			}, /* @__PURE__ */ d("div", {
+				...Q,
+				ref: (t) => {
+					t && (R.current[e] = t);
+					let n = C(Q?.ref, t);
+					return () => {
+						delete R.current[e], n();
+					};
+				},
+				css: [b, Q?.css],
+				style: {
+					...Q?.style,
+					...S[e]
+				},
+				"data-ui": "scroll-area-thumb",
+				"data-axis": e,
+				"aria-hidden": "true",
+				tabIndex: void 0
+			})))]
+		})
+	});
+}
+w.displayName = "ScrollArea";
+//#endregion
+export { w as t };

package/dist/scroll-area.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ScrollArea } from "./scroll-area-CcZyiSOQ.js";

package/dist/search-field-IxF0IJXm.js

@@ -0,0 +1,274 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./input-control-DmMuAuPS.js";
+import { a as s, n as c, r as ee, t as l } from "./field-anatomy-COVdNpf5.js";
+import { useEffect as u, useRef as d } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as h } from "@floating-ui/react";
+//#region src/components/search-field/search-field.tsx
+var g = e({
+	display: "grid",
+	gap: f.space[1],
+	inlineSize: "100%",
+	minInlineSize: 0
+}), te = e({
+	display: "flex",
+	alignItems: "center",
+	minInlineSize: 0,
+	paddingInline: f.space[2],
+	borderRadius: f.radius.sm,
+	"&[data-disabled]": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&[aria-invalid=\"true\"]:not(:focus-within)": { borderColor: f.color.dangerText },
+	[r]: { borderColor: "CanvasText" }
+}), _ = {
+	sm: e({
+		blockSize: f.space[8],
+		fontSize: f.textSize.sm,
+		"--search-action-size": f.space[6],
+		"--search-control-size": f.space[8]
+	}),
+	md: e({
+		blockSize: f.space[10],
+		fontSize: f.textSize.sm,
+		"--search-action-size": f.space[8],
+		"--search-control-size": f.space[10]
+	}),
+	lg: e({
+		blockSize: f.space[12],
+		fontSize: f.textSize.md,
+		"--search-action-size": f.space[8],
+		"--search-control-size": f.space[12]
+	})
+}, v = e({
+	display: "inline-flex",
+	flexShrink: 0,
+	inlineSize: f.space[4],
+	blockSize: f.space[4],
+	color: f.color.textMuted,
+	"& > svg": {
+		inlineSize: "100%",
+		blockSize: "100%"
+	}
+}), y = e({
+	flex: "1 1 0%",
+	minInlineSize: 0,
+	blockSize: "var(--search-control-size)",
+	margin: 0,
+	paddingInline: f.space[2],
+	border: 0,
+	outline: "none",
+	backgroundColor: "transparent",
+	color: f.color.text,
+	fontFamily: f.font.sans,
+	fontSize: "inherit",
+	lineHeight: f.lineHeight.base,
+	"&::placeholder": { color: f.color.textSubtle },
+	"&:disabled": { cursor: "not-allowed" },
+	"&::-webkit-search-cancel-button, &::-webkit-search-decoration": {
+		appearance: "none",
+		display: "none"
+	},
+	"@media (pointer: coarse)": { fontSize: f.textSize.md }
+}), b = e({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	inlineSize: "var(--search-action-size)",
+	blockSize: "var(--search-action-size)"
+}), x = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	inlineSize: "100%",
+	blockSize: "100%",
+	padding: 0,
+	border: "1px solid transparent",
+	borderRadius: f.radius.sm,
+	color: f.color.textMuted,
+	backgroundColor: "transparent",
+	cursor: "pointer",
+	transitionProperty: "background-color, color, opacity, transform",
+	transitionDuration: f.motion.duration.fast,
+	transitionTimingFunction: f.motion.easeStandard,
+	"&:hover:not(:disabled)": {
+		backgroundColor: f.color.surfaceHover,
+		color: f.color.text
+	},
+	"&:focus-visible": n,
+	"&:disabled": { cursor: "not-allowed" },
+	"&[data-enter]": { "@starting-style": {
+		opacity: 0,
+		transform: "scale(0.9)"
+	} },
+	[i]: {
+		transitionDuration: "0s",
+		transform: "none",
+		"&[data-enter]": { "@starting-style": {
+			opacity: 1,
+			transform: "none"
+		} }
+	},
+	[r]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), S = { clear: "Clear search" }, C = /* @__PURE__ */ m("svg", {
+	"aria-hidden": !0,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	children: [/* @__PURE__ */ p("circle", {
+		cx: "10.5",
+		cy: "10.5",
+		r: "6.5"
+	}), /* @__PURE__ */ p("path", { d: "m16 16 5 5" })]
+}), w = /* @__PURE__ */ p("svg", {
+	"aria-hidden": !0,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	children: /* @__PURE__ */ p("path", { d: "m6 6 12 12M18 6 6 18" })
+});
+function T({ ref: e, value: n, defaultValue: r = "", onValueChange: i, label: f, description: T, error: E, size: ne = "md", clearable: D = !0, messages: O, searchIcon: k = C, clearIcon: A = w, slotProps: j, className: M, sx: N, dir: P, required: F, disabled: I, readOnly: L, onChange: R, onKeyDown: z, id: B, "aria-describedby": V, "aria-invalid": H, ...U }) {
+	let W = s({
+		id: B,
+		description: T,
+		error: E,
+		"aria-describedby": V,
+		"aria-invalid": H
+	}), G = d(null), K = h([G, e]), q = d(r), J = d(!1), [Y = "", X] = a(n, q.current, (e) => {
+		J.current || i?.(e);
+	}), Z = d({
+		value: n,
+		query: Y
+	});
+	Z.current = {
+		value: n,
+		query: Y
+	};
+	let Q = d(!1);
+	u(() => {
+		Q.current = !0;
+	}, []), u(() => {
+		let e = G.current, t = e?.form;
+		if (!t || !e) return;
+		let n = !0, r = (t) => {
+			queueMicrotask(() => {
+				if (!n || t.defaultPrevented) return;
+				let r = Z.current.value === void 0 ? q.current : Z.current.query;
+				e.value = r, J.current = !0;
+				try {
+					X(r);
+				} finally {
+					J.current = !1;
+				}
+			});
+		};
+		return t.addEventListener("reset", r), () => {
+			n = !1, t.removeEventListener("reset", r);
+		};
+	}, [X, U.form]);
+	let $ = () => {
+		X(""), G.current?.focus();
+	}, re = [M, j?.root?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ p(t, {
+		className: re,
+		styles: [g, j?.root?.css],
+		sx: N,
+		children: (e) => /* @__PURE__ */ m("div", {
+			"data-ui": "search-field",
+			dir: P,
+			className: e,
+			children: [
+				/* @__PURE__ */ p(ee, {
+					htmlFor: W.id,
+					required: F,
+					part: j?.label,
+					children: f
+				}),
+				/* @__PURE__ */ m("div", {
+					"aria-invalid": W.ariaInvalid,
+					"data-disabled": I ? "" : void 0,
+					className: j?.shell?.className,
+					css: [
+						o,
+						te,
+						_[ne],
+						j?.shell?.css
+					],
+					children: [
+						/* @__PURE__ */ p("span", {
+							"aria-hidden": !0,
+							className: j?.icon?.className,
+							css: [v, j?.icon?.css],
+							children: k
+						}),
+						/* @__PURE__ */ p("input", {
+							...U,
+							ref: K,
+							type: "search",
+							id: W.id,
+							dir: P,
+							value: Y,
+							required: F,
+							disabled: I,
+							readOnly: L,
+							"aria-describedby": W.describedBy,
+							"aria-invalid": W.ariaInvalid,
+							className: j?.control?.className,
+							css: [y, j?.control?.css],
+							onChange: (e) => {
+								R?.(e), !I && !L && X(e.currentTarget.value);
+							},
+							onKeyDown: (e) => {
+								z?.(e), !(e.defaultPrevented || e.key !== "Escape" || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || Y === "") && (e.preventDefault(), D && !I && !L && $());
+							}
+						}),
+						/* @__PURE__ */ p("span", {
+							className: j?.clearSlot?.className,
+							css: [b, j?.clearSlot?.css],
+							children: D && !L && Y !== "" && /* @__PURE__ */ p("button", {
+								type: "button",
+								disabled: I,
+								"data-enter": Q.current ? "" : void 0,
+								"aria-label": O?.clear ?? S.clear,
+								"aria-controls": W.id,
+								onClick: $,
+								className: j?.clear?.className,
+								css: [x, j?.clear?.css],
+								children: /* @__PURE__ */ p("span", {
+									"aria-hidden": !0,
+									css: v,
+									children: A
+								})
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ p(l, {
+					id: W.descriptionId,
+					part: j?.description,
+					children: T
+				}),
+				/* @__PURE__ */ p(c, {
+					id: W.errorId,
+					part: j?.error,
+					children: E
+				})
+			]
+		})
+	});
+}
+T.displayName = "SearchField";
+//#endregion
+export { T as t };

package/dist/search-field.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as SearchField } from "./search-field-IxF0IJXm.js";