haze-ui 1.34.1 → 1.35.0

package/dist/components/NotificationCenter/NotificationCenter.js

@@ -0,0 +1,294 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { useConfigDefaults as r } from "../ConfigProvider/useConfigDefaults.js";
+import { FloatingPanel as i, useFloating as a } from "../../utils/floating.js";
+import ee from "../Badge/Badge.js";
+import { useFocusScope as o } from "../../utils/focus-scope.js";
+import { useMenuKeyboard as s, useRovingTabindex as c } from "../../utils/menuKeyboard.js";
+import l from "../Icon/Icon.js";
+/* empty css                             */
+import { c as u } from "react/compiler-runtime";
+import { useCallback as d, useId as te, useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useControl as h } from "react-use-control";
+//#region src/lib/components/NotificationCenter/NotificationCenter.tsx
+var g = "haze-NotificationCenter__container", _ = "haze-NotificationCenter__triggerBtn", v = "haze-NotificationCenter__badgeWrap", y = "haze-NotificationCenter__panelVisuals", b = "haze-NotificationCenter__panelHeader", x = "haze-NotificationCenter__panelTitle", S = "haze-NotificationCenter__notificationList", C = "haze-NotificationCenter__notificationItem", w = "haze-NotificationCenter__itemUnread", T = "haze-NotificationCenter__unreadDot", ne = "haze-NotificationCenter__itemIconWrap", re = {
+	info: "haze-NotificationCenter__info",
+	success: "haze-NotificationCenter__success",
+	warning: "haze-NotificationCenter__warning",
+	danger: "haze-NotificationCenter__danger"
+}, E = "haze-NotificationCenter__itemBody", D = "haze-NotificationCenter__itemTitle", O = "haze-NotificationCenter__itemDescription", k = "haze-NotificationCenter__itemTimestamp", A = "haze-NotificationCenter__panelActions", j = "haze-NotificationCenter__actionBtn", M = "haze-NotificationCenter__emptyState";
+function N() {
+	let e = u(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ m("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ p("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ p("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })]
+	}), e[0] = t) : t = e[0], t;
+}
+function P() {
+	let e = u(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ m("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ p("rect", {
+				x: "3",
+				y: "4",
+				width: "7",
+				height: "7",
+				rx: "1"
+			}),
+			/* @__PURE__ */ p("path", { d: "m5 7.5 1.5 1.5L9.5 5.5" }),
+			/* @__PURE__ */ p("path", { d: "M13 6h8" }),
+			/* @__PURE__ */ p("path", { d: "M13 12h8" }),
+			/* @__PURE__ */ p("path", { d: "M13 18h8" }),
+			/* @__PURE__ */ p("path", { d: "M3.5 13.5 5 15" }),
+			/* @__PURE__ */ p("path", { d: "M7.5 12.5 5 15l-1.5 4" })
+		]
+	}), e[0] = t) : t = e[0], t;
+}
+function F() {
+	let e = u(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ m("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ p("rect", {
+				x: "5",
+				y: "9",
+				width: "14",
+				height: "11",
+				rx: "2"
+			}),
+			/* @__PURE__ */ p("path", { d: "M12 9V5" }),
+			/* @__PURE__ */ p("circle", {
+				cx: "12",
+				cy: "3.5",
+				r: "1.5"
+			}),
+			/* @__PURE__ */ p("path", { d: "M9 14v1.5" }),
+			/* @__PURE__ */ p("path", { d: "M15 14v1.5" })
+		]
+	}), e[0] = t) : t = e[0], t;
+}
+function I() {
+	let e = u(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ m("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ p("rect", {
+				x: "6",
+				y: "6",
+				width: "12",
+				height: "12",
+				rx: "2"
+			}),
+			/* @__PURE__ */ p("rect", {
+				x: "10",
+				y: "10",
+				width: "4",
+				height: "4",
+				rx: "1"
+			}),
+			/* @__PURE__ */ p("path", { d: "M12 2v4" }),
+			/* @__PURE__ */ p("path", { d: "M12 18v4" }),
+			/* @__PURE__ */ p("path", { d: "M2 12h4" }),
+			/* @__PURE__ */ p("path", { d: "M18 12h4" })
+		]
+	}), e[0] = t) : t = e[0], t;
+}
+var L = {
+	task: /* @__PURE__ */ p(P, {}),
+	agent: /* @__PURE__ */ p(F, {}),
+	system: /* @__PURE__ */ p(I, {})
+}, R = ":where([data-slot='notification-item'], [data-slot='mark-all-read'], [data-slot='clear-all']):not([disabled])";
+function z({ items: u = [], open: P, maxBadgeCount: F = 99, onMarkAllRead: I, onClearAll: z, classNames: B, className: ie, ref: V, ...H }) {
+	let [U, W] = h(P, !1), G = n("notificationCenter"), K = r("NotificationCenter"), q = K.classNames ? {
+		...K.classNames,
+		...B
+	} : B, J = te(), Y = f(null), X = f(null), Z = a({
+		open: U,
+		setOpen: W,
+		triggerRef: Y,
+		panelRef: X,
+		animated: !0
+	});
+	c({
+		menuRef: X,
+		active: U,
+		selector: R
+	});
+	let ae = s({
+		menuRef: X,
+		onClose: () => W(!1),
+		selector: R
+	}), Q = o({
+		enabled: U,
+		autoFocus: !0,
+		returnFocus: !0
+	}), oe = d((e) => {
+		X.current = e, Q(e);
+	}, [Q]), $ = u.reduce((e, t) => t.read ? e : e + 1, 0), se = $ > 0 ? t(G.triggerLabelUnread, { count: $ }) : G.triggerLabel, ce = $ > F ? `${F}+` : String($);
+	return /* @__PURE__ */ m("span", {
+		ref: V,
+		"data-slot": "notification-center",
+		...H,
+		className: e([g, q?.root]),
+		children: [/* @__PURE__ */ m("button", {
+			ref: Y,
+			type: "button",
+			"data-slot": "trigger",
+			style: Z.triggerStyle,
+			"aria-haspopup": "dialog",
+			"aria-expanded": U,
+			"aria-controls": J,
+			"aria-label": se,
+			onPointerDown: Z.onTriggerPointerDown,
+			onClick: Z.onTriggerClick,
+			className: e([_, q?.trigger]),
+			children: [/* @__PURE__ */ p(l, {
+				size: "md",
+				children: /* @__PURE__ */ p(N, {})
+			}), $ > 0 && /* @__PURE__ */ p("span", {
+				"data-slot": "badge",
+				className: e([v, q?.badge]),
+				children: /* @__PURE__ */ p(ee, {
+					color: "danger",
+					size: "sm",
+					children: ce
+				})
+			})]
+		}), /* @__PURE__ */ m(i, {
+			ref: oe,
+			behavior: Z,
+			placement: "bottom-end",
+			id: J,
+			role: "dialog",
+			"aria-label": G.panelTitle,
+			visualClass: y,
+			className: e(q?.panel, ie),
+			onKeyDown: ae,
+			children: [
+				/* @__PURE__ */ p("div", {
+					"data-slot": "header",
+					className: e([b, q?.header]),
+					children: /* @__PURE__ */ p("h2", {
+						"data-slot": "title",
+						className: e([x, q?.title]),
+						children: G.panelTitle
+					})
+				}),
+				u.length > 0 ? /* @__PURE__ */ p("ul", {
+					"data-slot": "list",
+					className: e([S, q?.list]),
+					children: u.map((t) => {
+						let n = t.severity ?? "info", r = t.kind ?? "system", i = t.read !== !0;
+						return /* @__PURE__ */ m("li", {
+							"data-slot": "notification-item",
+							"data-severity": n,
+							"data-kind": r,
+							className: e([
+								C,
+								i && w,
+								q?.item
+							]),
+							children: [
+								i && /* @__PURE__ */ p("span", {
+									"data-slot": "unread-dot",
+									role: "img",
+									"aria-label": G.unreadLabel,
+									className: e([T, q?.unreadDot])
+								}),
+								/* @__PURE__ */ p("span", {
+									"data-slot": "item-icon",
+									className: e([
+										ne,
+										re[n],
+										q?.itemIcon
+									]),
+									children: /* @__PURE__ */ p(l, {
+										size: "sm",
+										children: L[r]
+									})
+								}),
+								/* @__PURE__ */ m("span", {
+									"data-slot": "item-body",
+									className: e([E, q?.itemBody]),
+									children: [
+										/* @__PURE__ */ p("span", {
+											"data-slot": "item-title",
+											className: e([D, q?.itemTitle]),
+											children: t.title
+										}),
+										t.description !== void 0 && /* @__PURE__ */ p("span", {
+											"data-slot": "item-description",
+											className: e([O, q?.itemDescription]),
+											children: t.description
+										}),
+										t.timestamp !== void 0 && /* @__PURE__ */ p("span", {
+											"data-slot": "item-timestamp",
+											className: e([k, q?.itemTimestamp]),
+											children: t.timestamp
+										})
+									]
+								})
+							]
+						}, t.key);
+					})
+				}) : /* @__PURE__ */ p("div", {
+					"data-slot": "empty",
+					className: e([M, q?.empty]),
+					children: G.empty
+				}),
+				/* @__PURE__ */ m("div", {
+					"data-slot": "actions",
+					className: e([A, q?.actions]),
+					children: [/* @__PURE__ */ p("button", {
+						type: "button",
+						"data-slot": "mark-all-read",
+						tabIndex: -1,
+						disabled: $ === 0,
+						onClick: I,
+						className: e([j, q?.markAllRead]),
+						children: G.markAllRead
+					}), /* @__PURE__ */ p("button", {
+						type: "button",
+						"data-slot": "clear-all",
+						tabIndex: -1,
+						disabled: u.length === 0,
+						onClick: z,
+						className: e([j, q?.clearAll]),
+						children: G.clearAll
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { z as default };

package/dist/components/NotificationCenter/index.js

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

package/dist/components/Tabs/Tab.js

@@ -25,89 +25,97 @@ function y(t) {
 		className: e([f, a])
 	}), n[0] = a, n[1] = s), s;
 }
-function b({ value: i, icon: f, status: p, statusLabel: b, closable: x = !1, closeLabel: S, onClose: C, disabled: w = !1, className: T, children: E }) {
-	let { value: D, setValue: O, variant: k, classNames: A } = n(), j = t("tabs"), M = D === i, N = r[k], P = (e) => {
+function b({ value: i, icon: f, status: p, statusLabel: b, closable: x = !1, closeLabel: S, onClose: C, disabled: w = !1, as: T, className: E, children: D, onClick: O, ...k }) {
+	let { value: A, setValue: j, variant: M, classNames: N } = n(), P = t("tabs"), F = A === i, I = r[M], L = T ?? "button", R = T === void 0 || T === "button", z = (e) => {
 		e.stopPropagation(), C?.(e);
-	}, F = () => {
-		w || O(i);
-	}, I = /* @__PURE__ */ s(a, { children: [
+	}, B = () => {
+		w || j(i);
+	}, V = (e) => {
+		O?.(e), B();
+	}, H = /* @__PURE__ */ s(a, { children: [
 		f !== void 0 && /* @__PURE__ */ o("span", {
 			"data-slot": "icon",
 			"aria-hidden": "true",
 			className: e(d),
 			children: f
 		}),
-		E,
+		D,
 		p !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(y, { status: p }), /* @__PURE__ */ o("span", {
 			className: e(m),
-			children: b ?? j[v[p]]
+			children: b ?? P[v[p]]
 		})] })
 	] });
-	return x ? /* @__PURE__ */ s("div", {
+	if (!x) return /* @__PURE__ */ o(L, {
+		...R ? {
+			type: "button",
+			disabled: w
+		} : { "aria-disabled": w || void 0 },
 		"data-slot": "tab",
-		"data-variant": k,
+		"data-variant": M,
 		role: "tab",
-		"aria-selected": M,
-		"aria-disabled": w || void 0,
+		"aria-selected": F,
 		"aria-controls": `tabpanel-${i}`,
-		tabIndex: M ? 0 : -1,
+		tabIndex: F ? 0 : -1,
 		"data-haze-tab-value": i,
-		onKeyDown: (e) => {
-			if (!w) {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault(), O(i);
-					return;
-				}
-				e.key === "Delete" && (e.preventDefault(), C?.(e));
+		...k,
+		onClick: V,
+		className: e([
+			c,
+			I.idle,
+			F && l,
+			F && I.active,
+			w && u,
+			E,
+			N?.tab
+		]),
+		children: H
+	});
+	let U = (e) => {
+		if (!w) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), j(i);
+				return;
 			}
-		},
-		onClick: F,
+			e.key === "Delete" && (e.preventDefault(), C?.(e));
+		}
+	};
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "tab",
+		"data-variant": M,
+		role: "tab",
+		"aria-selected": F,
+		"aria-disabled": w || void 0,
+		"aria-controls": `tabpanel-${i}`,
+		tabIndex: F ? 0 : -1,
+		"data-haze-tab-value": i,
+		...k,
+		onKeyDown: U,
+		onClick: V,
 		className: e([
 			c,
-			N.idle,
-			M && l,
-			M && N.active,
+			I.idle,
+			F && l,
+			F && I.active,
 			w && u,
 			_,
-			T,
-			A?.tab
+			E,
+			N?.tab
 		]),
 		children: [/* @__PURE__ */ o("span", {
 			"data-slot": "tab-label",
 			className: e(h),
-			children: I
+			children: H
 		}), /* @__PURE__ */ o("span", {
 			role: "button",
 			"data-slot": "tab-close",
-			"aria-label": S ?? j.close,
-			onClick: P,
+			"aria-label": S ?? P.close,
+			onClick: z,
 			className: e(g),
 			children: /* @__PURE__ */ o("span", {
 				"aria-hidden": "true",
 				children: "×"
 			})
 		})]
-	}) : /* @__PURE__ */ o("button", {
-		type: "button",
-		"data-slot": "tab",
-		"data-variant": k,
-		role: "tab",
-		"aria-selected": M,
-		"aria-controls": `tabpanel-${i}`,
-		tabIndex: M ? 0 : -1,
-		"data-haze-tab-value": i,
-		disabled: w,
-		onClick: F,
-		className: e([
-			c,
-			N.idle,
-			M && l,
-			M && N.active,
-			w && u,
-			T,
-			A?.tab
-		]),
-		children: I
 	});
 }
 //#endregion

package/dist/components/TaskList/TaskList.js

@@ -0,0 +1,96 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import t from "../Checkbox/CheckboxCore.js";
+/* empty css                   */
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useControl as a } from "react-use-control";
+//#region src/lib/components/TaskList/TaskList.tsx
+var o = "haze-TaskList__list", s = "haze-TaskList__item", c = "haze-TaskList__row", l = "haze-TaskList__rowLabel", u = "haze-TaskList__indicatorSlot", d = "haze-TaskList__body", f = "haze-TaskList__titleStyle", p = "haze-TaskList__titleDone", m = "haze-TaskList__descriptionStyle", h = "haze-TaskList__actionsStyle";
+function g(o) {
+	let g = n(38), _, v, y, b, x, S, C, w;
+	g[0] === o ? (_ = g[1], v = g[2], y = g[3], b = g[4], x = g[5], S = g[6], C = g[7], w = g[8]) : ({checked: v, onCheckedChange: S, title: w, description: b, indicator: x, actions: _, className: y, ...C} = o, g[0] = o, g[1] = _, g[2] = v, g[3] = y, g[4] = b, g[5] = x, g[6] = S, g[7] = C, g[8] = w);
+	let [T, E] = a(v, !1), D;
+	g[9] !== S || g[10] !== E ? (D = (e) => {
+		E(e), S?.(e);
+	}, g[9] = S, g[10] = E, g[11] = D) : D = g[11];
+	let O = D, k;
+	g[12] === Symbol.for("react.memo_cache_sentinel") ? (k = [d], g[12] = k) : k = g[12];
+	let A = T && p, j;
+	g[13] === A ? j = g[14] : (j = [f, A], g[13] = A, g[14] = j);
+	let M;
+	g[15] !== j || g[16] !== w ? (M = /* @__PURE__ */ r("div", {
+		"data-slot": "task-title",
+		className: e(j),
+		children: w
+	}), g[15] = j, g[16] = w, g[17] = M) : M = g[17];
+	let N;
+	g[18] === b ? N = g[19] : (N = b && /* @__PURE__ */ r("div", {
+		"data-slot": "task-description",
+		className: e([m]),
+		children: b
+	}), g[18] = b, g[19] = N);
+	let P;
+	g[20] !== M || g[21] !== N ? (P = /* @__PURE__ */ i("div", {
+		"data-slot": "task-body",
+		className: e(k),
+		children: [M, N]
+	}), g[20] = M, g[21] = N, g[22] = P) : P = g[22];
+	let F = P, I;
+	g[23] === y ? I = g[24] : (I = [s, y], g[23] = y, g[24] = I);
+	let L;
+	g[25] !== F || g[26] !== T || g[27] !== O || g[28] !== x ? (L = x ? /* @__PURE__ */ i("div", {
+		"data-slot": "task-row",
+		className: e([c]),
+		children: [/* @__PURE__ */ r("span", {
+			"data-slot": "task-indicator",
+			className: e([u]),
+			children: x
+		}), F]
+	}) : /* @__PURE__ */ i("label", {
+		"data-slot": "task-row",
+		className: e([c, l]),
+		children: [/* @__PURE__ */ r(t, {
+			checked: T,
+			onChange: O
+		}), F]
+	}), g[25] = F, g[26] = T, g[27] = O, g[28] = x, g[29] = L) : L = g[29];
+	let R;
+	g[30] === _ ? R = g[31] : (R = _ && /* @__PURE__ */ r("div", {
+		"data-slot": "task-actions",
+		className: e([h]),
+		children: _
+	}), g[30] = _, g[31] = R);
+	let z;
+	return g[32] !== T || g[33] !== C || g[34] !== R || g[35] !== I || g[36] !== L ? (z = /* @__PURE__ */ i("li", {
+		"data-slot": "task-item",
+		"data-checked": T,
+		...C,
+		className: e(I),
+		children: [L, R]
+	}), g[32] = T, g[33] = C, g[34] = R, g[35] = I, g[36] = L, g[37] = z) : z = g[37], z;
+}
+function _(t) {
+	let i = n(15), a, s, c, l;
+	i[0] === t ? (a = i[1], s = i[2], c = i[3], l = i[4]) : ({items: c, children: a, className: s, ...l} = t, i[0] = t, i[1] = a, i[2] = s, i[3] = c, i[4] = l);
+	let u = c !== void 0;
+	u && a != null && console.error("[haze-ui] TaskList: `items` and compound `children` are mutually exclusive — rendering `items` and ignoring `children`.");
+	let d;
+	i[5] === s ? d = i[6] : (d = [o, s], i[5] = s, i[6] = d);
+	let f;
+	i[7] !== a || i[8] !== c || i[9] !== u ? (f = u ? c.map(v) : a, i[7] = a, i[8] = c, i[9] = u, i[10] = f) : f = i[10];
+	let p;
+	return i[11] !== l || i[12] !== d || i[13] !== f ? (p = /* @__PURE__ */ r("ul", {
+		"data-slot": "task-list",
+		...l,
+		className: e(d),
+		children: f
+	}), i[11] = l, i[12] = d, i[13] = f, i[14] = p) : p = i[14], p;
+}
+function v(e) {
+	let { key: t, ...n } = e;
+	return /* @__PURE__ */ r(g, { ...n }, t);
+}
+//#endregion
+export { g as TaskListItem, _ as default };

package/dist/components/TaskList/index.js

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

package/dist/components/Toggle/Toggle.js

@@ -6,18 +6,18 @@ import { useControl as r } from "react-use-control";
 //#region src/lib/components/Toggle/Toggle.tsx
 function i(i) {
 	let a = t(17), o, s, c, l, u, d, f;
-	a[0] === i ? (o = a[1], s = a[2], c = a[3], l = a[4], u = a[5], d = a[6], f = a[7]) : ({pressed: c, size: d, square: f, className: o, onClick: s, ref: l, ...u} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = c, a[4] = l, a[5] = u, a[6] = d, a[7] = f);
-	let [p, m] = r(c, !1), h;
-	return a[8] !== o || a[9] !== s || a[10] !== p || a[11] !== l || a[12] !== u || a[13] !== m || a[14] !== d || a[15] !== f ? (h = /* @__PURE__ */ n(e, {
-		ref: l,
+	a[0] === i ? (o = a[1], s = a[2], c = a[3], l = a[4], u = a[5], d = a[6], f = a[7]) : ({pressed: l, size: d, square: f, as: o, className: s, onClick: c, ...u} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = c, a[4] = l, a[5] = u, a[6] = d, a[7] = f);
+	let [p, m] = r(l, !1), h = u, g;
+	return a[8] !== o || a[9] !== s || a[10] !== c || a[11] !== p || a[12] !== m || a[13] !== d || a[14] !== f || a[15] !== h ? (g = /* @__PURE__ */ n(e, {
+		...h,
+		as: o,
 		pressed: p,
 		onPressedChange: m,
-		onNativeClick: s,
+		onNativeClick: c,
 		size: d,
 		square: f,
-		className: o,
-		...u
-	}), a[8] = o, a[9] = s, a[10] = p, a[11] = l, a[12] = u, a[13] = m, a[14] = d, a[15] = f, a[16] = h) : h = a[16], h;
+		className: s
+	}), a[8] = o, a[9] = s, a[10] = c, a[11] = p, a[12] = m, a[13] = d, a[14] = f, a[15] = h, a[16] = g) : g = a[16], g;
 }
 //#endregion
 export { i as default };

package/dist/components/Toggle/ToggleCore.js

@@ -9,11 +9,10 @@ var a = {
 	rest: "haze-ToggleCore__rest",
 	pressed: "haze-ToggleCore__pressed"
 };
-function o({ pressed: o, onPressedChange: s, onNativeClick: c, size: l = "md", square: u = !1, className: d, ref: f, ...p }) {
+function o({ pressed: o, onPressedChange: s, onNativeClick: c, size: l = "md", square: u = !1, as: d, className: f, ...p }) {
 	let m = u ? r[l] : n[l];
-	return /* @__PURE__ */ i("button", {
-		ref: f,
-		type: "button",
+	return /* @__PURE__ */ i(d ?? "button", {
+		...d === void 0 || d === "button" ? { type: "button" } : {},
 		"aria-pressed": o,
 		"data-slot": "toggle",
 		onClick: (e) => {
@@ -24,7 +23,7 @@ function o({ pressed: o, onPressedChange: s, onNativeClick: c, size: l = "md", s
 			t,
 			a[o ? "pressed" : "rest"],
 			m,
-			d
+			f
 		])
 	});
 }

package/dist/components/Toolbar/ToolbarButton.js

@@ -6,20 +6,20 @@ import { base as t, sizes as n, squareSizes as r, variants as i } from "../Butto
 import { jsx as a } from "react/jsx-runtime";
 //#region src/lib/components/Toolbar/ToolbarButton.tsx
 var o = "haze-ToolbarButton__toolbarItem";
-function s({ variant: s = "ghost", size: c = "md", square: l = !1, className: u, ...d }) {
-	let f = l ? r[c] : n[c];
-	return /* @__PURE__ */ a("button", {
-		type: "button",
+function s({ variant: s = "ghost", size: c = "md", square: l = !1, as: u, className: d, ...f }) {
+	let p = l ? r[c] : n[c];
+	return /* @__PURE__ */ a(u ?? "button", {
+		...u === void 0 || u === "button" ? { type: "button" } : {},
 		"data-slot": "toolbar-button",
 		"data-haze-toolbar-item": "",
 		tabIndex: -1,
-		...d,
+		...f,
 		className: e([
 			t,
 			i[s],
-			f,
+			p,
 			o,
-			u
+			d
 		])
 	});
 }

package/dist/components/Toolbar/ToolbarToggle.js

@@ -7,24 +7,24 @@ import { jsx as a } from "react/jsx-runtime";
 import { useControl as o } from "react-use-control";
 //#region src/lib/components/Toolbar/ToolbarToggle.tsx
 var s = "haze-ToolbarToggle__toolbarItem";
-function c({ pressed: c, variant: l = "ghost", size: u = "md", square: d = !1, className: f, onClick: p, ...m }) {
-	let [h, g] = o(c, !1), _ = d ? r[u] : n[u];
-	return /* @__PURE__ */ a("button", {
-		type: "button",
+function c({ pressed: c, variant: l = "ghost", size: u = "md", square: d = !1, as: f, className: p, onClick: m, ...h }) {
+	let [g, _] = o(c, !1), v = d ? r[u] : n[u];
+	return /* @__PURE__ */ a(f ?? "button", {
+		...f === void 0 || f === "button" ? { type: "button" } : {},
 		"data-slot": "toolbar-toggle",
 		"data-haze-toolbar-item": "",
 		tabIndex: -1,
-		"aria-pressed": h,
+		"aria-pressed": g,
 		onClick: (e) => {
-			g(!h), p?.(e);
+			_(!g), m?.(e);
 		},
-		...m,
+		...h,
 		className: e([
 			t,
 			i[l],
-			_,
+			v,
 			s,
-			f
+			p
 		])
 	});
 }