haze-ui 1.26.0 → 1.28.0

package/dist/components/Signature/Signature.js

@@ -0,0 +1,165 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { getCanvasPoint as n, normalizeStroke as r, pointDistance as i, serializeStrokes as a } from "./signature-points.js";
+/* empty css                    */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { useControl as f } from "react-use-control";
+//#region src/lib/components/Signature/Signature.tsx
+var p = "#1f2937", ee = 1.5, m = "haze-Signature__root", h = "haze-Signature__canvasFrame", g = "haze-Signature__canvasClass", _ = "haze-Signature__toolbar", v = "haze-Signature__toolButton", y = "haze-Signature__unsupportedNotice";
+function b({ value: b, onChange: x, clearLabel: S, undoLabel: C, unsupportedLabel: w, width: T = 320, height: E = 160, disabled: D = !1, penColor: O, penWidth: k = 2, className: A, ...j }) {
+	let M = t("signature"), N = S ?? M.clear, P = C ?? M.undo, F = w ?? M.unsupported, [, I] = f(b, ""), [L, R] = d(0), [z, B] = d(!1), V = u(null), H = u(null), U = u([]), W = u(null), G = u(p), K = u(""), q = c(() => {
+		if (O) return O;
+		let e = V.current;
+		return (e ? getComputedStyle(e).getPropertyValue("--haze-color-text").trim() : "") || p;
+	}, [O]), J = c((e, t) => {
+		let n = H.current;
+		n && (n.strokeStyle = G.current, n.lineWidth = k, n.lineCap = "round", n.lineJoin = "round", n.beginPath(), n.moveTo(e.x, e.y), n.lineTo(t.x, t.y), n.stroke());
+	}, [k]), Y = c((e) => {
+		let t = H.current;
+		t && (t.fillStyle = G.current, t.beginPath(), t.arc(e.x, e.y, k / 2, 0, Math.PI * 2), t.fill());
+	}, [k]), X = c(() => {
+		let e = H.current, t = V.current;
+		if (e && t) {
+			e.clearRect(0, 0, T, E), G.current = q();
+			for (let e of U.current) if (e.length !== 0) {
+				Y(e[0]);
+				for (let t = 1; t < e.length; t += 1) J(e[t - 1], e[t]);
+			}
+		}
+	}, [
+		T,
+		E,
+		q,
+		Y,
+		J
+	]);
+	l(() => {
+		let e = V.current;
+		if (!e) return;
+		let t = typeof window > "u" ? 1 : window.devicePixelRatio || 1;
+		e.width = Math.max(1, Math.round(T * t)), e.height = Math.max(1, Math.round(E * t));
+		let n = e.getContext("2d");
+		H.current = n, B(!n), n && (n.scale(t, t), X());
+	}, [
+		T,
+		E,
+		X
+	]);
+	let Z = c(() => {
+		let e = V.current;
+		if (!e || !H.current) return;
+		let t = a(U.current);
+		if (t === K.current) return;
+		K.current = t;
+		let n = U.current.length > 0 ? e.toDataURL("image/png") : "";
+		I(n), x?.(n);
+	}, [I, x]), Q = (e) => {
+		if (D || !H.current) return;
+		e.preventDefault();
+		let t = V.current;
+		if (!t || W.current !== null) return;
+		if (W.current = e.pointerId, typeof t.setPointerCapture == "function") try {
+			t.setPointerCapture(e.pointerId);
+		} catch {}
+		G.current = q();
+		let r = n(e.clientX, e.clientY, t.getBoundingClientRect());
+		U.current = [...U.current, [r]], R(U.current.length), Y(r);
+	}, te = (e) => {
+		if (W.current !== e.pointerId) return;
+		let t = V.current;
+		if (!t) return;
+		let r = U.current, a = r[r.length - 1];
+		if (!a) return;
+		let o = n(e.clientX, e.clientY, t.getBoundingClientRect()), s = a[a.length - 1];
+		if (!s || i(s, o) < .5) return;
+		let c = [...a, o];
+		U.current = [...r.slice(0, -1), c], J(s, o);
+	}, $ = () => {
+		if (W.current === null) return;
+		W.current = null;
+		let e = U.current, t = e[e.length - 1];
+		t && (U.current = [...e.slice(0, -1), r(t, ee)]), Z();
+	}, ne = () => {
+		D || U.current.length === 0 || (U.current = U.current.slice(0, -1), R(U.current.length), X(), Z());
+	}, re = () => {
+		D || U.current.length !== 0 && (U.current = [], R(0), X(), Z());
+	};
+	return z ? /* @__PURE__ */ o("div", {
+		...j,
+		className: e([m, A]),
+		children: o("div", {
+			style: {
+				width: `${T}px`,
+				height: `${E}px`
+			},
+			role: "status",
+			className: e([y]),
+			children: F
+		})
+	}) : /* @__PURE__ */ s("div", {
+		...j,
+		className: e([m, A]),
+		children: [/* @__PURE__ */ o("div", {
+			className: e([h]),
+			children: /* @__PURE__ */ o("canvas", {
+				ref: V,
+				style: {
+					width: `${T}px`,
+					height: `${E}px`
+				},
+				"data-disabled": D,
+				onPointerDown: Q,
+				onPointerMove: te,
+				onPointerUp: $,
+				onPointerCancel: $,
+				className: e([g])
+			})
+		}), /* @__PURE__ */ s("div", {
+			className: e([_]),
+			children: [/* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: ne,
+				disabled: D || L === 0,
+				className: e([v]),
+				children: [/* @__PURE__ */ s("svg", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ o("path", { d: "M9 14 4 9l5-5" }), /* @__PURE__ */ o("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })]
+				}), P]
+			}), /* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: re,
+				disabled: D || L === 0,
+				className: e([v]),
+				children: [/* @__PURE__ */ s("svg", {
+					width: "14",
+					height: "14",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ o("path", { d: "M3 6h18" }),
+						/* @__PURE__ */ o("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+						/* @__PURE__ */ o("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+					]
+				}), N]
+			})]
+		})]
+	});
+}
+//#endregion
+export { b as default };

