@jfrader/ui 0.5.0 → 0.6.0

package/dist/{toast-BHxI32ZA.js → toast-CSAbl5yK.js}

@@ -1,10 +1,11 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n, r } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t, r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
 import { t as i } from "./renderable-DzcIj1Lo.js";
-import { t as a } from "./button-C92uYFJW.js";
-import { i as o, t as s } from "./theme-scope-t7nAKc2c.js";
-import { t as c } from "./spinner-DtxvDPdM.js";
+import { t as a } from "./button-C6OV0C7J.js";
+import { l as o, n as s } from "./theme-scope-DGWy4H0C.js";
+import { t as c } from "./spinner-CvzajSg9.js";
 import { createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
 import { vars as v } from "@jfrader/tokens/vars";
 import { Fragment as y, jsx as b, jsxs as x } from "@emotion/react/jsx-runtime";
@@ -46,11 +47,11 @@ var C = 4, w = 5e3, T = "Dismiss", E = 100, D = "min(380px, calc(100vw - 32px))"
 		transform: `translateY(${v.space[2]})`,
 		pointerEvents: "none"
 	},
-	[r]: {
+	[n]: {
 		transitionDuration: "0s",
-		transform: "none"
+		"&[data-state=\"closing\"]": { transform: "none" }
 	},
-	[n]: {
+	[t]: {
 		backgroundColor: "Canvas",
 		color: "CanvasText",
 		borderColor: "CanvasText"
@@ -65,7 +66,8 @@ var C = 4, w = 5e3, T = "Dismiss", E = 100, D = "min(380px, calc(100vw - 32px))"
 	display: "grid",
 	gap: v.space[1],
 	alignSelf: "center",
-	minInlineSize: 0
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
 }), F = e({
 	margin: 0,
 	fontSize: v.textSize.sm,
@@ -83,28 +85,40 @@ var C = 4, w = 5e3, T = "Dismiss", E = 100, D = "min(380px, calc(100vw - 32px))"
 	gridColumn: "1 / -1",
 	display: "flex",
 	gap: v.space[2]
+}), B = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	blockSize: "auto",
+	minBlockSize: "32px",
+	paddingBlock: v.space[2],
+	whiteSpace: "normal",
+	overflowWrap: "anywhere"
 });
