haze-ui 1.28.0 → 1.30.0

package/dist/components/Combobox/Combobox.js

@@ -11,25 +11,26 @@ import ie from "../VirtualList/VirtualList.js";
 import ae from "./ComboboxGroup.js";
 import oe from "./ComboboxOption.js";
 /* empty css                   */
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useCallback as se, useEffect as s, useId as ce, useMemo as le, useRef as c, useState as l } from "react";
+import { useCallback as se, useEffect as i, useId as ce, useMemo as le, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import { useControl as u } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
 var ue = "haze-Combobox__wrapper", de = "haze-Combobox__input", fe = "haze-Combobox__multiBox", pe = "haze-Combobox__multiInput", d = "haze-Combobox__matchMark", f = "haze-Combobox__stateRow", me = "haze-Combobox__groupHeadingText", he = "haze-Combobox__listbox", ge = "haze-Combobox__listboxVirtual", _e = 200, ve = 37, ye = "haze-Combobox__virtualRow";
 function be(t, n) {
 	if (n === "") return t;
 	let r = t.toLowerCase().indexOf(n.toLowerCase());
-	return r < 0 ? t : /* @__PURE__ */ o(i, { children: [
+	return r < 0 ? t : /* @__PURE__ */ l(s, { children: [
 		t.slice(0, r),
-		/* @__PURE__ */ a("mark", {
+		/* @__PURE__ */ c("mark", {
+			"data-slot": "match",
 			className: e([d]),
 			children: t.slice(r, r + n.length)
 		}),
 		t.slice(r + n.length)
 	] });
 }
-function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h, creatable: xe = !1, onCreate: Se, onSearch: g, loading: _ = !1, empty: Ce, highlightMatches: we = !1, maxHeight: v, placeholder: Te, virtualThreshold: y = 100, virtualized: b, className: Ee, ref: x }) {
-	let S = r("combobox"), [C, w] = u(i, m ? [] : ""), [T, De] = l([]), [E, D] = l(""), [O, k] = u(d, !1), [A, j] = l(-1), [Oe, ke] = l(E), M = ce(), N = c(null), Ae = se((e) => t(N, x)(e), [N, x]), P = c(null), F = c(null), I = c(null), L = c(null), R = te({
+function p({ value: s, open: d, options: p, multiple: m = !1, onValuesChange: h, creatable: xe = !1, onCreate: Se, onSearch: g, loading: _ = !1, empty: Ce, highlightMatches: we = !1, maxHeight: v, placeholder: Te, virtualThreshold: y = 100, virtualized: b, className: Ee, ref: x }) {
+	let S = r("combobox"), [C, w] = u(s, m ? [] : ""), [T, De] = o([]), [E, D] = o(""), [O, k] = u(d, !1), [A, j] = o(-1), [Oe, ke] = o(E), M = ce(), N = a(null), Ae = se((e) => t(N, x)(e), [N, x]), P = a(null), F = a(null), I = a(null), L = a(null), R = te({
 		open: O,
 		setOpen: k,
 		triggerRef: m ? P : N,
@@ -74,7 +75,7 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		});
 	}
 	let Pe = Y.some((e) => e.label !== void 0);
-	s(() => {
+	i(() => {
 		if (!R.shown || A < 0) return;
 		if (K) {
 			I.current?.scrollToIndex(A, "auto");
@@ -87,12 +88,12 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		R.shown,
 		A
 	]);
-	let X = c(g);
-	s(() => {
+	let X = a(g);
+	i(() => {
 		X.current = g;
 	}, [g]);
-	let Z = c(E);
-	s(() => {
+	let Z = a(E);
+	i(() => {
 		Z.current !== E && (Z.current = E, X.current?.(E));
 	}, [E]), E !== Oe && (ke(E), j(-1));
 	let Fe = (e) => m ? z.includes(e) : C === e, Ie = (e) => B.find((t) => t.value === e)?.label ?? e, Le = (e, t) => {
@@ -120,7 +121,7 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 			let t = z.slice(0, -1);
 			w(t), h?.(t);
 		}
-	}, Q = (e, t, n) => /* @__PURE__ */ a(oe, {
+	}, Q = (e, t, n) => /* @__PURE__ */ c(oe, {
 		ref: !n && t === A ? L : void 0,
 		value: e.value,
 		id: J(t),
@@ -131,8 +132,9 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		onSelect: ze,
 		className: n ? ye : void 0,
 		children: H && t === 0 ? je : we ? be(e.label, E) : e.label
-	}, e.value), $ = /* @__PURE__ */ a("input", {
+	}, e.value), $ = /* @__PURE__ */ c("input", {
 		ref: Ae,
+		"data-slot": "input",
 		role: "combobox",
 		style: m ? void 0 : R.triggerStyle,
 		"aria-expanded": O,
@@ -150,19 +152,21 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 		onClick: m ? void 0 : R.onTriggerClick,
 		onKeyDown: Be
 	});
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ l("div", {
 		className: e([ue, Ee]),
-		children: [m ? /* @__PURE__ */ o("div", {
+		children: [m ? /* @__PURE__ */ l("div", {
 			ref: P,
+			"data-slot": "trigger",
 			style: R.triggerStyle,
 			onPointerDown: R.onTriggerPointerDown,
 			onClick: () => {
 				R.onTriggerClick(), N.current?.focus();
 			},
 			className: e(fe),
-			children: [z.map((e) => /* @__PURE__ */ a("span", {
+			children: [z.map((e) => /* @__PURE__ */ c("span", {
+				"data-slot": "item",
 				onClick: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ a(ne, {
+				children: /* @__PURE__ */ c(ne, {
 					color: "primary",
 					onClose: () => {
 						let t = z.filter((t) => t !== e);
@@ -171,7 +175,7 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 					children: Ie(e)
 				})
 			}, e)), $]
-		}) : $, /* @__PURE__ */ a(ee, {
+		}) : $, /* @__PURE__ */ c(ee, {
 			ref: F,
 			behavior: R,
 			placement: "bottom-span",
@@ -180,19 +184,21 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 			"aria-multiselectable": m ? "true" : void 0,
 			visualClass: K ? ge : he,
 			style: v !== void 0 && !K ? { maxHeight: `${v}px` } : void 0,
-			children: _ ? /* @__PURE__ */ a("div", {
+			children: _ ? /* @__PURE__ */ c("div", {
 				role: "option",
+				"data-slot": "loading",
 				"aria-selected": !1,
 				"aria-disabled": "true",
 				className: e([f]),
-				children: /* @__PURE__ */ a(re, { size: "sm" })
-			}) : W.length === 0 ? /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ c(re, { size: "sm" })
+			}) : W.length === 0 ? /* @__PURE__ */ c("div", {
 				role: "option",
+				"data-slot": "empty",
 				"aria-selected": !1,
 				"aria-disabled": "true",
 				className: e([f]),
 				children: Ce ?? S.noResults
-			}) : K ? /* @__PURE__ */ a(ie, {
+			}) : K ? /* @__PURE__ */ c(ie, {
 				ref: I,
 				"data-virtualized": !0,
 				items: W,
@@ -202,13 +208,14 @@ function p({ value: i, open: d, options: p, multiple: m = !1, onValuesChange: h,
 				groups: Pe ? Y.filter((e) => e.label !== void 0).map((t) => ({
 					startIndex: t.rows[0]?.index ?? 0,
 					key: t.key,
-					render: () => /* @__PURE__ */ a("div", {
+					render: () => /* @__PURE__ */ c("div", {
+						"data-slot": "group-label",
 						className: e([me]),
 						children: t.label
 					})
 				})) : void 0,
 				renderItem: (e, t) => Q(e, t, !0)
-			}) : Y.flatMap((e) => e.label === void 0 ? e.rows.map(({ option: e, index: t }) => Q(e, t, !1)) : [/* @__PURE__ */ a(ae, {
+			}) : Y.flatMap((e) => e.label === void 0 ? e.rows.map(({ option: e, index: t }) => Q(e, t, !1)) : [/* @__PURE__ */ c(ae, {
 				label: e.label,
 				children: e.rows.map(({ option: e, index: t }) => Q(e, t, !1))
 			}, e.key)])

package/dist/components/Combobox/ComboboxGroup.js

@@ -2,18 +2,20 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useId as r } from "react";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/Combobox/ComboboxGroup.tsx
 var i = "haze-ComboboxGroup__groupHeading";
 function a({ label: a, className: o, children: s }) {
-	let c = r();
-	return /* @__PURE__ */ n("div", {
+	let c = t();
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "group",
 		role: "group",
 		"aria-labelledby": c,
 		className: e([o]),
-		children: [/* @__PURE__ */ t("div", {
+		children: [/* @__PURE__ */ n("div", {
 			id: c,
+			"data-slot": "group-label",
 			className: e([i]),
 			children: a
 		}), s]

package/dist/components/Combobox/ComboboxOption.js

@@ -8,6 +8,7 @@ var n = "haze-ComboboxOption__option", r = "haze-ComboboxOption__highlightedStyl
 function a({ value: a, highlighted: o = !1, selected: s = !1, id: c, ref: l, setSize: u, posInSet: d, onSelect: f, className: p, children: m }) {
 	return /* @__PURE__ */ t("div", {
 		ref: l,
+		"data-slot": "option",
 		role: "option",
 		id: c,
 		"aria-selected": s || o,

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);
 		},