haze-ui 1.29.0 → 1.30.0

package/dist/components/ApprovalCard/ApprovalCard.js

@@ -9,30 +9,38 @@ var i = "haze-ApprovalCard__card", a = "haze-ApprovalCard__header", o = "haze-Ap
 function p({ title: p, description: m, onApprove: h, onDeny: g, approveText: _, denyText: v, children: y, className: b }) {
 	let x = t("approvalCard"), S = p ?? x.title, C = _ ?? x.approve, w = v ?? x.deny;
 	return /* @__PURE__ */ r("div", {
+		"data-slot": "approval-card",
 		className: e([i, b]),
 		children: [
 			/* @__PURE__ */ n("div", {
+				"data-slot": "title",
 				className: e([a]),
 				children: S
 			}),
 			/* @__PURE__ */ r("div", {
+				"data-slot": "body",
 				className: e([o]),
 				children: [m && /* @__PURE__ */ n("div", {
+					"data-slot": "description",
 					className: e([s]),
 					children: m
 				}), y && /* @__PURE__ */ n("div", {
+					"data-slot": "content",
 					className: e([c]),
 					children: y
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
+				"data-slot": "actions",
 				className: e([l]),
 				children: [/* @__PURE__ */ n("button", {
+					"data-slot": "deny-button",
 					type: "button",
 					onClick: g,
 					className: e([u, d]),
 					children: w
 				}), /* @__PURE__ */ n("button", {
+					"data-slot": "approve-button",
 					type: "button",
 					onClick: h,
 					className: e([u, f]),

package/dist/components/AspectRatio/AspectRatio.js

@@ -7,9 +7,11 @@ var n = "haze-AspectRatio__wrapper", r = "haze-AspectRatio__inner";
 function i({ ratio: i = 16 / 9, children: a, className: o }) {
 	let s = `${1 / i * 100}%`;
 	return /* @__PURE__ */ t("div", {
+		"data-slot": "aspect-ratio",
 		style: { paddingBottom: s },
 		className: e([n, o]),
 		children: t("div", {
+			"data-slot": "content",
 			className: e([r]),
 			children: a
 		})

package/dist/components/AsyncSection/AsyncSection.js

@@ -9,12 +9,15 @@ var i = "haze-AsyncSection__base", a = "haze-AsyncSection__placeholder", o = "ha
 function u({ loading: u = !1, error: d, onRetry: f, loadingText: p, errorText: m, retryText: h, className: g, children: _ }) {
 	let v = t("asyncSection"), y = p ?? v.loading, b = h ?? v.retry;
 	if (u) return /* @__PURE__ */ n("section", {
+		"data-slot": "async-section",
 		"aria-busy": "true",
 		className: e([i, g]),
 		children: r("div", {
+			"data-slot": "loading",
 			role: "status",
 			className: e([a]),
 			children: [/* @__PURE__ */ n("span", {
+				"data-slot": "spinner",
 				"aria-hidden": "true",
 				className: e([o]),
 				children: /* @__PURE__ */ r("svg", {
@@ -40,14 +43,18 @@ function u({ loading: u = !1, error: d, onRetry: f, loadingText: p, errorText: m
 	if (d != null) {
 		let t = m ?? (d instanceof Error && d.message ? d.message : void 0) ?? v.error;
 		return /* @__PURE__ */ n("section", {
+			"data-slot": "async-section",
 			className: e([i, g]),
 			children: r("div", {
+				"data-slot": "error",
 				role: "alert",
 				className: e([s]),
 				children: [/* @__PURE__ */ n("p", {
+					"data-slot": "message",
 					className: e([c]),
 					children: t
 				}), f && /* @__PURE__ */ n("button", {
+					"data-slot": "retry-button",
 					type: "button",
 					onClick: f,
 					className: e([l]),
@@ -57,6 +64,7 @@ function u({ loading: u = !1, error: d, onRetry: f, loadingText: p, errorText: m
 		});
 	}
 	return /* @__PURE__ */ n("section", {
+		"data-slot": "async-section",
 		className: e([i, g]),
 		children: _
 	});

package/dist/components/Avatar/Avatar.js

@@ -2,8 +2,8 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
-import { jsx as t } from "react/jsx-runtime";
-import { useState as n } from "react";
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/lib/components/Avatar/Avatar.tsx
 var r = "haze-Avatar__base", i = {
 	sm: "haze-Avatar__sm",
@@ -11,19 +11,24 @@ var r = "haze-Avatar__base", i = {
 	lg: "haze-Avatar__lg"
 }, a = "haze-Avatar__imgStyle";
 function o({ src: o, alt: s, size: c = "md", fallback: l, className: u }) {
-	let [d, f] = n(!1);
-	return /* @__PURE__ */ t("span", {
+	let [d, f] = t(!1);
+	return /* @__PURE__ */ n("span", {
+		"data-slot": "avatar",
 		className: e([
 			r,
 			i[c],
 			u
 		]),
-		children: o && !d ? /* @__PURE__ */ t("img", {
+		children: o && !d ? /* @__PURE__ */ n("img", {
+			"data-slot": "img",
 			className: a,
 			src: o,
 			alt: s ?? "",
 			onError: () => f(!0)
-		}) : l ?? /* @__PURE__ */ t("span", { children: s?.charAt(0).toUpperCase() ?? "?" })
+		}) : l ?? /* @__PURE__ */ n("span", {
+			"data-slot": "img",
+			children: s?.charAt(0).toUpperCase() ?? "?"
+		})
 	});
 }
 //#endregion

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -4,19 +4,22 @@ import { classnames as e } from "../../utils/classnames.js";
 import { formatString as t } from "../LocaleProvider/locale.js";
 import { useStrings as n } from "../LocaleProvider/useStrings.js";
 /* empty css                      */
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Children as a } from "react";
+import { Children as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/AvatarGroup/AvatarGroup.tsx
 var o = "haze-AvatarGroup__base", s = "haze-AvatarGroup__item", c = "haze-AvatarGroup__itemStacked", l = "haze-AvatarGroup__overflowChip";
 function u({ max: u, total: d, className: f, children: p, ...m }) {
-	let h = n("avatarGroup"), g = a.toArray(p), _ = u === void 0 ? g.length : Math.max(u, 0), v = g.length > _, y = v ? g.slice(0, _) : g, b = d ?? g.length - _;
-	return /* @__PURE__ */ i("div", {
+	let h = n("avatarGroup"), g = r.toArray(p), _ = u === void 0 ? g.length : Math.max(u, 0), v = g.length > _, y = v ? g.slice(0, _) : g, b = d ?? g.length - _;
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "avatar-group",
 		...m,
 		className: e([o, f]),
-		children: [y.map((t, n) => /* @__PURE__ */ r("span", {
+		children: [y.map((t, n) => /* @__PURE__ */ i("span", {
+			"data-slot": "item",
 			className: e([s, n > 0 && c]),
 			children: t
-		}, n)), v && /* @__PURE__ */ r("span", {
+		}, n)), v && /* @__PURE__ */ i("span", {
+			"data-slot": "overflow-badge",
 			className: e([
 				s,
 				l,

package/dist/components/BackToTop/BackToTop.js

@@ -3,15 +3,16 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                    */
-import { jsx as n } from "react/jsx-runtime";
-import { useCallback as r, useEffect as i, useState as a } from "react";
+import { useCallback as n, useEffect as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/lib/components/BackToTop/BackToTop.tsx
 var o = "haze-BackToTop__button", s = "haze-BackToTop__hidden";
 function c({ threshold: c = 300, children: l = "↑", className: u }) {
-	let [d, f] = a(!1), p = t("backToTop"), m = r(() => {
+	let [d, f] = i(!1), p = t("backToTop"), m = n(() => {
 		f(window.scrollY > c);
 	}, [c]);
-	return i(() => (window.addEventListener("scroll", m, { passive: !0 }), () => window.removeEventListener("scroll", m)), [m]), /* @__PURE__ */ n("button", {
+	return r(() => (window.addEventListener("scroll", m, { passive: !0 }), () => window.removeEventListener("scroll", m)), [m]), /* @__PURE__ */ a("button", {
+		"data-slot": "back-to-top",
 		onClick: () => {
 			window.scrollTo({
 				top: 0,

package/dist/components/Badge/Badge.js

@@ -4,6 +4,7 @@ import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/Badge/Badge.tsx
 function a({ variant: a = "default", size: o = "md", className: s, style: c, children: l }) {
 	return /* @__PURE__ */ i("span", {
+		"data-slot": "badge",
 		style: c,
 		className: e([
 			t,

package/dist/components/Banner/Banner.js

@@ -15,6 +15,7 @@ var a = "haze-Banner__banner", o = {
 function l({ visible: l, onClose: u, variant: d = "info", children: f, className: p }) {
 	let [m, h] = i(l, !0), g = t("banner");
 	return m ? /* @__PURE__ */ r("div", {
+		"data-slot": "banner",
 		role: "alert",
 		className: e([
 			a,
@@ -22,9 +23,11 @@ function l({ visible: l, onClose: u, variant: d = "info", children: f, className
 			p
 		]),
 		children: [/* @__PURE__ */ n("div", {
+			"data-slot": "content",
 			className: e([c]),
 			children: f
 		}), u && /* @__PURE__ */ n("button", {
+			"data-slot": "close",
 			type: "button",
 			onClick: () => {
 				h(!1), u?.();

package/dist/components/BottomSheet/BottomSheet.js

@@ -5,8 +5,8 @@ import { Presence as t } from "../../utils/presence.js";
 import { useFocusScope as n } from "../../utils/focus-scope.js";
 import { useViewTransitionFlip as r } from "../../utils/view-transition.js";
 /* empty css                      */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useCallback as o, useEffect as s, useImperativeHandle as c, useRef as l, useState as u } from "react";
+import { useCallback as i, useEffect as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useControl as d } from "react-use-control";
 //#region src/lib/components/BottomSheet/BottomSheet.tsx
 var f = "haze-BottomSheet__overlay", p = "haze-BottomSheet__sheet", m = "haze-BottomSheet__handle", h = "haze-BottomSheet__swipeable", g = 88, _ = 8;
@@ -20,8 +20,8 @@ function v(e, t) {
 	return !0;
 }
 function y(e, t) {
-	let [n, r] = u(0);
-	return s(() => {
+	let [n, r] = c(0);
+	return a(() => {
 		if (!e || !t) return;
 		let n = window.visualViewport;
 		if (!n) return;
@@ -34,9 +34,9 @@ function y(e, t) {
 		};
 	}, [e, t]), n;
 }
-function b({ open: u, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1, virtualKeyboard: C = !1, children: w, className: T, style: E, ref: D, ...O }) {
-	let [k, A] = d(u, !1), j = r(x, A), M = l(null);
-	s(() => {
+function b({ open: c, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1, virtualKeyboard: C = !1, children: w, className: T, style: E, ref: D, ...O }) {
+	let [k, A] = d(c, !1), j = r(x, A), M = s(null);
+	a(() => {
 		if (!k) return;
 		let e = document.activeElement;
 		M.current = e instanceof HTMLElement ? e : null;
@@ -44,10 +44,10 @@ function b({ open: u, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 	let N = n({
 		enabled: k,
 		trapped: !0
-	}), P = o(() => {
+	}), P = i(() => {
 		j(!1), b?.();
 	}, [j, b]);
-	c(D, () => ({
+	o(D, () => ({
 		open: () => {
 			j(!0);
 		},
@@ -61,9 +61,9 @@ function b({ open: u, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 		"--haze-sheet-kb-inset": `${F}px`,
 		maxHeight: `min(80dvh, calc(100dvh - ${F}px))`,
 		...F > 0 ? { transform: `translateY(${-F}px)` } : null
-	} : void 0, L = l(null), R = o((e) => {
+	} : void 0, L = s(null), R = i((e) => {
 		N(e), L.current = e;
-	}, [N]), z = l(null), B = o((e) => {
+	}, [N]), z = s(null), B = i((e) => {
 		let t = z.current, n = L.current;
 		if (!t || !n || e.touches.length !== 1 || e.defaultPrevented) return;
 		let [r] = e.touches;
@@ -111,14 +111,15 @@ function b({ open: u, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 		let t = z.current, n = L.current;
 		t && n && t.pointerId === e.pointerId && (z.current = null, H(n), t.dragging && U(n));
 	};
-	return s(() => {
+	return a(() => {
 		if (k) return;
 		z.current = null;
 		let e = L.current;
 		e && (e.style.userSelect = "", e.style.transition = ""), document.removeEventListener("touchmove", B);
-	}, [k, B]), /* @__PURE__ */ i(t, {
+	}, [k, B]), /* @__PURE__ */ l(t, {
 		present: k,
-		children: i("div", {
+		children: l("div", {
+			"data-slot": "mask",
 			onClick: () => {
 				k && P();
 			},
@@ -126,8 +127,9 @@ function b({ open: u, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 				e.key === "Escape" && k && P();
 			},
 			className: e([f, T]),
-			children: /* @__PURE__ */ a("div", {
+			children: /* @__PURE__ */ u("div", {
 				ref: R,
+				"data-slot": "content",
 				role: "dialog",
 				"aria-modal": "true",
 				style: {
@@ -143,7 +145,10 @@ function b({ open: u, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 				},
 				onClick: (e) => e.stopPropagation(),
 				className: e([p, S && h]),
-				children: [/* @__PURE__ */ i("div", { className: e([m]) }), w]
+				children: [/* @__PURE__ */ l("div", {
+					"data-slot": "handle",
+					className: e([m])
+				}), w]
 			})
 		})
 	});

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,20 +3,24 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                     */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i } from "react";
+import { Children as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/lib/components/Breadcrumb/Breadcrumb.tsx
 var a = "haze-Breadcrumb__nav", o = "haze-Breadcrumb__list", s = "haze-Breadcrumb__sep";
 function c({ separator: c = "/", className: l, children: u }) {
-	let d = t("breadcrumb"), f = i.toArray(u);
-	return /* @__PURE__ */ n("nav", {
+	let d = t("breadcrumb"), f = n.toArray(u);
+	return /* @__PURE__ */ r("nav", {
+		"data-slot": "breadcrumb",
 		"aria-label": d.label,
 		className: e([a, l]),
-		children: n("ol", {
+		children: r("ol", {
+			"data-slot": "list",
 			className: o,
-			children: f.map((e, t) => /* @__PURE__ */ r("li", {
+			children: f.map((e, t) => /* @__PURE__ */ i("li", {
+				"data-slot": "item",
 				"aria-current": t === f.length - 1 ? "page" : void 0,
-				children: [e, t < f.length - 1 && /* @__PURE__ */ n("span", {
+				children: [e, t < f.length - 1 && /* @__PURE__ */ r("span", {
+					"data-slot": "separator",
 					className: s,
 					"aria-hidden": "true",
 					children: c

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -7,10 +7,12 @@ import { jsx as t } from "react/jsx-runtime";
 var n = "haze-BreadcrumbItem__link", r = "haze-BreadcrumbItem__current";
 function i({ href: i, className: a, children: o }) {
 	return i ? /* @__PURE__ */ t("a", {
+		"data-slot": "breadcrumb-item",
 		href: i,
 		className: e([n, a]),
 		children: o
 	}) : /* @__PURE__ */ t("span", {
+		"data-slot": "breadcrumb-item",
 		className: e([r, a]),
 		children: o
 	});

package/dist/components/Button/Button.js

@@ -1,20 +1,22 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
-import { jsx as a } from "react/jsx-runtime";
+import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
+import { base as n, sizes as r, squareSizes as i, variants as a } from "./styles.js";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/lib/components/Button/Button.tsx
-function o({ variant: o = "solid", size: s = "md", square: c = !1, className: l, ...u }) {
-	let d = c ? r[s] : n[s];
-	return /* @__PURE__ */ a("button", {
+function s({ variant: s = "solid", size: c, square: l = !1, className: u, ...d }) {
+	let f = t("Button"), p = c ?? f.size ?? "md", m = l ? i[p] : r[p];
+	return /* @__PURE__ */ o("button", {
 		type: "button",
-		...u,
+		"data-slot": "button",
+		...d,
 		className: e([
-			t,
-			i[o],
-			d,
-			l
+			n,
+			a[s],
+			m,
+			u
 		])
 	});
 }
 //#endregion
-export { o as default };
+export { s as default };

package/dist/components/Button/ButtonLink.js

@@ -1,24 +1,26 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
+import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
+import { base as n, sizes as r, squareSizes as i, variants as a } from "./styles.js";
 /* empty css                     */
-import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/lib/components/Button/ButtonLink.tsx
-var s = "haze-ButtonLink__link", c = o(function({ variant: o = "solid", size: c = "md", square: l = !1, className: u, ...d }, f) {
-	let p = l ? r[c] : n[c];
-	return /* @__PURE__ */ a("a", {
-		ref: f,
-		...d,
+var c = "haze-ButtonLink__link", l = o(function({ variant: o = "solid", size: l, square: u = !1, className: d, ...f }, p) {
+	let m = t("ButtonLink"), h = l ?? m.size ?? "md", g = u ? i[h] : r[h];
+	return /* @__PURE__ */ s("a", {
+		ref: p,
+		"data-slot": "button-link",
+		...f,
 		className: e([
-			t,
-			i[o],
-			p,
-			s,
-			u
+			n,
+			a[o],
+			g,
+			c,
+			d
 		])
 	});
 });
 //#endregion
-export { c as default };
+export { l as default };