haze-ui 1.26.0 → 1.28.0

package/dist/components/Masonry/Masonry.js

@@ -0,0 +1,29 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { distributeIndices as t } from "./masonry-distribute.js";
+/* empty css                  */
+import { jsx as n } from "react/jsx-runtime";
+import { Children as r, isValidElement as i, useMemo as a } from "react";
+//#region src/lib/components/Masonry/Masonry.tsx
+var o = "haze-Masonry__base", s = "haze-Masonry__column", c = "haze-Masonry__item";
+function l({ columns: l = 3, gap: u = 4, children: d, className: f, ...p }) {
+	let m = a(() => r.toArray(d), [d]), h = Math.max(1, Math.floor(l)), g = a(() => t(m.length, h), [m.length, h]);
+	return /* @__PURE__ */ n("div", {
+		style: { gap: `var(--haze-space-${u})` },
+		...p,
+		className: e([o, f]),
+		children: g.map((t, r) => /* @__PURE__ */ n("div", {
+			className: e([s]),
+			children: t.map((t) => {
+				let r = m[t];
+				return r == null ? null : /* @__PURE__ */ n("div", {
+					className: e([c]),
+					children: r
+				}, i(r) ? r.key : t);
+			})
+		}, r))
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/Masonry/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Masonry.js";
+export { e as Masonry };

package/dist/components/Masonry/masonry-distribute.js

@@ -0,0 +1,15 @@
+"use client";
+//#region src/lib/components/Masonry/masonry-distribute.ts
+function e(e, t, n = () => 1) {
+	let r = Array.from({ length: Math.max(1, t) }, () => ({
+		indices: [],
+		height: 0
+	}));
+	for (let t = 0; t < e; t += 1) {
+		let e = r.reduce((e, t) => t.height < e.height ? t : e);
+		e.indices.push(t), e.height += Math.max(0, n(t));
+	}
+	return r.map((e) => e.indices);
+}
+//#endregion
+export { e as distributeIndices };

package/dist/components/Mentions/Mentions.js

@@ -3,14 +3,15 @@ import e from "./MentionsCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Mentions/Mentions.tsx
-function r({ value: r, onChange: i, ...a }) {
-	let [o, s] = n(r, "");
+function r({ value: r, onChange: i, ref: a, ...o }) {
+	let [s, c] = n(r, "");
 	return /* @__PURE__ */ t(e, {
-		value: o,
+		ref: a,
+		value: s,
 		onChange: (e) => {
-			s(e), i?.(e);
+			c(e), i?.(e);
 		},
-		...a
+		...o
 	});
 }
 //#endregion

package/dist/components/Mentions/MentionsCore.js

@@ -1,14 +1,15 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
-import { useStrings as r } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as t } from "../../utils/refs.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { FloatingPanel as r, useFloating as i } from "../../utils/floating.js";
 /* empty css                       */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
 //#region src/lib/components/Mentions/MentionsCore.tsx
-var u = "haze-MentionsCore__wrapper", d = "haze-MentionsCore__textareaClass", f = "haze-MentionsCore__listbox", p = "haze-MentionsCore__option", m = "haze-MentionsCore__highlightedStyle", h = "haze-MentionsCore__noMatch";
-function g(e, t, n) {
+var f = "haze-MentionsCore__wrapper", p = "haze-MentionsCore__textareaClass", m = "haze-MentionsCore__listbox", h = "haze-MentionsCore__option", g = "haze-MentionsCore__highlightedStyle", _ = "haze-MentionsCore__noMatch";
+function v(e, t, n) {
 	let r = Math.min(t, e.length);
 	for (let t = r - 1; t >= 0; --t) {
 		let i = e[t];
@@ -22,95 +23,95 @@ function g(e, t, n) {
 	}
 	return null;
 }
-function _({ value: _, onChange: v, options: y, trigger: b = "@", placeholder: x, className: S, "aria-label": C, ...w }) {
-	let T = r("mentions"), [E, D] = l(!1), [O, k] = l(null), [A, j] = l(-1), M = s(), N = c(null), P = c(null), F = n({
-		open: E,
-		setOpen: D,
-		triggerRef: N,
-		panelRef: P,
+function y({ value: y, onChange: b, options: x, trigger: S = "@", placeholder: C, className: w, "aria-label": T, ref: E, ...D }) {
+	let O = n("mentions"), [k, A] = d(!1), [j, M] = d(null), [N, P] = d(-1), F = l(), I = u(null), L = s((e) => t(I, E)(e), [I, E]), R = u(null), z = i({
+		open: k,
+		setOpen: A,
+		triggerRef: I,
+		panelRef: R,
 		animated: !0
-	}), I = O ? y.filter((e) => {
-		let t = O.query.toLowerCase();
+	}), B = j ? x.filter((e) => {
+		let t = j.query.toLowerCase();
 		return e.value.toLowerCase().startsWith(t) || (e.label?.toLowerCase().startsWith(t) ?? !1);
-	}) : [], L = (e) => `${M}-option-${e}`, R = E && I[A] ? L(A) : void 0, z = O ? `${O.start}:${O.query}` : "", [B, V] = l(z);
-	z !== B && (V(z), j(-1));
-	let H = c(null);
-	o(() => {
-		let e = H.current;
+	}) : [], V = (e) => `${F}-option-${e}`, H = k && B[N] ? V(N) : void 0, U = j ? `${j.start}:${j.query}` : "", [W, G] = d(U);
+	U !== W && (G(U), P(-1));
+	let K = u(null);
+	c(() => {
+		let e = K.current;
 		if (e === null) return;
-		H.current = null;
-		let t = N.current;
+		K.current = null;
+		let t = I.current;
 		t && (t.focus(), t.setSelectionRange(e, e));
-	}, [_]);
-	let U = (e, t) => {
-		let n = g(e, t, b);
-		k(n), D(n !== null);
-	}, W = (e) => {
-		if (!O) return;
-		let t = N.current?.value ?? _, n = Math.min(O.end, t.length), r = `${b}${e.value} `;
-		v(t.slice(0, O.start) + r + t.slice(n)), H.current = O.start + r.length, k(null), D(!1);
+	}, [y]);
+	let q = (e, t) => {
+		let n = v(e, t, S);
+		M(n), A(n !== null);
+	}, J = (e) => {
+		if (!j) return;
+		let t = I.current?.value ?? y, n = Math.min(j.end, t.length), r = `${S}${e.value} `;
+		b(t.slice(0, j.start) + r + t.slice(n)), K.current = j.start + r.length, M(null), A(!1);
 	};
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("div", {
 		role: "combobox",
-		"aria-expanded": E,
+		"aria-expanded": k,
 		"aria-haspopup": "listbox",
-		"aria-controls": M,
-		"aria-label": C ?? x ?? T.label,
-		className: e([u, S]),
-		children: [/* @__PURE__ */ i("textarea", {
-			ref: N,
-			style: F.triggerStyle,
-			"aria-label": C ?? x ?? T.label,
+		"aria-controls": F,
+		"aria-label": T ?? C ?? O.label,
+		className: e([f, w]),
+		children: [/* @__PURE__ */ a("textarea", {
+			ref: L,
+			style: z.triggerStyle,
+			"aria-label": T ?? C ?? O.label,
 			"aria-autocomplete": "list",
-			"aria-controls": M,
-			"aria-activedescendant": R,
-			className: d,
-			value: _,
-			placeholder: x,
+			"aria-controls": F,
+			"aria-activedescendant": H,
+			className: p,
+			value: y,
+			placeholder: C,
 			onChange: (e) => {
-				v(e.target.value), U(e.target.value, e.target.selectionStart);
+				b(e.target.value), q(e.target.value, e.target.selectionStart);
 			},
 			onSelect: (e) => {
 				let t = e.currentTarget;
-				U(t.value, t.selectionStart);
+				q(t.value, t.selectionStart);
 			},
-			onPointerDown: F.onTriggerPointerDown,
+			onPointerDown: z.onTriggerPointerDown,
 			onKeyDown: (e) => {
-				if (E) {
-					if (e.key === "ArrowDown") e.preventDefault(), j((e) => Math.min(e + 1, I.length - 1));
-					else if (e.key === "ArrowUp") e.preventDefault(), j((e) => Math.max(e - 1, 0));
+				if (k) {
+					if (e.key === "ArrowDown") e.preventDefault(), P((e) => Math.min(e + 1, B.length - 1));
+					else if (e.key === "ArrowUp") e.preventDefault(), P((e) => Math.max(e - 1, 0));
 					else if (e.key === "Enter" || e.key === "Tab") {
-						let t = I[A] ?? I[0];
-						t && (e.preventDefault(), W(t));
-					} else e.key === "Escape" && D(!1);
+						let t = B[N] ?? B[0];
+						t && (e.preventDefault(), J(t));
+					} else e.key === "Escape" && A(!1);
 				}
 			},
-			...w
-		}), /* @__PURE__ */ i(t, {
-			ref: P,
-			behavior: F,
+			...D
+		}), /* @__PURE__ */ a(r, {
+			ref: R,
+			behavior: z,
 			placement: "bottom-span",
-			id: M,
+			id: F,
 			role: "listbox",
-			visualClass: f,
-			children: I.length === 0 ? /* @__PURE__ */ i("div", {
+			visualClass: m,
+			children: B.length === 0 ? /* @__PURE__ */ a("div", {
 				role: "option",
 				"aria-selected": "false",
 				"aria-disabled": "true",
-				className: h,
-				children: T.noMatch
-			}) : I.map((t, n) => /* @__PURE__ */ i("div", {
+				className: _,
+				children: O.noMatch
+			}) : B.map((t, n) => /* @__PURE__ */ a("div", {
 				role: "option",
-				id: L(n),
-				"aria-selected": n === A,
-				"aria-setsize": I.length,
+				id: V(n),
+				"aria-selected": n === N,
+				"aria-setsize": B.length,
 				"aria-posinset": n + 1,
-				onClick: () => W(t),
-				className: e([p, n === A && m]),
+				onClick: () => J(t),
+				className: e([h, n === N && g]),
 				children: t.label ?? t.value
 			}, t.value))
 		})]
 	});
 }
 //#endregion
-export { _ as default };
+export { y as default };

package/dist/components/Menu/Menu.js

@@ -1,8 +1,8 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useFocusScope as t } from "../../utils/focus-scope.js";
-import { FloatingPanel as n, useFloating as r } from "../../utils/floating.js";
+import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import { useFocusScope as r } from "../../utils/focus-scope.js";
 import { useMenuKeyboard as i, useRovingTabindex as a } from "../../utils/menuKeyboard.js";
 /* empty css               */
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -11,7 +11,7 @@ import { useControl as u } from "react-use-control";
 //#region src/lib/components/Menu/Menu.tsx
 var d = "haze-Menu__container", f = "haze-Menu__panel";
 function p({ open: p, trigger: m, className: h, children: g }) {
-	let [_, v] = u(p, !1), y = l(null), b = l(null), x = r({
+	let [_, v] = u(p, !1), y = l(null), b = l(null), x = n({
 		open: _,
 		setOpen: v,
 		triggerRef: y,
@@ -25,7 +25,7 @@ function p({ open: p, trigger: m, className: h, children: g }) {
 	let S = i({
 		menuRef: b,
 		onClose: () => v(!1)
-	}), C = t({
+	}), C = r({
 		enabled: _,
 		autoFocus: !0,
 		returnFocus: !0
@@ -40,7 +40,7 @@ function p({ open: p, trigger: m, className: h, children: g }) {
 			onPointerDown: x.onTriggerPointerDown,
 			onClick: x.onTriggerClick,
 			children: m
-		}), /* @__PURE__ */ o(n, {
+		}), /* @__PURE__ */ o(t, {
 			ref: w,
 			behavior: x,
 			placement: "bottom",

package/dist/components/Menu/MenuSub.js

@@ -0,0 +1,23 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { SubmenuProvider as t, useSubmenu as n } from "../../utils/submenu.js";
+/* empty css                  */
+import { jsx as r } from "react/jsx-runtime";
+//#region src/lib/components/Menu/MenuSub.tsx
+var i = "haze-MenuSub__wrapper";
+function a({ open: a, onOpenChange: o, className: s, children: c }) {
+	let l = n({
+		open: a,
+		onOpenChange: o
+	});
+	return /* @__PURE__ */ r(t, {
+		value: l,
+		children: r("div", {
+			className: e([i, s]),
+			children: c
+		})
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Menu/MenuSubContent.js

@@ -0,0 +1,24 @@
+
+"use client";
+import { FloatingPanel as e } from "../../utils/floating.js";
+import { useSubmenuContext as t } from "../../utils/submenu.js";
+/* empty css                         */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/Menu/MenuSubContent.tsx
+var r = "haze-MenuSubContent__panel";
+function i({ className: i, children: a }) {
+	let o = t();
+	return /* @__PURE__ */ n(e, {
+		ref: o.contentRef,
+		behavior: o.floating,
+		placement: "right",
+		id: o.contentId,
+		role: "menu",
+		visualClass: r,
+		className: i,
+		onKeyDown: o.contentKeyDown,
+		children: a
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Menu/MenuSubTrigger.js

@@ -0,0 +1,30 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useSubmenuContext as t } from "../../utils/submenu.js";
+/* empty css                         */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/Menu/MenuSubTrigger.tsx
+var r = "haze-MenuSubTrigger__trigger";
+function i({ disabled: i = !1, className: a, children: o }) {
+	let s = t();
+	return /* @__PURE__ */ n("button", {
+		ref: s.triggerRef,
+		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
+		"aria-haspopup": "menu",
+		"aria-expanded": s.open,
+		"aria-owns": s.open ? s.contentId : void 0,
+		disabled: i,
+		style: s.floating.triggerStyle,
+		onPointerDown: s.floating.onTriggerPointerDown,
+		onPointerEnter: s.onTriggerPointerEnter,
+		onClick: s.floating.onTriggerClick,
+		onKeyDown: s.handleTriggerKeyDown,
+		className: e([r, a]),
+		children: o
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Menu/index.js

@@ -2,4 +2,7 @@
 import e from "./Menu.js";
 import t from "./MenuItem.js";
 import n from "./MenuDivider.js";
-export { e as Menu, n as MenuDivider, t as MenuItem };
+import r from "./MenuSub.js";
+import i from "./MenuSubTrigger.js";
+import a from "./MenuSubContent.js";
+export { e as Menu, n as MenuDivider, t as MenuItem, r as MenuSub, a as MenuSubContent, i as MenuSubTrigger };

package/dist/components/NumberInput/NumberInput.js

@@ -3,18 +3,19 @@ import e from "./NumberInputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/NumberInput/NumberInput.tsx
-function r({ value: r, min: i, max: a, step: o, size: s, className: c, onChange: l, ...u }) {
-	let [d, f] = n(r, 0);
+function r({ value: r, min: i, max: a, step: o, size: s, className: c, onChange: l, ref: u, ...d }) {
+	let [f, p] = n(r, 0);
 	return /* @__PURE__ */ t(e, {
-		value: d,
-		onChange: f,
+		ref: u,
+		value: f,
+		onChange: p,
 		onNativeChange: l,
 		min: i,
 		max: a,
 		step: o,
 		size: s,
 		className: c,
-		...u
+		...d
 	});
 }
 //#endregion

package/dist/components/NumberInput/NumberInputCore.js

@@ -14,8 +14,8 @@ var i = "haze-NumberInputCore__wrapper", a = "haze-NumberInputCore__input", o =
 	md: d,
 	lg: f
 };
-function h({ value: s, onChange: c, onNativeChange: l, min: u, max: d, step: f = 1, size: h = "md", className: g, ..._ }) {
-	let v = t("numberInput"), y = (e) => {
+function h({ value: s, onChange: c, onNativeChange: l, min: u, max: d, step: f = 1, size: h = "md", className: g, ref: _, ...v }) {
+	let y = t("numberInput"), b = (e) => {
 		let t = Math.round(e * 1e10) / 1e10;
 		return u !== void 0 && t < u ? u : d !== void 0 && t > d ? d : t;
 	};
@@ -24,13 +24,14 @@ function h({ value: s, onChange: c, onNativeChange: l, min: u, max: d, step: f =
 		children: [
 			/* @__PURE__ */ n("button", {
 				type: "button",
-				onClick: () => c(y(s - f)),
+				onClick: () => c(b(s - f)),
 				disabled: u !== void 0 && s <= u,
-				"aria-label": v.decrease,
+				"aria-label": y.decrease,
 				className: e([o, m[h]]),
 				children: "−"
 			}),
 			/* @__PURE__ */ n("input", {
+				ref: _,
 				type: "number",
 				value: s,
 				min: u,
@@ -38,16 +39,16 @@ function h({ value: s, onChange: c, onNativeChange: l, min: u, max: d, step: f =
 				step: f,
 				onChange: (e) => {
 					let t = Number(e.target.value);
-					Number.isNaN(t) || c(y(t)), l?.(e);
+					Number.isNaN(t) || c(b(t)), l?.(e);
 				},
-				..._,
+				...v,
 				className: e([a, p[h]])
 			}),
 			/* @__PURE__ */ n("button", {
 				type: "button",
-				onClick: () => c(y(s + f)),
+				onClick: () => c(b(s + f)),
 				disabled: d !== void 0 && s >= d,
-				"aria-label": v.increase,
+				"aria-label": y.increase,
 				className: e([o, m[h]]),
 				children: "+"
 			})

package/dist/components/OTPInput/OTPInput.js

@@ -3,13 +3,14 @@ import e from "./OTPInputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/OTPInput/OTPInput.tsx
-function r({ length: r, value: i, onChange: a, className: o }) {
-	let [s, c] = n(i, "");
+function r({ length: r, value: i, onChange: a, className: o, ref: s }) {
+	let [c, l] = n(i, "");
 	return /* @__PURE__ */ t(e, {
+		ref: s,
 		length: r,
-		value: s,
+		value: c,
 		onChange: (e) => {
-			c(e), a?.(e);
+			l(e), a?.(e);
 		},
 		className: o
 	});

package/dist/components/OTPInput/OTPInputCore.js

@@ -1,50 +1,51 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { formatString as t } from "../LocaleProvider/locale.js";
-import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as t } from "../../utils/refs.js";
+import { formatString as n } from "../LocaleProvider/locale.js";
+import { useStrings as r } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as r } from "react/jsx-runtime";
-import { useCallback as i, useRef as a } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as a, useRef as o } from "react";
 //#region src/lib/components/OTPInput/OTPInputCore.tsx
-var o = "haze-OTPInputCore__container", s = "haze-OTPInputCore__cell";
-function c({ length: c = 6, value: l, onChange: u, className: d }) {
-	let f = a([]), p = n("otpInput"), m = i((e, t) => {
-		let n = l.split("");
-		n[e] = t.slice(-1), u(n.join("").slice(0, c)), t && e < c - 1 && f.current[e + 1]?.focus();
+var s = "haze-OTPInputCore__container", c = "haze-OTPInputCore__cell";
+function l({ length: l = 6, value: u, onChange: d, className: f, ref: p }) {
+	let m = o([]), h = r("otpInput"), g = a((e) => t(p)(e), [p]), _ = a((e, t) => {
+		let n = u.split("");
+		n[e] = t.slice(-1), d(n.join("").slice(0, l)), t && e < l - 1 && m.current[e + 1]?.focus();
 	}, [
+		u,
 		l,
-		c,
-		u
-	]), h = i((e, t) => {
-		t.key === "Backspace" && !l[e] && e > 0 && f.current[e - 1]?.focus();
-	}, [l]), g = i((e) => {
+		d
+	]), v = a((e, t) => {
+		t.key === "Backspace" && !u[e] && e > 0 && m.current[e - 1]?.focus();
+	}, [u]), y = a((e) => {
 		e.preventDefault();
-		let t = e.clipboardData.getData("text").slice(0, c);
-		u(t);
-		let n = Math.min(t.length, c - 1);
-		f.current[n]?.focus();
-	}, [c, u]);
-	return /* @__PURE__ */ r("div", {
-		className: e([o, d]),
-		children: Array.from({ length: c }, (n, i) => /* @__PURE__ */ r("input", {
+		let t = e.clipboardData.getData("text").slice(0, l);
+		d(t);
+		let n = Math.min(t.length, l - 1);
+		m.current[n]?.focus();
+	}, [l, d]);
+	return /* @__PURE__ */ i("div", {
+		className: e([s, f]),
+		children: Array.from({ length: l }, (t, r) => /* @__PURE__ */ i("input", {
 			ref: (e) => {
-				f.current[i] = e;
+				m.current[r] = e, r === 0 && g(e);
 			},
 			type: "text",
 			inputMode: "numeric",
 			maxLength: 1,
-			"aria-label": t(p.digitLabel, {
-				index: i + 1,
-				total: c
+			"aria-label": n(h.digitLabel, {
+				index: r + 1,
+				total: l
 			}),
-			value: l[i] ?? "",
-			onChange: (e) => m(i, e.target.value),
-			onKeyDown: (e) => h(i, e),
-			onPaste: g,
-			className: e([s])
-		}, i))
+			value: u[r] ?? "",
+			onChange: (e) => _(r, e.target.value),
+			onKeyDown: (e) => v(r, e),
+			onPaste: y,
+			className: e([c])
+		}, r))
 	});
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/PasswordInput/PasswordInput.js

@@ -3,12 +3,13 @@ import e from "./PasswordInputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/PasswordInput/PasswordInput.tsx
-function r({ value: r, onChange: i, placeholder: a, disabled: o, className: s }) {
-	let [c, l] = n(r, "");
+function r({ value: r, onChange: i, placeholder: a, disabled: o, className: s, ref: c }) {
+	let [l, u] = n(r, "");
 	return /* @__PURE__ */ t(e, {
-		value: c,
+		ref: c,
+		value: l,
 		onChange: (e) => {
-			l(e), i?.(e);
+			u(e), i?.(e);
 		},
 		placeholder: a,
 		disabled: o,

package/dist/components/PasswordInput/PasswordInputCore.js

@@ -7,13 +7,14 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { useState as i } from "react";
 //#region src/lib/components/PasswordInput/PasswordInputCore.tsx
 var a = "haze-PasswordInputCore__wrapper", o = "haze-PasswordInputCore__input", s = "haze-PasswordInputCore__toggle";
-function c({ value: c, onChange: l, placeholder: u, disabled: d, className: f }) {
-	let [p, m] = i(!1), h = t("passwordInput");
+function c({ value: c, onChange: l, placeholder: u, disabled: d, className: f, ref: p }) {
+	let [m, h] = i(!1), g = t("passwordInput");
 	return /* @__PURE__ */ r("div", {
 		className: e([a, f]),
 		children: [/* @__PURE__ */ n("input", {
-			type: p ? "text" : "password",
-			"aria-label": h.label,
+			ref: p,
+			type: m ? "text" : "password",
+			"aria-label": g.label,
 			value: c,
 			onChange: (e) => l(e.target.value),
 			placeholder: u,
@@ -21,11 +22,11 @@ function c({ value: c, onChange: l, placeholder: u, disabled: d, className: f })
 			className: e([o])
 		}), /* @__PURE__ */ n("button", {
 			type: "button",
-			onClick: () => m(!p),
+			onClick: () => h(!m),
 			tabIndex: -1,
-			"aria-label": p ? h.hide : h.show,
+			"aria-label": m ? g.hide : g.show,
 			className: e([s]),
-			children: p ? "🙈" : "👁"
+			children: m ? "🙈" : "👁"
 		})]
 	});
 }