haze-ui 1.31.0 → 1.33.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/HoverCard/HoverCard.js

@@ -2,56 +2,76 @@
 "use client";
 import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
 import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import { getTabbables as r } from "../../utils/focus.js";
 /* empty css                    */
-import { useEffect as r, useId as i, useMemo as a, useRef as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useControl as l } from "react-use-control";
+import { useEffect as i, useId as a, useMemo as o, useRef as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useControl as u } from "react-use-control";
 //#region src/lib/components/HoverCard/HoverCard.tsx
-var u = "haze-HoverCard__container", d = "haze-HoverCard__panelVisuals";
-function f({ content: f, openDelay: p, closeDelay: m, placement: h = "bottom-span", open: g, collisionPadding: _, className: v, children: y }) {
-	let b = e("HoverCard"), x = p ?? b.openDelay ?? 200, S = m ?? b.closeDelay ?? 120, [C, w] = l(g, !1), T = i(), E = o(null), D = o(null), O = a(() => _ === void 0 ? void 0 : { collisionPadding: _ }, [_]), k = n({
-		open: C,
-		setOpen: w,
-		triggerRef: E,
-		panelRef: D,
+var d = "haze-HoverCard__container", f = "haze-HoverCard__panelVisuals", p = 200, m = 120, h = 300;
+function g({ content: g, openDelay: _, closeDelay: v, interactive: y = !1, placement: b = "bottom-span", open: x, collisionPadding: S, className: C, children: w }) {
+	let T = e("HoverCard"), E = _ ?? T.openDelay ?? p, D = v ?? T.closeDelay ?? (y ? h : m), [O, k] = u(x, !1), A = a(), j = s(null), M = s(null), N = o(() => S === void 0 ? void 0 : { collisionPadding: S }, [S]), P = n({
+		open: O,
+		setOpen: k,
+		triggerRef: j,
+		panelRef: M,
 		animated: !0,
-		collision: O
-	}), A = o(0), j = o(0);
-	r(() => () => {
-		window.clearTimeout(A.current), window.clearTimeout(j.current);
+		collision: N
+	}), F = s(0), I = s(0);
+	i(() => () => {
+		window.clearTimeout(F.current), window.clearTimeout(I.current);
 	}, []);
-	let M = () => {
-		window.clearTimeout(A.current), window.clearTimeout(j.current);
-	}, N = () => {
-		M(), !C && (A.current = window.setTimeout(() => w(!0), x));
-	}, P = () => {
-		M(), C && (j.current = window.setTimeout(() => w(!1), S));
-	};
-	return /* @__PURE__ */ c("span", {
+	let L = () => {
+		window.clearTimeout(F.current), window.clearTimeout(I.current);
+	}, R = () => {
+		L(), !O && (F.current = window.setTimeout(() => k(!0), E));
+	}, z = () => {
+		L(), O && (I.current = window.setTimeout(() => k(!1), D));
+	}, B = () => {
+		y && M.current !== null && document.activeElement instanceof Node && M.current.contains(document.activeElement) || z();
+	}, V = (e) => {
+		let t = e.relatedTarget;
+		if (t instanceof Node && e.currentTarget.contains(t)) {
+			L();
+			return;
+		}
+		z();
+	}, H = s(!1);
+	return i(() => {
+		let e = H.current;
+		if (H.current = O, !y || !e || O) return;
+		let t = M.current, n = document.activeElement;
+		if (!t || !(n instanceof Node) || !t.contains(n)) return;
+		let i = j.current;
+		if (!i) return;
+		let a = r(i)[0] ?? i;
+		a === i && i.getAttribute("tabindex") === null && (i.tabIndex = -1), a.focus();
+	}, [O, y]), /* @__PURE__ */ l("span", {
 		"data-slot": "hover-card",
-		className: u,
-		children: [/* @__PURE__ */ s("span", {
-			ref: E,
+		className: d,
+		onBlur: y ? V : void 0,
+		children: [/* @__PURE__ */ c("span", {
+			ref: j,
 			"data-slot": "trigger",
-			style: k.triggerStyle,
-			"aria-describedby": T,
-			onMouseEnter: N,
-			onMouseLeave: P,
-			onFocus: N,
-			onBlur: P,
-			children: y
-		}), /* @__PURE__ */ s(t, {
-			ref: D,
-			behavior: k,
-			placement: h,
-			id: T,
-			visualClass: d,
-			className: v,
-			onMouseEnter: M,
-			onMouseLeave: P,
-			children: f
+			style: P.triggerStyle,
+			"aria-describedby": A,
+			onMouseEnter: R,
+			onMouseLeave: y ? B : z,
+			onFocus: R,
+			onBlur: y ? void 0 : z,
+			children: w
+		}), /* @__PURE__ */ c(t, {
+			ref: M,
+			behavior: P,
+			placement: b,
+			id: A,
+			visualClass: f,
+			className: C,
+			onMouseEnter: L,
+			onMouseLeave: y ? B : z,
+			children: g
 		})]
 	});
 }
 //#endregion
-export { f as default };
+export { g as default };