haze-ui 1.29.0 → 1.30.0

package/dist/components/Command/Command.js

@@ -7,39 +7,40 @@ import { getEnabledMenuItems as r, useMenuKeyboard as i, useRovingTabindex as a
 import o from "../Kbd/Kbd.js";
 import { collectCommandItems as s, commandItemMatches as c } from "./command-filter.js";
 /* empty css                  */
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Children as d, createContext as f, useContext as p, useId as m, useMemo as h, useRef as g } from "react";
+import { Children as l, createContext as u, useContext as d, useId as f, useMemo as p, useRef as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useControl as _ } from "react-use-control";
 //#region src/lib/components/Command/Command.tsx
-var v = "[role=\"option\"]", y = f(void 0);
+var v = "[role=\"option\"]", y = u(void 0);
 function b() {
-	let e = p(y);
+	let e = d(y);
 	if (!e) throw Error("Command sub-components must be used within <Command>");
 	return e;
 }
 var x = "haze-Command__base";
 function S({ query: t, shouldFilter: n = !0, onItemSelect: r, children: i, className: a }) {
-	let [o, s] = _(t, ""), c = g(null), u = g(null), d = m(), f = h(() => ({
+	let [o, s] = _(t, ""), c = m(null), l = m(null), u = f(), d = p(() => ({
 		query: o,
 		setQuery: s,
 		shouldFilter: n,
 		onItemSelect: r,
 		inputRef: c,
-		listRef: u,
-		listId: d
+		listRef: l,
+		listId: u
 	}), [
 		o,
 		s,
 		n,
 		r,
-		d
+		u
 	]);
-	return /* @__PURE__ */ l(y.Provider, {
-		value: f,
-		children: l("div", {
+	return /* @__PURE__ */ h(y.Provider, {
+		value: d,
+		children: h("div", {
+			"data-slot": "command",
 			role: "combobox",
 			"aria-expanded": !0,
-			"aria-controls": d,
+			"aria-controls": u,
 			className: e([x, a]),
 			children: i
 		})
@@ -47,9 +48,10 @@ function S({ query: t, shouldFilter: n = !0, onItemSelect: r, children: i, class
 }
 var C = "haze-Command__inputStyle";
 function w({ placeholder: n, className: i, ref: a }) {
-	let { query: o, setQuery: s, inputRef: c, listRef: u } = b();
-	return /* @__PURE__ */ l("input", {
+	let { query: o, setQuery: s, inputRef: c, listRef: l } = b();
+	return /* @__PURE__ */ h("input", {
 		ref: t(c, a),
+		"data-slot": "input",
 		type: "text",
 		placeholder: n,
 		value: o,
@@ -57,7 +59,7 @@ function w({ placeholder: n, className: i, ref: a }) {
 		onKeyDown: (e) => {
 			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
 			e.preventDefault();
-			let t = r(u.current, v);
+			let t = r(l.current, v);
 			(e.key === "ArrowDown" ? t[0] : t[t.length - 1])?.focus();
 		},
 		className: e([C, i])
@@ -65,41 +67,45 @@ function w({ placeholder: n, className: i, ref: a }) {
 }
 var T = "haze-Command__listStyle", E = "haze-Command__emptyStyle";
 function D({ children: t, empty: r, className: o }) {
-	let { inputRef: d, listRef: f, listId: p, shouldFilter: m, query: h } = b(), g = n("command");
+	let { inputRef: l, listRef: u, listId: d, shouldFilter: f, query: p } = b(), m = n("command");
 	a({
-		menuRef: f,
+		menuRef: u,
 		active: !0,
 		selector: v
 	});
 	let _ = i({
-		menuRef: f,
+		menuRef: u,
 		selector: v,
-		onClose: () => d.current?.focus()
-	}), y = s(t, M), x = m && y.length > 0 && !y.some((e) => c(e.props, h));
-	return /* @__PURE__ */ u("div", {
-		ref: f,
+		onClose: () => l.current?.focus()
+	}), y = s(t, M), x = f && y.length > 0 && !y.some((e) => c(e.props, p));
+	return /* @__PURE__ */ g("div", {
+		ref: u,
+		"data-slot": "list",
 		role: "listbox",
-		id: p,
+		id: d,
 		onKeyDown: _,
 		className: e([T, o]),
-		children: [t, x && /* @__PURE__ */ l("div", {
+		children: [t, x && /* @__PURE__ */ h("div", {
+			"data-slot": "empty",
 			role: "option",
 			"aria-selected": !1,
 			"aria-disabled": "true",
 			className: e([E]),
-			children: r ?? g.noResults
+			children: r ?? m.noResults
 		})]
 	});
 }
 var O = "haze-Command__groupHeading";
 function k({ heading: t, children: n, className: r }) {
-	let { shouldFilter: i, query: a } = b(), o = m(), f = s(n, M);
-	return (f.length === 0 ? d.count(n) > 0 : !i || f.some((e) => c(e.props, a))) ? /* @__PURE__ */ u("div", {
+	let { shouldFilter: i, query: a } = b(), o = f(), u = s(n, M);
+	return (u.length === 0 ? l.count(n) > 0 : !i || u.some((e) => c(e.props, a))) ? /* @__PURE__ */ g("div", {
+		"data-slot": "group",
 		role: "group",
 		"aria-labelledby": t === void 0 ? void 0 : o,
 		className: e([r]),
-		children: [t !== void 0 && /* @__PURE__ */ l("div", {
+		children: [t !== void 0 && /* @__PURE__ */ h("div", {
 			id: o,
+			"data-slot": "group-label",
 			className: e([O]),
 			children: t
 		}), n]
@@ -107,28 +113,29 @@ function k({ heading: t, children: n, className: r }) {
 }
 var A = "haze-Command__itemStyle", j = "haze-Command__itemWithShortcut";
 function M({ children: t, value: n, keywords: r, shortcut: i, className: a, onSelect: s }) {
-	let { shouldFilter: d, query: f, onItemSelect: p } = b();
-	if (d && !c({
+	let { shouldFilter: l, query: u, onItemSelect: d } = b();
+	if (l && !c({
 		value: n,
 		keywords: r,
 		children: t
-	}, f)) return null;
-	let m = () => {
-		s?.(), p?.();
+	}, u)) return null;
+	let f = () => {
+		s?.(), d?.();
 	};
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ g("div", {
+		"data-slot": "item",
 		role: "option",
 		tabIndex: -1,
-		onClick: m,
+		onClick: f,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
 		},
 		className: e([
 			A,
 			i !== void 0 && j,
 			a
 		]),
-		children: [t, i !== void 0 && /* @__PURE__ */ l(o, {
+		children: [t, i !== void 0 && /* @__PURE__ */ h(o, {
 			size: "sm",
 			children: i
 		})]

package/dist/components/Command/CommandDialog.js

@@ -4,28 +4,28 @@ import e from "../Dialog/Dialog.js";
 import t, { CommandInput as n } from "./Command.js";
 import { useHotkeys as r } from "../../hooks/useHotkeys.js";
 /* empty css                        */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useCallback as o, useEffect as s, useRef as c } from "react";
+import { useCallback as i, useEffect 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";
 //#region src/lib/components/Command/CommandDialog.tsx
 var u = "haze-CommandDialog__panel", d = "haze-CommandDialog__panelTitle", f = "haze-CommandDialog__palette";
 function p({ open: p, onOpenChange: m, hotkey: h, title: g, placeholder: _, children: v, className: y }) {
-	let [b, x, S] = l(p, !1), C = c(null), w = o(() => {
+	let [b, x, S] = l(p, !1), C = o(null), w = i(() => {
 		let e = !b;
 		x(e), m?.(e);
 	}, [
 		b,
 		x,
 		m
-	]), T = o(() => {
+	]), T = i(() => {
 		x(!1), m?.(!1);
 	}, [x, m]);
 	return r(h === void 0 ? {} : { [h]: w }, {
 		enabled: h !== void 0,
 		allowInInput: !0
-	}), s(() => {
+	}), a(() => {
 		b && C.current?.focus();
-	}, [b]), /* @__PURE__ */ i(e, {
+	}, [b]), /* @__PURE__ */ s(e, {
 		open: S,
 		onClose: () => m?.(!1),
 		title: g,
@@ -34,10 +34,10 @@ function p({ open: p, onOpenChange: m, hotkey: h, title: g, placeholder: _, chil
 			header: d
 		},
 		className: y,
-		children: a(t, {
+		children: c(t, {
 			className: f,
 			onItemSelect: T,
-			children: [/* @__PURE__ */ i(n, {
+			children: [/* @__PURE__ */ s(n, {
 				ref: C,
 				placeholder: _
 			}), v]

package/dist/components/ConfigProvider/ConfigContext.js

@@ -0,0 +1,30 @@
+"use client";
+import { createContext as e } from "react";
+//#region src/lib/components/ConfigProvider/ConfigContext.ts
+var t = e(void 0);
+function n(e, t) {
+	return e === void 0 ? t ?? {} : t === void 0 ? e : {
+		Button: {
+			...e.Button ?? {},
+			...t.Button ?? {}
+		},
+		ButtonLink: {
+			...e.ButtonLink ?? {},
+			...t.ButtonLink ?? {}
+		},
+		Toast: {
+			...e.Toast ?? {},
+			...t.Toast ?? {}
+		},
+		Tooltip: {
+			...e.Tooltip ?? {},
+			...t.Tooltip ?? {}
+		},
+		HoverCard: {
+			...e.HoverCard ?? {},
+			...t.HoverCard ?? {}
+		}
+	};
+}
+//#endregion
+export { t as ConfigContext, n as mergeConfig };

package/dist/components/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,14 @@
+"use client";
+import { ConfigContext as e, mergeConfig as t } from "./ConfigContext.js";
+import { useContext as n, useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/lib/components/ConfigProvider/ConfigProvider.tsx
+function a({ defaults: a, children: o }) {
+	let s = n(e), c = r(() => t(s, a), [s, a]);
+	return /* @__PURE__ */ i(e.Provider, {
+		value: c,
+		children: o
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/ConfigProvider/index.js

@@ -0,0 +1,4 @@
+"use client";
+import { useConfigDefaults as e } from "./useConfigDefaults.js";
+import t from "./ConfigProvider.js";
+export { t as default, e as useConfigDefaults };

package/dist/components/ConfigProvider/useConfigDefaults.js

@@ -0,0 +1,10 @@
+"use client";
+import { ConfigContext as e } from "./ConfigContext.js";
+import { useContext as t } from "react";
+//#region src/lib/components/ConfigProvider/useConfigDefaults.ts
+var n = Object.freeze({});
+function r(r) {
+	return t(e)?.[r] ?? n;
+}
+//#endregion
+export { r as useConfigDefaults };

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -5,8 +5,8 @@ import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { Presence as n } from "../../utils/presence.js";
 import { useFocusScope as r } from "../../utils/focus-scope.js";
 /* empty css                        */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useId as o } from "react";
+import { useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useControl as s } from "react-use-control";
 //#region src/lib/components/ConfirmDialog/ConfirmDialog.tsx
 var c = "haze-ConfirmDialog__overlay", l = "haze-ConfirmDialog__dialog", u = "haze-ConfirmDialog__header", d = "haze-ConfirmDialog__body", f = "haze-ConfirmDialog__footer", p = "haze-ConfirmDialog__btn", m = "haze-ConfirmDialog__cancelBtn", h = "haze-ConfirmDialog__confirmBtn", g = "haze-ConfirmDialog__dangerBtn";
@@ -14,16 +14,17 @@ function _({ open: _, onClose: v, onConfirm: y, onCancel: b, title: x, children:
 	let [O, k] = s(_, !1), A = t("confirmDialog"), j = C ?? A.confirm, M = w ?? A.cancel, N = r({
 		enabled: O,
 		trapped: !0
-	}), P = `haze-confirm-title-${o()}`, F = () => {
+	}), P = `haze-confirm-title-${i()}`, F = () => {
 		k(!1), v?.();
 	}, I = () => {
 		b?.(), F();
 	}, L = () => {
 		y?.(), F();
 	};
-	return /* @__PURE__ */ i(n, {
+	return /* @__PURE__ */ a(n, {
 		present: O,
-		children: i("div", {
+		children: a("div", {
+			"data-slot": "mask",
 			onClick: () => {
 				O && F();
 			},
@@ -31,8 +32,9 @@ function _({ open: _, onClose: v, onConfirm: y, onCancel: b, title: x, children:
 				e.key === "Escape" && O && F();
 			},
 			className: e([c, E]),
-			children: /* @__PURE__ */ a("div", {
+			children: /* @__PURE__ */ o("div", {
 				ref: N,
+				"data-slot": "content",
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": x === void 0 ? void 0 : P,
@@ -40,23 +42,28 @@ function _({ open: _, onClose: v, onConfirm: y, onCancel: b, title: x, children:
 				onClick: (e) => e.stopPropagation(),
 				className: e([l]),
 				children: [
-					x && /* @__PURE__ */ i("div", {
+					x && /* @__PURE__ */ a("div", {
 						id: P,
+						"data-slot": "title",
 						className: e([u]),
 						children: x
 					}),
-					/* @__PURE__ */ i("div", {
+					/* @__PURE__ */ a("div", {
+						"data-slot": "description",
 						className: e([d]),
 						children: S
 					}),
-					/* @__PURE__ */ a("div", {
+					/* @__PURE__ */ o("div", {
+						"data-slot": "footer",
 						className: e([f]),
-						children: [/* @__PURE__ */ i("button", {
+						children: [/* @__PURE__ */ a("button", {
+							"data-slot": "cancel-button",
 							type: "button",
 							onClick: I,
 							className: e([p, m]),
 							children: M
-						}), /* @__PURE__ */ i("button", {
+						}), /* @__PURE__ */ a("button", {
+							"data-slot": "confirm-button",
 							type: "button",
 							onClick: L,
 							className: e([p, T === "danger" ? g : h]),

package/dist/components/Container/Container.js

@@ -12,6 +12,7 @@ var n = "haze-Container__container", r = {
 };
 function i({ size: i = "lg", children: a, className: o }) {
 	return /* @__PURE__ */ t("div", {
+		"data-slot": "container",
 		className: e([
 			n,
 			r[i],

package/dist/components/ContextMenu/ContextMenu.js

@@ -4,20 +4,20 @@ import { classnames as e } from "../../utils/classnames.js";
 import { useFloating as t } from "../../utils/floating.js";
 import { ContextMenuProvider as n } from "./ContextMenuContext.js";
 /* empty css                      */
-import { jsx as r } from "react/jsx-runtime";
-import { useCallback as i, useRef as a, useState as o } from "react";
+import { useCallback as r, useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 import { useControl as s } from "react-use-control";
 //#region src/lib/components/ContextMenu/ContextMenu.tsx
 var c = "haze-ContextMenu__wrapper";
 function l({ open: l, onOpenChange: u, children: d, className: f }) {
-	let [p, m] = s(l, !1), [h, g] = o(0), [_, v] = o(0), y = a(null), b = a(null), x = i((e) => {
+	let [p, m] = s(l, !1), [h, g] = a(0), [_, v] = a(0), y = i(null), b = i(null), x = r((e) => {
 		let t = typeof e == "function" ? e(p) : e;
 		m(t), u?.(t);
 	}, [
 		p,
 		m,
 		u
-	]), S = i((e, t) => {
+	]), S = r((e, t) => {
 		g(e), v(t);
 	}, []), C = t({
 		open: p,
@@ -26,7 +26,7 @@ function l({ open: l, onOpenChange: u, children: d, className: f }) {
 		panelRef: b,
 		animated: !0
 	});
-	return /* @__PURE__ */ r(n, {
+	return /* @__PURE__ */ o(n, {
 		value: {
 			open: p,
 			setOpen: x,
@@ -36,8 +36,9 @@ function l({ open: l, onOpenChange: u, children: d, className: f }) {
 			contentRef: b,
 			floating: C
 		},
-		children: r("div", {
+		children: o("div", {
 			ref: y,
+			"data-slot": "context-menu",
 			className: e([c, f]),
 			children: d
 		})

package/dist/components/ContextMenu/ContextMenuContent.js

@@ -5,8 +5,8 @@ import { useFocusScope as t } from "../../utils/focus-scope.js";
 import { useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
 import { useContextMenuContext as i } from "./ContextMenuContext.js";
 /* empty css                             */
-import { jsx as a } from "react/jsx-runtime";
-import { useCallback as o } from "react";
+import { useCallback as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/lib/components/ContextMenu/ContextMenuContent.tsx
 var s = "haze-ContextMenuContent__content";
 function c({ children: c, className: l }) {
@@ -22,10 +22,10 @@ function c({ children: c, className: l }) {
 		enabled: u && h.shown,
 		autoFocus: !0,
 		returnFocus: !0
-	}), v = o((e) => {
+	}), v = a((e) => {
 		m.current = e, _(e);
 	}, [m, _]);
-	return !u && h.exited ? null : /* @__PURE__ */ a(e, {
+	return !u && h.exited ? null : /* @__PURE__ */ o(e, {
 		ref: v,
 		behavior: h,
 		role: "menu",

package/dist/components/ContextMenu/ContextMenuItem.js

@@ -9,6 +9,7 @@ var r = "haze-ContextMenuItem__item";
 function i({ children: i, onClick: a, disabled: o, className: s }) {
 	let { setOpen: c } = t();
 	return /* @__PURE__ */ n("button", {
+		"data-slot": "menu-item",
 		type: "button",
 		role: "menuitem",
 		tabIndex: -1,

package/dist/components/ContextMenu/ContextMenuSeparator.js

@@ -7,6 +7,7 @@ import { jsx as t } from "react/jsx-runtime";
 var n = "haze-ContextMenuSeparator__separator";
 function r({ className: r }) {
 	return /* @__PURE__ */ t("div", {
+		"data-slot": "separator",
 		role: "separator",
 		className: e([n, r])
 	});

package/dist/components/ContextMenu/ContextMenuTrigger.js

@@ -9,6 +9,7 @@ var r = "haze-ContextMenuTrigger__trigger";
 function i({ children: i, className: a }) {
 	let { setOpen: o, setPosition: s } = t();
 	return /* @__PURE__ */ n("div", {
+		"data-slot": "trigger",
 		onContextMenu: (e) => {
 			e.preventDefault(), s(e.clientX, e.clientY), o(!0);
 		},

package/dist/components/ConversationList/ConversationItem.js

@@ -7,6 +7,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = "haze-ConversationItem__item", i = "haze-ConversationItem__activeItem", a = "haze-ConversationItem__body", o = "haze-ConversationItem__titleStyle", s = "haze-ConversationItem__subtitleStyle", c = "haze-ConversationItem__endSlot";
 function l({ title: l, subtitle: u, active: d, onClick: f, end: p, className: m }) {
 	return /* @__PURE__ */ n("button", {
+		"data-slot": "conversation-item",
 		type: "button",
 		onClick: f,
 		"aria-current": d ? "true" : void 0,
@@ -18,13 +19,16 @@ function l({ title: l, subtitle: u, active: d, onClick: f, end: p, className: m
 		children: [/* @__PURE__ */ n("div", {
 			className: e([a]),
 			children: [/* @__PURE__ */ t("div", {
+				"data-slot": "title",
 				className: e([o]),
 				children: l
 			}), u && /* @__PURE__ */ t("div", {
+				"data-slot": "description",
 				className: e([s]),
 				children: u
 			})]
 		}), p && /* @__PURE__ */ t("div", {
+			"data-slot": "suffix",
 			className: e([c]),
 			children: p
 		})]

package/dist/components/ConversationList/ConversationList.js

@@ -7,6 +7,7 @@ import { jsx as t } from "react/jsx-runtime";
 var n = "haze-ConversationList__list";
 function r({ children: r, className: i }) {
 	return /* @__PURE__ */ t("div", {
+		"data-slot": "conversation-list",
 		className: e([n, i]),
 		children: r
 	});

package/dist/components/CountUp/CountUp.js

@@ -3,8 +3,8 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { usePrefersReducedMotion as t } from "../../hooks/usePrefersReducedMotion.js";
 /* empty css                  */
-import { jsx as n } from "react/jsx-runtime";
-import { useEffect as r, useRef as i, useState as a } from "react";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/lib/components/CountUp/CountUp.tsx
 var o = "haze-CountUp__base", s = /* @__PURE__ */ new Map();
 function c(e, t) {
@@ -15,8 +15,8 @@ function c(e, t) {
 	}), s.set(t, n)), n.format(e);
 }
 function l({ to: s, from: l = 0, duration: u = 1200, decimals: d = 0, format: f, autostart: p = !0, className: m, ...h }) {
-	let g = t(), [_, v] = a(l), y = i(l), b = i(0), x = i(!0);
-	return r(() => {
+	let g = t(), [_, v] = i(l), y = r(l), b = r(0), x = r(!0);
+	return n(() => {
 		let e = x.current;
 		if (x.current = !1, e && !p) return;
 		let t = y.current;
@@ -35,7 +35,8 @@ function l({ to: s, from: l = 0, duration: u = 1200, decimals: d = 0, format: f,
 		u,
 		g,
 		p
-	]), /* @__PURE__ */ n("span", {
+	]), /* @__PURE__ */ a("span", {
+		"data-slot": "count-up",
 		...h,
 		className: e([o, m]),
 		children: f ? f(_) : c(_, d)

package/dist/components/DataTable/CellEditor.js

@@ -2,15 +2,15 @@
 "use client";
 import e from "../Input/InputCore.js";
 /* empty css                     */
-import { jsx as t } from "react/jsx-runtime";
-import { useRef as n, useState as r } from "react";
+import { useRef as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/DataTable/CellEditor.tsx
 var i = "haze-CellEditor__editorInput";
 function a(e) {
 	return typeof e == "string" ? e : typeof e == "number" ? String(e) : "";
 }
 function o({ kind: o, value: s, ariaLabel: c, onSave: l, onCancel: u }) {
-	let [d, f] = r(() => a(s)), p = n(!1), m = (e) => {
+	let [d, f] = n(() => a(s)), p = t(!1), m = (e) => {
 		if (!p.current) {
 			if (p.current = !0, !e) {
 				u();
@@ -19,7 +19,7 @@ function o({ kind: o, value: s, ariaLabel: c, onSave: l, onCancel: u }) {
 			l(o === "number" ? d.trim() === "" ? null : Number(d) : d);
 		}
 	};
-	return /* @__PURE__ */ t(e, {
+	return /* @__PURE__ */ r(e, {
 		size: "sm",
 		type: o === "number" ? "number" : "text",
 		className: i,