package/dist/components/Signature/index.js

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

package/dist/components/Signature/signature-points.js

@@ -0,0 +1,28 @@
+"use client";
+//#region src/lib/components/Signature/signature-points.ts
+function e(e, t) {
+	return Math.hypot(t.x - e.x, t.y - e.y);
+}
+function t(e, t, n) {
+	return {
+		x: e - n.left,
+		y: t - n.top
+	};
+}
+function n(t, n) {
+	let r = [];
+	return t.forEach((i, a) => {
+		let o = a === t.length - 1;
+		if (r.length === 0) {
+			r.push(i);
+			return;
+		}
+		let s = r[r.length - 1];
+		s && (o || e(s, i) >= n) && r.push(i);
+	}), r;
+}
+function r(e) {
+	return e.map((e) => e.map((e) => `${Math.round(e.x)},${Math.round(e.y)}`).join(" ")).join("|");
+}
+//#endregion
+export { t as getCanvasPoint, n as normalizeStroke, e as pointDistance, r as serializeStrokes };

package/dist/components/Skeleton/Skeleton.js

@@ -1,5 +1,4 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Skeleton/index.js

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

package/dist/components/Slider/Slider.js

@@ -3,15 +3,23 @@ import e from "./SliderCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Slider/Slider.tsx
-function r({ value: r, className: i, onChange: a, ...o }) {
-	let [s, c] = n(r, 50);
+function r(e, t) {
+	let n = e === void 0 ? NaN : Number(e);
+	return Number.isFinite(n) ? n : t;
+}
+function i({ value: i, range: a = !1, className: o, onChange: s, onValuesChange: c, ref: l, ...u }) {
+	let d = [r(u.min, 0), r(u.max, 100)], [f, p] = n(i, a ? d : 50);
 	return /* @__PURE__ */ t(e, {
-		value: s,
-		onChange: c,
-		onNativeChange: a,
-		className: i,
-		...o
+		ref: l,
+		value: f,
+		onChange: (e) => {
+			p(e), c?.(e);
+		},
+		onNativeChange: s,
+		range: a,
+		className: o,
+		...u
 	});
 }
 //#endregion
-export { r as default };
+export { i as default };

package/dist/components/Slider/SliderCore.js

@@ -1,20 +1,83 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { getDirection as t } from "../../utils/direction.js";
 /* empty css                     */
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/Slider/SliderCore.tsx
-var n = "haze-SliderCore__base";
-function r({ value: r, onChange: i, onNativeChange: a, className: o, ...s }) {
-	return /* @__PURE__ */ t("input", {
-		type: "range",
-		value: r,
-		onChange: (e) => {
-			i(Number(e.target.value)), a?.(e);
-		},
-		...s,
-		className: e([n, o])
+var i = "haze-SliderCore__base", a = "haze-SliderCore__rangeWrapper", o = "haze-SliderCore__rangeRail", s = "haze-SliderCore__rangeFill", c = "haze-SliderCore__rangeInput";
+function l(e, n, r, i) {
+	let a = e.currentTarget;
+	if (a.disabled || t(a) !== "rtl" || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+	e.preventDefault();
+	let o = a.step === "" || a.step === "any" ? 1 : Number(a.step), s = a.min === "" ? 0 : Number(a.min), c = a.max === "" ? 100 : Number(a.max), l = e.key === "ArrowLeft" ? o : -o, u = Math.min(Math.max(n + l, s), c);
+	r(Math.round(u * 1e6) / 1e6), i?.(e);
+}
+function u(e) {
+	let t = Array.isArray(e) ? e : [e, e];
+	return t[0] <= t[1] ? [t[0], t[1]] : [t[1], t[0]];
+}
+function d(e, t) {
+	let n = e === void 0 ? NaN : Number(e);
+	return Number.isFinite(n) ? n : t;
+}
+function f({ value: t, onChange: f, onNativeChange: p, range: m = !1, className: h, onKeyDown: g, "aria-label": _, ref: v, ...y }) {
+	if (!m) {
+		let r = t;
+		return /* @__PURE__ */ n("input", {
+			ref: v,
+			type: "range",
+			value: r,
+			"aria-label": _,
+			onChange: (e) => {
+				f(Number(e.target.value)), p?.(e);
+			},
+			onKeyDown: (e) => {
+				g?.(e), e.defaultPrevented || l(e, r, f, p);
+			},
+			...y,
+			className: e([i, h])
+		});
+	}
+	let [b, x] = u(t), S = Array.isArray(_) ? _ : [_, _], C = d(y.min, 0), w = d(y.max, 100) - C, T = (e) => w > 0 ? Math.min(Math.max((e - C) / w * 100, 0), 100) : 0, E = T(b), D = T(x) - E, O = (e) => f([Math.min(e, x), x]), k = (e) => f([b, Math.max(e, b)]), A = (e, t) => (n) => {
+		g?.(n), n.defaultPrevented || l(n, e, t, p);
+	};
+	return /* @__PURE__ */ r("span", {
+		className: e([a, h]),
+		children: [
+			/* @__PURE__ */ n("span", { className: e(o) }),
+			/* @__PURE__ */ n("span", {
+				style: {
+					insetInlineStart: `${E}%`,
+					width: `${D}%`
+				},
+				className: e(s)
+			}),
+			/* @__PURE__ */ n("input", {
+				ref: v,
+				type: "range",
+				value: b,
+				"aria-label": S[0],
+				onChange: (e) => {
+					O(Number(e.target.value)), p?.(e);
+				},
+				onKeyDown: A(b, O),
+				...y,
+				className: e([i, c])
+			}),
+			/* @__PURE__ */ n("input", {
+				type: "range",
+				value: x,
+				"aria-label": S[1],
+				onChange: (e) => {
+					k(Number(e.target.value)), p?.(e);
+				},
+				onKeyDown: A(x, k),
+				...y,
+				className: e([i, c])
+			})
+		]
 	});
 }
 //#endregion
-export { r as default };
+export { f as default };

package/dist/components/Sources/Sources.js

@@ -0,0 +1,109 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+/* empty css                  */
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react";
+import { useControl as o } from "react-use-control";
+//#region src/lib/components/Sources/Sources.tsx
+var s = "haze-Sources__list", c = "haze-Sources__item", l = "haze-Sources__badge", u = "haze-Sources__link", d = "haze-Sources__title", f = "haze-Sources__toggleBtn", p = "haze-Sources__snippetBase", m = "haze-Sources__snippetHidden", h = "haze-Sources__snippetShown", g = "haze-Sources__compactNav", _ = "haze-Sources__compactBadge", v = () => /* @__PURE__ */ r("svg", {
+	width: "10",
+	height: "10",
+	viewBox: "0 0 10 10",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	style: { transition: "transform var(--haze-duration-fast) var(--haze-ease)" },
+	children: r("path", { d: "M3 1.5 6.5 5 3 8.5" })
+});
+function y(e, t) {
+	return typeof e == "string" ? `${t}. ${e}` : `[${t}]`;
+}
+function b({ items: b, compact: x = !1, expanded: S, label: C, expandLabel: w, collapseLabel: T, className: E, ...D }) {
+	let O = t("sources"), k = C ?? O.label, A = w ?? O.expand, j = T ?? O.collapse, M = a(), [N, P] = o(S, []);
+	if (x) return /* @__PURE__ */ r("nav", {
+		"aria-label": k,
+		...D,
+		className: e([g, E]),
+		children: b.map((t, n) => {
+			let r = n + 1, a = y(t.title, r);
+			return t.url ? /* @__PURE__ */ i("a", {
+				href: t.url,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				"aria-label": a,
+				className: e([_]),
+				children: [
+					"[",
+					r,
+					"]"
+				]
+			}, t.id) : /* @__PURE__ */ i("span", {
+				"aria-label": a,
+				className: e([_]),
+				children: [
+					"[",
+					r,
+					"]"
+				]
+			}, t.id);
+		})
+	});
+	let F = (e) => N.includes(e), I = (e) => {
+		P((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	};
+	return /* @__PURE__ */ r("ol", {
+		"aria-label": k,
+		...D,
+		className: e([s, E]),
+		children: b.map((t, a) => {
+			let o = a + 1, s = `${M}-snippet-${t.id}`, g = F(t.id);
+			return /* @__PURE__ */ i("li", {
+				"data-haze-sources-item": "",
+				"data-state": g ? "expanded" : "collapsed",
+				className: e([c]),
+				children: [
+					/* @__PURE__ */ i("span", {
+						"aria-hidden": "true",
+						className: e([l]),
+						children: [
+							"[",
+							o,
+							"]"
+						]
+					}),
+					t.url ? /* @__PURE__ */ r("a", {
+						href: t.url,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: e([u]),
+						children: t.title
+					}) : /* @__PURE__ */ r("span", {
+						className: e([d]),
+						children: t.title
+					}),
+					t.snippet != null && /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("button", {
+						type: "button",
+						"aria-expanded": g,
+						"aria-controls": s,
+						"aria-label": g ? j : A,
+						onClick: () => I(t.id),
+						className: e([f]),
+						children: /* @__PURE__ */ r(v, {})
+					}), /* @__PURE__ */ r("div", {
+						id: s,
+						className: e([p, g ? h : m]),
+						children: t.snippet
+					})] })
+				]
+			}, t.id);
+		})
+	});
+}
+//#endregion
+export { b as default };

package/dist/components/Sources/index.js

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

package/dist/components/Stat/Stat.js

@@ -1,5 +1,4 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Stat/index.js

@@ -1,3 +1,2 @@
-"use client";
 import { Stat as e, StatGroup as t } from "./Stat.js";
 export { e as Stat, t as StatGroup };

package/dist/components/Switch/Switch.js

@@ -3,15 +3,16 @@ import e from "./SwitchCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Switch/Switch.tsx
-function r({ checked: r, size: i, className: a, onClick: o, ...s }) {
-	let [c, l] = n(r, !1);
+function r({ checked: r, size: i, className: a, onClick: o, ref: s, ...c }) {
+	let [l, u] = n(r, !1);
 	return /* @__PURE__ */ t(e, {
-		checked: c,
-		onChange: l,
+		ref: s,
+		checked: l,
+		onChange: u,
 		onNativeClick: o,
 		size: i,
 		className: a,
-		...s
+		...c
 	});
 }
 //#endregion

package/dist/components/Switch/SwitchCore.js

@@ -17,15 +17,16 @@ var n = "haze-SwitchCore__track", r = "haze-SwitchCore__trackChecked", i = "haze
 	md: f,
 	lg: p
 };
-function _({ checked: a, onChange: o, onNativeClick: s, size: c = "md", className: l, ...u }) {
+function _({ checked: a, onChange: o, onNativeClick: s, size: c = "md", className: l, ref: u, ...d }) {
 	return /* @__PURE__ */ t("button", {
+		ref: u,
 		type: "button",
 		role: "switch",
 		"aria-checked": a,
 		onClick: (e) => {
 			o(!a), s?.(e);
 		},
-		...u,
+		...d,
 		className: e([
 			n,
 			m[c],

package/dist/components/Tabs/Tab.js

@@ -7,17 +7,20 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/lib/components/Tabs/Tab.tsx
 var r = "haze-Tab__base", i = "haze-Tab__active";
 function a({ value: a, className: o, children: s }) {
-	let { value: c, setValue: l } = t(), u = c === a;
+	let { value: c, setValue: l, classNames: u } = t(), d = c === a;
 	return /* @__PURE__ */ n("button", {
 		type: "button",
 		role: "tab",
-		"aria-selected": u,
+		"aria-selected": d,
 		"aria-controls": `tabpanel-${a}`,
+		tabIndex: d ? 0 : -1,
+		"data-haze-tab-value": a,
 		onClick: () => l(a),
 		className: e([
 			r,
-			u && i,
-			o
+			d && i,
+			o,
+			u?.tab
 		]),
 		children: s
 	});

package/dist/components/Tabs/TabList.js

@@ -1,16 +1,47 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { useTabsContext as n } from "./TabsContext.js";
 /* empty css                  */
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as i } from "react";
 //#region src/lib/components/Tabs/TabList.tsx
-var n = "haze-TabList__base";
-function r({ className: r, children: i }) {
-	return /* @__PURE__ */ t("div", {
+var a = "haze-TabList__base", o = "[role=\"tab\"]:not([disabled])";
+function s({ className: s, children: c }) {
+	let { setValue: l, classNames: u } = n(), d = i(null);
+	return /* @__PURE__ */ r("div", {
+		ref: d,
 		role: "tablist",
-		className: e([n, r]),
-		children: i
+		onKeyDown: (e) => {
+			let n = Array.from(d.current?.querySelectorAll(o) ?? []);
+			if (n.length === 0) return;
+			let r = n.indexOf(document.activeElement), i = (e) => {
+				let t = n[e];
+				t && (t.focus(), l(t.dataset.hazeTabValue ?? ""));
+			}, a = t(d.current) === "rtl" ? "ArrowLeft" : "ArrowRight", s = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+			switch (e.key) {
+				case a:
+					e.preventDefault(), i(r < 0 ? 0 : (r + 1) % n.length);
+					return;
+				case s:
+					e.preventDefault(), i(r < 0 ? n.length - 1 : (r - 1 + n.length) % n.length);
+					return;
+				case "Home":
+					e.preventDefault(), i(0);
+					return;
+				case "End":
+					e.preventDefault(), i(n.length - 1);
+					return;
+			}
+		},
+		className: e([
+			a,
+			s,
+			u?.list
+		]),
+		children: c
 	});
 }
 //#endregion
-export { r as default };
+export { s as default };

package/dist/components/Tabs/TabPanel.js

@@ -7,14 +7,15 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/lib/components/Tabs/TabPanel.tsx
 var r = "haze-TabPanel__base", i = "haze-TabPanel__hidden";
 function a({ value: a, className: o, children: s }) {
-	let { value: c } = t(), l = c === a;
+	let { value: c, classNames: l } = t(), u = c === a;
 	return /* @__PURE__ */ n("div", {
 		role: "tabpanel",
 		id: `tabpanel-${a}`,
 		className: e([
 			r,
-			!l && i,
-			o
+			!u && i,
+			o,
+			l?.panel
 		]),
 		children: s
 	});

package/dist/components/Tabs/Tabs.js

@@ -7,16 +7,21 @@ import { jsx as n } from "react/jsx-runtime";
 import { useControl as r } from "react-use-control";
 //#region src/lib/components/Tabs/Tabs.tsx
 var i = "haze-Tabs__base";
-function a({ value: a, className: o, children: s }) {
-	let [c, l] = r(a, "");
+function a({ value: a, classNames: o, className: s, children: c }) {
+	let [l, u] = r(a, "");
 	return /* @__PURE__ */ n("div", {
-		className: e([i, o]),
+		className: e([
+			i,
+			s,
+			o?.root
+		]),
 		children: n(t, {
 			value: {
-				value: c,
-				setValue: l
+				value: l,
+				setValue: u,
+				classNames: o
 			},
-			children: s
+			children: c
 		})
 	});
 }

package/dist/components/TagGroup/SortableTagGroup.js

@@ -0,0 +1,26 @@
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { SortableItem as t, SortableRegion as n } from "../../utils/sortable.js";
+import { group as r } from "./tag-group-styles.js";
+import { jsx as i } from "react/jsx-runtime";
+import { Children as a } from "react";
+import { arrayMove as o, rectSortingStrategy as s } from "@dnd-kit/sortable";
+//#region src/lib/components/TagGroup/SortableTagGroup.tsx
+function c({ children: c, className: l, onReorder: u }) {
+	let d = a.toArray(c), f = d.map((e, t) => t);
+	return /* @__PURE__ */ i("div", {
+		role: "group",
+		className: e([r, l]),
+		children: /* @__PURE__ */ i(n, {
+			ids: f,
+			strategy: s,
+			onMove: (e, t) => u?.(o(f, e, t)),
+			children: d.map((e, n) => /* @__PURE__ */ i(t, {
+				id: n,
+				children: e
+			}, n))
+		})
+	});
+}
+//#endregion
+export { c as default };