-function B(e) {
+function V(e) {
 	let t = d(A);
 	if (!t) throw Error(`Toast.${e} must be rendered inside <Toast.Provider>.`);
 	return t;
 }
-function V() {
+function H() {
 	let e = d(k);
 	if (!e) throw Error("useToast() must be called inside <Toast.Provider>.");
 	return e;
 }
-function H({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
-	let i = p(), a = g(0), [o, s] = _([]), c = g([]), l = g(/* @__PURE__ */ new Map()), d = g(null), f = g(0), v = u(() => (f.current += 1, process.env.NODE_ENV !== "production" && f.current > 1 && console.warn("Mount only one Toast queue renderer per provider."), () => {
-		--f.current;
-	}), []), y = Math.max(1, Math.floor(Number.isFinite(t) ? t : C)), x = u((e, t) => {
-		t ? l.current.set(e, t) : l.current.delete(e);
-	}, []), S = u((e, t) => {
+function U({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
+	let i = p(), a = g(0), [o, s] = _([]), c = g([]), l = g(!0), d = g(/* @__PURE__ */ new Map()), f = g(null), v = g(0);
+	m(() => (l.current = !0, () => {
+		l.current = !1;
+	}), []);
+	let y = u(() => (v.current += 1, process.env.NODE_ENV !== "production" && v.current > 1 && console.warn("Mount only one Toast queue renderer per provider."), () => {
+		--v.current;
+	}), []), x = Math.max(1, Math.floor(Number.isFinite(t) ? t : C)), S = u((e, t) => {
+		t ? d.current.set(e, t) : d.current.delete(e);
+	}, []), E = u((e, t) => {
 		for (let n of e) {
-			let e = l.current.get(n.id);
+			let e = d.current.get(n.id);
 			if (!e?.contains(e.ownerDocument.activeElement)) continue;
 			let r = e.closest("[data-ui=\"toast-stack-list\"], [data-ui=\"toast-viewport\"]") ?? e.parentElement;
-			r && (d.current = {
+			r && (f.current = {
 				container: r,
 				ids: new Set(t.filter((e) => e.state === "open").map((e) => e.id))
 			});
@@ -112,26 +126,29 @@ function H({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
 		}
 	}, []);
 	m(() => {
-		let e = d.current;
-		e && (d.current = null, Array.from(e.container.querySelectorAll("[data-ui=\"toast\"]")).find((t) => e.ids.has(t.dataset.toastId))?.querySelector("[data-toast-dismiss]")?.focus());
+		let e = f.current;
+		e && (f.current = null, Array.from(e.container.querySelectorAll("[data-ui=\"toast\"]")).find((t) => e.ids.has(t.dataset.toastId))?.querySelector("[data-toast-dismiss]")?.focus());
 	}, [o]);
-	let E = u((e) => {
+	let D = u((e) => {
 		a.current += 1;
-		let t = `${i}toast-${a.current}`, r = {
+		let t = `${i}toast-${a.current}`;
+		if (!l.current) return t;
+		let r = {
 			id: t,
 			options: {
 				...e,
 				duration: e.duration === void 0 ? e.loading ? null : n : e.duration
 			},
 			state: "open"
-		}, o = c.current, l = [...o, r].slice(-y);
-		return S(o.filter((e) => !l.includes(e)), l), c.current = l, s(l), t;
+		}, o = c.current, u = [...o, r].slice(-x);
+		return E(o.filter((e) => !u.includes(e)), u), c.current = u, s(u), t;
 	}, [
 		i,
-		y,
+		x,
 		n,
-		S
-	]), D = u((e, t) => {
+		E
+	]), O = u((e, t) => {
+		if (!l.current) return;
 		let r = c.current.map((r) => {
 			if (r.id !== e || r.state !== "open") return r;
 			let i = {
@@ -144,65 +161,67 @@ function H({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
 			};
 		});
 		c.current = r, s(r);
-	}, [n]), O = u((e) => {
+	}, [n]), j = u((e) => {
+		if (!l.current) return;
 		let t = c.current;
-		S(t.filter((t) => t.id === e), t.filter((t) => t.id !== e));
+		E(t.filter((t) => t.id === e), t.filter((t) => t.id !== e));
 		let n = t.map((t) => t.id === e && t.state === "open" ? {
 			...t,
 			state: "closing"
 		} : t);
 		c.current = n, s(n);
-	}, [S]), j = u((e) => {
+	}, [E]), M = u((e) => {
+		if (!l.current) return;
 		let t = c.current, n = t.filter((t) => t.id !== e);
-		S(t.filter((t) => t.id === e), n), c.current = n, s(n);
-	}, [S]), M = h(() => ({
-		toast: E,
-		dismiss: O,
-		update: D
+		E(t.filter((t) => t.id === e), n), c.current = n, s(n);
+	}, [E]), N = h(() => ({
+		toast: D,
+		dismiss: j,
+		update: O
 	}), [
-		E,
-		O,
-		D
-	]), N = h(() => ({
+		D,
+		j,
+		O
+	]), P = h(() => ({
 		toasts: o,
-		dismiss: O,
-		remove: j,
-		registerRoot: x,
+		dismiss: j,
+		remove: M,
+		registerRoot: S,
 		dismissLabel: r,
-		registerRenderer: v
+		registerRenderer: y
 	}), [
 		o,
-		O,
 		j,
-		x,
+		M,
+		S,
 		r,
-		v
+		y
 	]);
 	return /* @__PURE__ */ b(k.Provider, {
-		value: M,
+		value: N,
 		children: /* @__PURE__ */ b(A.Provider, {
-			value: N,
+			value: P,
 			children: e
 		})
 	});
 }
-H.displayName = "Toast.Provider";
-function U({ ref: e, className: n, sx: r, ...i }) {
-	let { toasts: a, registerRenderer: o } = B("Viewport");
-	return f(o, [o]), /* @__PURE__ */ b(W, { children: /* @__PURE__ */ b(t, {
-		className: n,
+U.displayName = "Toast.Provider";
+function W({ ref: e, className: t, sx: n, ...i }) {
+	let { toasts: a, registerRenderer: o } = V("Viewport");
+	return f(o, [o]), /* @__PURE__ */ b(G, { children: /* @__PURE__ */ b(r, {
+		className: t,
 		styles: j,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ b("div", {
 			...i,
 			ref: e,
 			"data-ui": "toast-viewport",
 			className: t,
-			children: a.map((e) => /* @__PURE__ */ b(G, { record: e }, e.id))
+			children: a.map((e) => /* @__PURE__ */ b(K, { record: e }, e.id))
 		})
 	}) });
 }
-function W({ children: e, contained: t = !1 }) {
+function G({ children: e, contained: t = !1 }) {
 	let n = g(null), [r, i] = _(null), a = o()?.portalContainer, c = a === void 0 ? r : a;
 	return f(() => {
 		i(n.current?.ownerDocument.body ?? null);
@@ -211,32 +230,32 @@ function W({ children: e, contained: t = !1 }) {
 		ref: n
 	}), t ? e : c && S(/* @__PURE__ */ b(s, { children: e }), c)] });
 }
-U.displayName = "Toast.Viewport";
-function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o, escapeDismiss: s = !1 }) {
-	let { dismiss: l, remove: d, registerRoot: p, dismissLabel: m } = B("Viewport"), { id: h, options: v, state: S } = e, { title: C, description: w, tone: T = "neutral", action: D, loading: O } = v, k = v.duration, A = g(null), j = u((e) => {
+W.displayName = "Toast.Viewport";
+function K({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o, escapeDismiss: s = !1 }) {
+	let { dismiss: l, remove: d, registerRoot: p, dismissLabel: m } = V("Viewport"), { id: h, options: v, state: S } = e, { title: C, description: w, tone: T = "neutral", action: D, loading: O } = v, k = v.duration, A = g(null), j = u((e) => {
 		A.current = e, p(h, e);
-	}, [h, p]), [V, H] = _(!1), [U, W] = _(!1), [G, q] = _(!1), J = g(k ?? 0), [Y, X] = _(!1);
+	}, [h, p]), [H, U] = _(!1), [W, G] = _(!1), [K, J] = _(!1), Y = g(k ?? 0), [X, Z] = _(!1);
 	f(() => {
 		let e = A.current?.ownerDocument;
 		if (!e) return;
-		let t = () => X(e.hidden);
+		let t = () => Z(e.hidden);
 		return t(), e.addEventListener("visibilitychange", t), () => e.removeEventListener("visibilitychange", t);
 	}, []), f(() => {
-		J.current = k ?? 0;
+		Y.current = k ?? 0;
 	}, [k]), f(() => {
-		if (!t || V) return;
-		let e = setTimeout(() => H(!0), E);
+		if (!t || H) return;
+		let e = setTimeout(() => U(!0), E);
 		return () => clearTimeout(e);
-	}, [t, V]);
-	let Z = V && t && !n && !Y && S === "open" && k !== null && !U && !G;
+	}, [t, H]);
+	let Q = H && t && !n && !X && S === "open" && k !== null && !W && !K;
 	return f(() => {
-		if (!Z) return;
-		let e = performance.now(), t = setTimeout(() => l(h), J.current);
+		if (!Q) return;
+		let e = performance.now(), t = setTimeout(() => l(h), Y.current);
 		return () => {
-			clearTimeout(t), J.current -= performance.now() - e;
+			clearTimeout(t), Y.current -= performance.now() - e;
 		};
 	}, [
-		Z,
+		Q,
 		l,
 		h,
 		k
@@ -265,13 +284,13 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 		"data-ui": "toast",
 		"data-tone": T,
 		"data-state": S,
-		"data-populated": V,
+		"data-populated": H,
 		"data-exposed": t,
-		onPointerEnter: () => W(!0),
-		onPointerLeave: () => W(!1),
-		onFocus: () => q(!0),
+		onPointerEnter: () => G(!0),
+		onPointerLeave: () => G(!1),
+		onFocus: () => J(!0),
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || q(!1);
+			e.currentTarget.contains(e.relatedTarget) || J(!1);
 		},
 		css: [M, N[T]],
 		children: [
@@ -279,7 +298,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 				role: T === "danger" ? "alert" : "status",
 				"aria-atomic": "true",
 				css: P,
-				children: V && /* @__PURE__ */ x(y, { children: [i(C) && /* @__PURE__ */ b("div", {
+				children: H && /* @__PURE__ */ x(y, { children: [i(C) && /* @__PURE__ */ b("div", {
 					css: F,
 					children: C
 				}), i(w) && /* @__PURE__ */ b("div", {
@@ -292,7 +311,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 				label: "",
 				size: "sm"
 			}),
-			(V || s && t) && /* @__PURE__ */ x("div", {
+			(H || s && t) && /* @__PURE__ */ x("div", {
 				css: R,
 				children: [/* @__PURE__ */ b(a, {
 					variant: "ghost",
@@ -301,7 +320,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 					"data-toast-dismiss": "",
 					onClick: () => l(h),
 					css: L,
-					children: /* @__PURE__ */ b(K, {})
+					children: /* @__PURE__ */ b(q, {})
 				}), D && /* @__PURE__ */ b("div", {
 					css: z,
 					children: /* @__PURE__ */ b(a, {
@@ -310,6 +329,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 						onClick: (e) => {
 							D?.onClick(e), e.defaultPrevented || l(h);
 						},
+						css: B,
 						children: D.label
 					})
 				})]
@@ -317,7 +337,7 @@ function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o,
 		]
 	});
 }
-function K() {
+function q() {
 	return /* @__PURE__ */ x("svg", {
 		"aria-hidden": "true",
 		viewBox: "0 0 16 16",
@@ -340,13 +360,13 @@ function K() {
 		})]
 	});
 }
-function q(e) {
-	return /* @__PURE__ */ b(H, { ...e });
+function J(e) {
+	return /* @__PURE__ */ b(U, { ...e });
 }
-q.displayName = "Toast";
-var J = Object.assign(q, {
-	Provider: H,
-	Viewport: U
+J.displayName = "Toast";
+var Y = Object.assign(J, {
+	Provider: U,
+	Viewport: W
 });
 //#endregion
-export { V as a, W as i, J as n, B as o, G as r, D as t };
+export { H as a, G as i, Y as n, V as o, K as r, D as t };

package/dist/{toast-stack-DqrAzdg5.js → toast-stack-BCR4Cu7V.js}

@@ -1,8 +1,9 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { r as n } from "./media-8yrN85VT.js";
-import { t as r } from "./button-C92uYFJW.js";
-import { i, o as a, r as o, t as s } from "./toast-BHxI32ZA.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { r as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { t as r } from "./button-C6OV0C7J.js";
+import { i, o as a, r as o, t as s } from "./toast-CSAbl5yK.js";
 import { useEffect as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
 import { vars as p } from "@jfrader/tokens/vars";
 import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
@@ -43,7 +44,7 @@ var g = e({
 	transitionProperty: "block-size",
 	transitionDuration: p.motion.duration.base,
 	transitionTimingFunction: p.motion.easeStandard,
-	[n]: { transitionDuration: "0s" }
+	[t]: { transitionDuration: "0s" }
 }), v = e({
 	position: "absolute",
 	insetInline: 0,
@@ -53,13 +54,13 @@ var g = e({
 	transitionDuration: p.motion.duration.base,
 	transitionTimingFunction: p.motion.easeStandard,
 	"&[data-stack-visible=\"false\"]": { visibility: "hidden" },
-	[n]: { transitionDuration: "0s" }
+	[t]: { transitionDuration: "0s" }
 }), y = e({
 	pointerEvents: "auto",
 	justifySelf: "end",
 	minBlockSize: p.space[8]
 });
-function b({ ref: e, className: n, sx: i, variant: s = "stacked", position: b = "bottom-end", contained: x = !1, maxVisible: S = 3, label: C = "Notifications", hotkey: w = !1, expandLabel: T = "Expand notifications", collapseLabel: E = "Collapse notifications", slotProps: D, onPointerEnter: O, onPointerLeave: ee, onFocus: te, onBlur: ne, onKeyDown: k, ...A }) {
+function b({ ref: e, className: t, sx: i, variant: s = "stacked", position: b = "bottom-end", contained: x = !1, maxVisible: S = 3, label: C = "Notifications", hotkey: w = !1, expandLabel: T = "Expand notifications", collapseLabel: E = "Collapse notifications", slotProps: D, onPointerEnter: O, onPointerLeave: ee, onFocus: te, onBlur: ne, onKeyDown: k, ...A }) {
 	let { toasts: j, registerRenderer: M } = a("Stack"), N = d(null), P = d(null), F = l(), [I, L] = f(!1), [R, z] = f(!1), [B, V] = f(!1), [H, U] = f({}), W = d(/* @__PURE__ */ new Map()), G = [...j].reverse(), K = G.filter((e) => e.state === "open"), q = Math.max(1, Math.floor(Number.isFinite(S) ? S : 3)), J = s === "list" || I || R || B, Y = I || R || B;
 	c(M, [M]), c(() => {
 		K.length || V(!1);
@@ -98,9 +99,23 @@ function b({ ref: e, className: n, sx: i, variant: s = "stacked", position: b =
 		Z.forEach((e, t) => W.current.set(t, e));
 		for (let e of W.current.keys()) G.some((t) => t.id === e) || W.current.delete(e);
 	}), K.length && (X = J ? `calc(${Q}px + ${K.length - 1} * ${p.space[2]})` : `calc(${H[K[0].id] ?? 0}px + ${Math.min(K.length, q) - 1} * ${p.space[3]})`);
-	let $ = Math.max(0, K.length - q);
-	return /* @__PURE__ */ m(t, {
-		className: n,
+	let $ = Math.max(0, K.length - q), re = K[0]?.id;
+	return c(() => {
+		let e = N.current, t = P.current;
+		if (!e || !t || R) return;
+		let n = !1, r = typeof t.getAnimations == "function" ? t.getAnimations() : [];
+		return Promise.allSettled(r.map((e) => e.finished)).then(() => {
+			n || (e.scrollTop = e.scrollHeight);
+		}), () => {
+			n = !0;
+		};
+	}, [
+		X,
+		re,
+		J,
+		R
+	]), /* @__PURE__ */ m(n, {
+		className: t,
 		styles: g,
 		sx: i,
 		children: (t) => /* @__PURE__ */ h("div", {

package/dist/toast-stack.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ToastStack } from "./toast-stack-DqrAzdg5.js";
+export { t as ToastStack } from "./toast-stack-BCR4Cu7V.js";

package/dist/toast.js

@@ -1,2 +1,2 @@
 'use client';
-export { n as Toast, a as useToast } from "./toast-BHxI32ZA.js";
+export { n as Toast, a as useToast } from "./toast-CSAbl5yK.js";

package/dist/{toggle-group-fcjzpifI.js → toggle-group-C7ye1v4s.js}

@@ -1,7 +1,8 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
 import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
 import { t as c } from "./use-controlled-state-DpeVQZNR.js";
 import { createContext as l, useContext as u, useEffect as d, useImperativeHandle as f, useMemo as p, useRef as m, useState as h } from "react";
@@ -71,22 +72,22 @@ var b = [], x = (e, t) => {
 		opacity: .55,
 		cursor: "not-allowed"
 	},
-	"&:focus-visible": { ...n },
-	[i]: { transitionDuration: "0s" },
-	[r]: { "&[aria-pressed=\"true\"]": {
+	"&:focus-visible": { ...t },
+	[r]: { transitionDuration: "0s" },
+	[n]: { "&[aria-pressed=\"true\"]": {
 		backgroundColor: "SelectedItem",
 		borderColor: "SelectedItem",
 		color: "SelectedItemText"
 	} }
 });
-function D({ ref: e, type: n = "single", value: r, defaultValue: i, onValueChange: l, orientation: u = "horizontal", disabled: g = !1, allowEmpty: y = !1, label: b, "aria-label": C, onKeyDown: E, className: D, sx: O, ...k }) {
-	let [A, j] = c(r, i, l), [M, N] = h(null), P = m(null);
+function D({ ref: e, type: t = "single", value: n, defaultValue: r, onValueChange: l, orientation: u = "horizontal", disabled: g = !1, allowEmpty: y = !1, label: b, "aria-label": C, onKeyDown: E, className: D, sx: O, ...k }) {
+	let [A, j] = c(n, r, l), [M, N] = h(null), P = m(null);
 	f(e, () => P.current, []);
-	let F = p(() => x(A, n), [A, n]), I = p(() => ({
+	let F = p(() => x(A, t), [A, t]), I = p(() => ({
 		pressed: F,
 		toggle: (e) => {
-			let t = F.includes(e);
-			n === "multiple" ? j(t ? F.filter((t) => t !== e) : [...F, e]) : t ? y && j("") : j(e);
+			let n = F.includes(e);
+			t === "multiple" ? j(n ? F.filter((t) => t !== e) : [...F, e]) : n ? y && j("") : j(e);
 		},
 		focused: M,
 		setFocused: N,
@@ -94,7 +95,7 @@ function D({ ref: e, type: n = "single", value: r, defaultValue: i, onValueChang
 	}), [
 		F,
 		j,
-		n,
+		t,
 		y,
 		M,
 		g
@@ -114,7 +115,7 @@ function D({ ref: e, type: n = "single", value: r, defaultValue: i, onValueChang
 	};
 	return /* @__PURE__ */ _(v.Provider, {
 		value: I,
-		children: /* @__PURE__ */ _(t, {
+		children: /* @__PURE__ */ _(i, {
 			className: D,
 			styles: [w, T[u]],
 			sx: O,
@@ -123,9 +124,9 @@ function D({ ref: e, type: n = "single", value: r, defaultValue: i, onValueChang
 				ref: P,
 				role: "group",
 				"aria-label": b ?? C,
-				"aria-disabled": g || void 0,
+				"aria-disabled": g ? !0 : k["aria-disabled"],
 				"data-ui": "toggle-group-root",
-				"data-type": n,
+				"data-type": t,
 				"data-orientation": u,
 				onKeyDown: L,
 				className: e
@@ -134,29 +135,29 @@ function D({ ref: e, type: n = "single", value: r, defaultValue: i, onValueChang
 	});
 }
 D.displayName = "ToggleGroup";
-function O({ ref: e, value: n, disabled: r, onClick: i, onFocus: a, className: o, sx: s, ...c }) {
-	let { pressed: l, toggle: u, focused: d, setFocused: f, disabled: p } = y("Item"), m = p || r, h = l.includes(n), g = !m && (d === null ? l[0] === n : d === n), v = (e) => {
-		i?.(e), !e.defaultPrevented && u(n);
+function O({ ref: e, value: t, disabled: n, onClick: r, onFocus: a, className: o, sx: s, ...c }) {
+	let { pressed: l, toggle: u, focused: d, setFocused: f, disabled: p } = y("Item"), m = p || n, h = l.includes(t), g = !m && (d === null ? l[0] === t : d === t), v = (e) => {
+		r?.(e), !e.defaultPrevented && u(t);
 	}, b = (e) => {
-		a?.(e), f(n);
+		a?.(e), f(t);
 	};
-	return /* @__PURE__ */ _(t, {
+	return /* @__PURE__ */ _(i, {
 		className: o,
 		styles: E,
 		sx: s,
-		children: (t) => /* @__PURE__ */ _("button", {
+		children: (n) => /* @__PURE__ */ _("button", {
 			...c,
 			ref: e,
 			type: "button",
 			"aria-pressed": h,
 			"data-ui": "toggle-group-item",
-			"data-value": n,
+			"data-value": t,
 			"data-state": h ? "on" : "off",
 			tabIndex: g ? 0 : -1,
 			disabled: m,
 			onClick: v,
 			onFocus: b,
-			className: t
+			className: n
 		})
 	});
 }

package/dist/toggle-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ToggleGroup } from "./toggle-group-fcjzpifI.js";
+export { t as ToggleGroup } from "./toggle-group-C7ye1v4s.js";