haze-ui 1.30.0 → 1.32.0

package/dist/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,25 @@
+"use client";
+import e from "../Datepicker/Datepicker.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/DateTimePicker/DateTimePicker.tsx
+function n({ value: n, open: r, min: i, max: a, disabledDate: o, presets: s, showSeconds: c = !1, locale: l, weekStartsOn: u, cellRender: d, placeholder: f, className: p, ref: m }) {
+	return /* @__PURE__ */ t(e, {
+		ref: m,
+		value: n,
+		open: r,
+		picker: "date",
+		min: i,
+		max: a,
+		disabledDate: o,
+		presets: s,
+		showTime: !c || { seconds: !0 },
+		locale: l,
+		weekStartsOn: u,
+		cellRender: d,
+		placeholder: f,
+		className: p,
+		"data-slot": "datetime-picker"
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/DateTimePicker/index.js

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

package/dist/components/Datepicker/Datepicker.js

@@ -3,14 +3,14 @@ import e from "./DatepickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Datepicker/Datepicker.tsx
-function r({ value: r, open: i, picker: a, min: o, max: s, disabledDate: c, presets: l, showTime: u, format: d, parse: f, locale: p, weekStartsOn: m, cellRender: h, placeholder: g, className: _, ref: v }) {
-	let [y, b] = n(r, ""), [x, S] = n(i, !1);
+function r({ value: r, open: i, picker: a, min: o, max: s, disabledDate: c, presets: l, showTime: u, format: d, parse: f, locale: p, weekStartsOn: m, cellRender: h, placeholder: g, className: _, ref: v, ...y }) {
+	let [b, x] = n(r, ""), [S, C] = n(i, !1);
 	return /* @__PURE__ */ t(e, {
 		ref: v,
-		value: y,
-		onChange: b,
-		open: x,
-		onOpenChange: S,
+		value: b,
+		onChange: x,
+		open: S,
+		onOpenChange: C,
 		picker: a,
 		min: o,
 		max: s,
@@ -23,7 +23,8 @@ function r({ value: r, open: i, picker: a, min: o, max: s, disabledDate: c, pres
 		weekStartsOn: m,
 		cellRender: h,
 		placeholder: g,
-		className: _
+		className: _,
+		...y
 	});
 }
 //#endregion

package/dist/components/Datepicker/DatepickerCore.js

@@ -1,98 +1,99 @@
 
 "use client";
-import { formatDate as e, formatWeekValue as t, getISOWeek as n, getISOWeekStartDate as r, parseCivilDate as ee, parseWeekValue as i } from "../Calendar/date.js";
-import { classnames as a } from "../../utils/classnames.js";
-import { mergeRefs as o } from "../../utils/refs.js";
-import { useStrings as te } from "../LocaleProvider/useStrings.js";
-import { FloatingPanel as ne, useFloating as re } from "../../utils/floating.js";
+import { formatDate as e, formatWeekValue as t, getISOWeek as n, getISOWeekStartDate as ee, parseCivilDate as te, parseWeekValue as r } from "../Calendar/date.js";
+import { classnames as i } from "../../utils/classnames.js";
+import { useStrings as a } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as ne } from "../../utils/refs.js";
+import { FloatingPanel as re, useFloating as o } from "../../utils/floating.js";
 import s from "../Calendar/Calendar.js";
-import { applyTimeToCivilDate as c, formatDateTimeValue as l, normalizeTime as ie, splitDateTimeValue as ae, timeOf as oe } from "./datetime.js";
+import { applyTimeToCivilDate as ie, formatDateTimeValue as ae, normalizeTime as oe, splitDateTimeValue as se, timeOf as ce } from "./datetime.js";
 /* empty css                         */
-import { useCallback as u, useId as se, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useCallback as c, useId as le, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/lib/components/Datepicker/DatepickerCore.tsx
-var h = "haze-DatepickerCore__wrapper", g = "haze-DatepickerCore__input", ce = "haze-DatepickerCore__dropdown", le = "haze-DatepickerCore__presetList", _ = "haze-DatepickerCore__presetRow", v = "haze-DatepickerCore__timeRow", y = "haze-DatepickerCore__timeLabel", b = "haze-DatepickerCore__timeInput";
-function x({ value: x, onChange: S, open: C, onOpenChange: w, picker: T, min: E, max: D, disabledDate: O, presets: k, showTime: A, format: j, parse: M, locale: N, weekStartsOn: P, cellRender: F, placeholder: I = "Select date", className: L, ref: R }) {
-	let z = te("datepicker"), B = d(null), ue = u((e) => o(B, R)(e), [B, R]), V = d(null), H = se(), U = (A === !0 || typeof A == "object") && (T ?? "date") === "date", W = U && typeof A == "object" && A.seconds === !0, G = j !== void 0 || M !== void 0, K = M && x !== "" ? M(x) : null, [de, fe] = f(() => W ? "00:00:00" : "00:00"), q = U && !G ? ae(x) : null, J = K && T === "week" ? n(K.getFullYear(), K.getMonth(), K.getDate()) : null, Y = G ? J ? t(J.year, J.week) : K ? e(K.getFullYear(), K.getMonth(), K.getDate()) : "" : U ? q?.date ?? "" : x, X = G ? U && K ? oe(K, W) : null : q?.time ?? null, Z = X === null ? de : ie(X, W), Q = (e, t) => {
-		if (G && j) {
-			let n = T === "week" ? i(e) : null, a = n ? r(n.year, n.week) : null, o = a && new Date(a.year, a.month, a.day) || ee(e);
-			return o ? j(t === void 0 ? o : c(o, t)) : t === void 0 ? e : `${e} ${t}`;
+var p = "haze-DatepickerCore__wrapper", m = "haze-DatepickerCore__input", h = "haze-DatepickerCore__dropdown", ue = "haze-DatepickerCore__presetList", g = "haze-DatepickerCore__presetRow", _ = "haze-DatepickerCore__timeRow", de = "haze-DatepickerCore__timeLabel", fe = "haze-DatepickerCore__timeInput";
+function v({ value: v, onChange: y, open: b, onOpenChange: x, picker: S, min: C, max: w, disabledDate: T, presets: E, showTime: D, format: O, parse: k, locale: A, weekStartsOn: j, cellRender: M, placeholder: N = "Select date", className: P, ref: F, ...I }) {
+	let L = a("datepicker"), R = l(null), z = c((e) => ne(R, F)(e), [R, F]), B = l(null), V = le(), H = (D === !0 || typeof D == "object") && (S ?? "date") === "date", U = H && typeof D == "object" && D.seconds === !0, W = O !== void 0 || k !== void 0, G = k && v !== "" ? k(v) : null, [pe, K] = u(() => U ? "00:00:00" : "00:00"), q = H && !W ? se(v) : null, J = G && S === "week" ? n(G.getFullYear(), G.getMonth(), G.getDate()) : null, Y = W ? J ? t(J.year, J.week) : G ? e(G.getFullYear(), G.getMonth(), G.getDate()) : "" : H ? q?.date ?? "" : v, X = W ? H && G ? ce(G, U) : null : q?.time ?? null, Z = X === null ? pe : oe(X, U), Q = (e, t) => {
+		if (W && O) {
+			let n = S === "week" ? r(e) : null, i = n ? ee(n.year, n.week) : null, a = i && new Date(i.year, i.month, i.day) || te(e);
+			return a ? O(t === void 0 ? a : ie(a, t)) : t === void 0 ? e : `${e} ${t}`;
 		}
-		return t === void 0 ? e : l(e, t);
-	}, pe = u((e) => w(typeof e == "function" ? e(C) : e), [w, C]), $ = re({
-		open: C,
-		setOpen: pe,
-		triggerRef: B,
-		panelRef: V,
+		return t === void 0 ? e : ae(e, t);
+	}, me = c((e) => x(typeof e == "function" ? e(b) : e), [x, b]), $ = o({
+		open: b,
+		setOpen: me,
+		triggerRef: R,
+		panelRef: B,
 		animated: !0
 	});
-	return /* @__PURE__ */ m("div", {
-		className: a([h, L]),
-		children: [/* @__PURE__ */ p("input", {
-			ref: ue,
+	return /* @__PURE__ */ f("div", {
+		...I,
+		className: i([p, P]),
+		children: [/* @__PURE__ */ d("input", {
+			ref: z,
 			"data-slot": "input",
 			readOnly: !0,
 			style: $.triggerStyle,
-			className: g,
-			value: x,
-			placeholder: I,
+			className: m,
+			value: v,
+			placeholder: N,
 			role: "combobox",
 			"aria-haspopup": "dialog",
-			"aria-expanded": C,
-			"aria-controls": H,
+			"aria-expanded": b,
+			"aria-controls": V,
 			onPointerDown: $.onTriggerPointerDown,
 			onClick: $.onTriggerClick
-		}), /* @__PURE__ */ m(ne, {
-			ref: V,
+		}), /* @__PURE__ */ f(re, {
+			ref: B,
 			behavior: $,
 			placement: "bottom",
-			visualClass: ce,
-			id: H,
+			visualClass: h,
+			id: V,
 			children: [
-				k && k.length > 0 && /* @__PURE__ */ p("div", {
+				E && E.length > 0 && /* @__PURE__ */ d("div", {
 					"data-slot": "presets",
-					className: a([le]),
-					children: k.map((e) => /* @__PURE__ */ p("button", {
+					className: i([ue]),
+					children: E.map((e) => /* @__PURE__ */ d("button", {
 						"data-slot": "preset",
 						type: "button",
 						onClick: () => {
-							S(e.value), w(!1);
+							y(e.value), x(!1);
 						},
-						className: a([_]),
+						className: i([g]),
 						children: e.label
 					}, `${e.label}:${e.value}`))
 				}),
-				/* @__PURE__ */ p(s, {
-					picker: T,
+				/* @__PURE__ */ d(s, {
+					picker: S,
 					value: Y,
-					min: E,
-					max: D,
-					disabledDate: O,
-					locale: N,
-					weekStartsOn: P,
-					cellRender: F,
+					min: C,
+					max: w,
+					disabledDate: T,
+					locale: A,
+					weekStartsOn: j,
+					cellRender: M,
 					onSelect: (e) => {
-						U ? S(Q(e, Z)) : (S(Q(e)), w(!1));
+						H ? y(Q(e, Z)) : (y(Q(e)), x(!1));
 					}
 				}),
-				U && /* @__PURE__ */ m("div", {
+				H && /* @__PURE__ */ f("div", {
 					"data-slot": "footer",
-					className: a([v]),
-					children: [/* @__PURE__ */ p("span", {
+					className: i([_]),
+					children: [/* @__PURE__ */ d("span", {
 						"data-slot": "label",
-						className: a([y]),
-						children: z.time
-					}), /* @__PURE__ */ p("input", {
+						className: i([de]),
+						children: L.time
+					}), /* @__PURE__ */ d("input", {
 						"data-slot": "time-input",
 						type: "time",
-						step: W ? 1 : void 0,
-						"aria-label": z.time,
+						step: U ? 1 : void 0,
+						"aria-label": L.time,
 						value: Z,
 						onChange: (e) => {
-							let t = e.target.value || (W ? "00:00:00" : "00:00");
-							fe(t), Y && S(Q(Y, t));
+							let t = e.target.value || (U ? "00:00:00" : "00:00");
+							K(t), Y && y(Q(Y, t));
 						},
-						className: a([b])
+						className: i([fe])
 					})]
 				})
 			]
@@ -100,4 +101,4 @@ function x({ value: x, onChange: S, open: C, onOpenChange: w, picker: T, min: E,
 	});
 }
 //#endregion
-export { x as default };
+export { v as default };

package/dist/components/Drawer/Drawer.js

@@ -1,77 +1,82 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { whenExitSettles as t } from "../../utils/presence.js";
-import { useFocusScope as n } from "../../utils/focus-scope.js";
-import { useViewTransitionFlip as r } from "../../utils/view-transition.js";
+import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
+import { whenExitSettles as n } from "../../utils/presence.js";
+import { useFocusScope as r } from "../../utils/focus-scope.js";
+import { useViewTransitionFlip as i } from "../../utils/view-transition.js";
 /* empty css                 */
-import { useCallback as i, useEffect as a, useImperativeHandle as o, useRef as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-import { useControl as l } from "react-use-control";
+import { useCallback as a, useEffect as o, useImperativeHandle as s, useRef as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { useControl as u } from "react-use-control";
 //#region src/lib/components/Drawer/Drawer.tsx
-var u = "haze-Drawer__overlay", d = {
+var d = "haze-Drawer__overlay", f = {
 	left: "haze-Drawer__left",
 	right: "haze-Drawer__right",
 	top: "haze-Drawer__top",
 	bottom: "haze-Drawer__bottom"
 };
-function f({ open: f, placement: p = "right", onClose: m, viewTransition: h = !1, className: g, children: _, ref: v }) {
-	let [y, b] = l(f, !1), x = r(h, b), S = s(null);
-	a(() => {
-		if (!y) return;
+function p({ open: p, placement: m = "right", onClose: h, viewTransition: g = !1, className: _, classNames: v, children: y, ref: b }) {
+	let [x, S] = u(p, !1), C = t("Drawer"), w = C.classNames ? {
+		...C.classNames,
+		...v
+	} : v, T = i(g, S), E = c(null);
+	o(() => {
+		if (!x) return;
 		let e = document.activeElement;
-		S.current = e instanceof HTMLElement ? e : null;
-	}, [y]);
-	let C = s(null), w = n({
-		enabled: y,
+		E.current = e instanceof HTMLElement ? e : null;
+	}, [x]);
+	let D = c(null), O = r({
+		enabled: x,
 		trapped: !1
 	});
-	o(v, () => ({
+	s(b, () => ({
 		open: () => {
-			x(!0);
+			T(!0);
 		},
 		close: () => {
-			x(!1);
+			T(!1);
 		},
 		focusTrigger: () => {
-			let e = S.current;
+			let e = E.current;
 			e?.isConnected && e.focus();
 		}
-	}), [x]);
-	let T = i((e) => {
-		C.current = e, w(e);
-	}, [w]);
-	return a(() => {
-		let e = C.current;
+	}), [T]);
+	let k = a((e) => {
+		D.current = e, O(e);
+	}, [O]);
+	return o(() => {
+		let e = D.current;
 		if (e) {
-			if (y && !e.open) e.showModal();
-			else if (!y && e.open) {
-				let n = t(e), r = () => {
+			if (x && !e.open) e.showModal();
+			else if (!x && e.open) {
+				let t = n(e), r = () => {
 					e.getAttribute("data-state") === "closed" && e.close();
 				};
-				n ? n.then(r) : r();
+				t ? t.then(r) : r();
 			}
 		}
-	}, [y]), /* @__PURE__ */ c("dialog", {
-		ref: T,
+	}, [x]), /* @__PURE__ */ l("dialog", {
+		ref: k,
 		"data-slot": "content",
-		"data-state": y ? "open" : "closed",
+		"data-state": x ? "open" : "closed",
 		onClose: () => {
-			b(!1), m?.();
+			S(!1), h?.();
 		},
 		onCancel: (e) => {
-			e.preventDefault(), x(!1);
+			e.preventDefault(), T(!1);
 		},
 		onClick: (e) => {
-			e.target === C.current && x(!1);
+			e.target === D.current && T(!1);
 		},
 		className: e([
-			u,
-			d[p],
-			g
+			d,
+			f[m],
+			_,
+			w?.content
 		]),
-		children: _
+		children: y
 	});
 }
 //#endregion
-export { f as default };
+export { p as default };

package/dist/components/Fieldset/Fieldset.js

@@ -0,0 +1,25 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                   */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/Fieldset/Fieldset.tsx
+var r = "haze-Fieldset__fieldset", i = "haze-Fieldset__legend", a = "haze-Fieldset__body";
+function o({ legend: o, disabled: s, className: c, children: l, ...u }) {
+	return /* @__PURE__ */ n("fieldset", {
+		"data-slot": "fieldset",
+		disabled: s,
+		...u,
+		className: e([r, c]),
+		children: [o != null && /* @__PURE__ */ t("legend", {
+			"data-slot": "legend",
+			className: e([i]),
+			children: o
+		}), /* @__PURE__ */ t("div", {
+			"data-slot": "content",
+			className: e([a]),
+			children: l
+		})]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Fieldset/index.js

@@ -0,0 +1,2 @@
+import e from "./Fieldset.js";
+export { e as Fieldset };

package/dist/components/Highlight/Highlight.js

@@ -0,0 +1,19 @@
+import e from "../Mark/Mark.js";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/Highlight/Highlight.tsx
+var r = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function i({ children: i, highlight: a, caseSensitive: o = !1, color: s, ...c }) {
+	let l = (Array.isArray(a) ? a : [a]).filter((e) => e.length > 0).sort((e, t) => t.length - e.length);
+	if (l.length === 0) return /* @__PURE__ */ n(t, { children: i });
+	let u = RegExp(`(${l.map(r).join("|")})`, o ? "g" : "gi"), d = i.split(u), f = (e) => e % 2 == 1, p = [];
+	return d.forEach((t, r) => {
+		t !== "" && (f(r) ? p.push(/* @__PURE__ */ n(e, {
+			"data-slot": "highlight",
+			color: s,
+			...c,
+			children: t
+		}, `${r}-${t}`)) : p.push(t));
+	}), /* @__PURE__ */ n(t, { children: p });
+}
+//#endregion
+export { i as default };

package/dist/components/Highlight/index.js

@@ -0,0 +1,2 @@
+import e from "./Highlight.js";
+export { e as Highlight };

package/dist/components/Indicator/Indicator.js

@@ -0,0 +1,37 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                    */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/Indicator/Indicator.tsx
+var r = "haze-Indicator__host", i = "haze-Indicator__badge", a = "haze-Indicator__dot", o = {
+	"top-start": "haze-Indicator__top-start",
+	"top-end": "haze-Indicator__top-end",
+	"bottom-start": "haze-Indicator__bottom-start",
+	"bottom-end": "haze-Indicator__bottom-end"
+}, s = {
+	primary: "haze-Indicator__primary",
+	danger: "haze-Indicator__danger",
+	success: "haze-Indicator__success",
+	warning: "haze-Indicator__warning"
+};
+function c({ label: c, showZero: l = !1, color: u = "danger", position: d = "top-end", className: f, children: p, ...m }) {
+	let h = c == null || c === !1 || c === "", g = !h && !l && c === 0;
+	return /* @__PURE__ */ n("span", {
+		"data-slot": "indicator",
+		...m,
+		className: e([r, f]),
+		children: [p, !g && /* @__PURE__ */ t("span", {
+			"data-slot": h ? "dot" : "badge",
+			"aria-hidden": "true",
+			className: e([
+				i,
+				h && a,
+				s[u],
+				o[d]
+			]),
+			children: h ? "" : c
+		})]
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/Indicator/index.js

@@ -0,0 +1,2 @@
+import e from "./Indicator.js";
+export { e as Indicator };

package/dist/components/InlineCompletion/InlineCompletion.js

@@ -1,8 +1,8 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as n } from "../../utils/refs.js";
 /* empty css                           */
 import { useEffect as r, useId as i, useRef as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -10,12 +10,12 @@ import { useControl as l } from "react-use-control";
 //#region src/lib/components/InlineCompletion/InlineCompletion.tsx
 var u = "haze-InlineCompletion__wrapper", d = "haze-InlineCompletion__host", f = "haze-InlineCompletion__ghost", p = "haze-InlineCompletion__ghostMultiline", m = "haze-InlineCompletion__ghostTyped", h = "haze-InlineCompletion__srOnly";
 function g({ suggestion: g, value: _, onAccept: v, onDismiss: y, multiline: b = !1, placeholder: x, disabled: S, hint: C, rows: w, className: T, ref: E, onChange: D, onFocus: O, onBlur: k, onKeyDown: A, "aria-describedby": j, ...M }) {
-	let N = n("inlineCompletion"), P = C ?? N.hint, [F, I] = l(_, ""), [L, R] = o(!1), [z, B] = o(!1), V = a(null), H = a(null), U = i(), W = a(g);
+	let N = t("inlineCompletion"), P = C ?? N.hint, [F, I] = l(_, ""), [L, R] = o(!1), [z, B] = o(!1), V = a(null), H = a(null), U = i(), W = a(g);
 	r(() => {
 		W.current !== g && (W.current = g, B(!1));
 	}, [g]);
 	let G = g !== void 0 && g !== "" && !z && L, K = G ? [j, U].filter(Boolean).join(" ") : j, q = {
-		ref: t(H, E),
+		ref: n(H, E),
 		value: F,
 		onChange: (e) => {
 			I(e.target.value), D?.(e);

package/dist/components/Input/Input.js

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

package/dist/components/Input/InputCore.js

@@ -2,28 +2,47 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/lib/components/Input/InputCore.tsx
-var n = "haze-InputCore__base", r = {
+var r = "haze-InputCore__base", i = {
 	sm: "haze-InputCore__sm",
 	md: "haze-InputCore__md",
 	lg: "haze-InputCore__lg"
-};
-function i({ value: i, onChange: a, onNativeChange: o, size: s = "md", className: c, ref: l, ...u }) {
-	return /* @__PURE__ */ t("input", {
-		ref: l,
+}, a = "haze-InputCore__wrapper", o = "haze-InputCore__section", s = "haze-InputCore__sectionStart", c = "haze-InputCore__sectionEnd", l = "haze-InputCore__padStart", u = "haze-InputCore__padEnd";
+function d({ value: d, onChange: f, onNativeChange: p, size: m = "md", className: h, leftSection: g, rightSection: _, ref: v, ...y }) {
+	let b = /* @__PURE__ */ t("input", {
+		ref: v,
 		"data-slot": "input",
-		value: i,
+		value: d,
 		onChange: (e) => {
-			a(e.target.value), o?.(e);
+			f(e.target.value), p?.(e);
 		},
-		...u,
+		...y,
 		className: e([
-			n,
-			r[s],
-			c
+			r,
+			i[m],
+			g !== void 0 && l,
+			_ !== void 0 && u,
+			h
 		])
 	});
+	return g === void 0 && _ === void 0 ? b : /* @__PURE__ */ n("span", {
+		"data-slot": "field",
+		className: e([a]),
+		children: [
+			g !== void 0 && /* @__PURE__ */ t("span", {
+				"data-slot": "left-section",
+				className: e([o, s]),
+				children: g
+			}),
+			b,
+			_ !== void 0 && /* @__PURE__ */ t("span", {
+				"data-slot": "right-section",
+				className: e([o, c]),
+				children: _
+			})
+		]
+	});
 }
 //#endregion
-export { i as default };
+export { d as default };

package/dist/components/List/List.js

@@ -2,23 +2,27 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/lib/components/List/List.tsx
-var n = "haze-List__base", r = {
+var r = "haze-List__base", i = {
 	unordered: "haze-List__unordered",
 	ordered: "haze-List__ordered",
 	none: "haze-List__none"
-};
-function i({ variant: i = "unordered", className: a, children: o }) {
-	return /* @__PURE__ */ t(i === "ordered" ? "ol" : "ul", {
+}, a = "haze-List__loadMoreSlot";
+function o({ variant: o = "unordered", className: s, children: c, loadMore: l }) {
+	return /* @__PURE__ */ n(o === "ordered" ? "ol" : "ul", {
 		"data-slot": "list",
 		className: e([
-			n,
-			r[i],
-			a
+			r,
+			i[o],
+			s
 		]),
-		children: o
+		children: [c, l && /* @__PURE__ */ t("li", {
+			"data-slot": "load-more",
+			className: e([a]),
+			children: l
+		})]
 	});
 }
 //#endregion
-export { i as default };
+export { o as default };

package/dist/components/LoadingOverlay/LoadingOverlay.js

@@ -0,0 +1,30 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import t from "../Spinner/Spinner.js";
+/* empty css                         */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/lib/components/LoadingOverlay/LoadingOverlay.tsx
+var i = "haze-LoadingOverlay__wrapper", a = "haze-LoadingOverlay__veil", o = "haze-LoadingOverlay__veilLabel", s = "haze-LoadingOverlay__dimmed";
+function c({ visible: c = !1, label: l, loader: u, spinnerSize: d = "md", className: f, children: p, ...m }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "loading-overlay",
+		"aria-busy": c || void 0,
+		...m,
+		className: e([i, f]),
+		children: [/* @__PURE__ */ n("div", {
+			"data-slot": "content",
+			className: e([c && s]),
+			children: p
+		}), c && /* @__PURE__ */ r("div", {
+			"data-slot": "veil",
+			className: e([a]),
+			children: [u ?? /* @__PURE__ */ n(t, { size: d }), l != null && /* @__PURE__ */ n("span", {
+				className: e([o]),
+				children: l
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/LoadingOverlay/index.js

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