haze-ui 1.26.0 → 1.28.0

package/dist/components/TagGroup/TagGroup.js

@@ -1,14 +1,12 @@
-
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-/* empty css                   */
-import { jsx as t } from "react/jsx-runtime";
+import { group as t } from "./tag-group-styles.js";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/lib/components/TagGroup/TagGroup.tsx
-var n = "haze-TagGroup__group";
 function r({ children: r, className: i }) {
-	return /* @__PURE__ */ t("div", {
+	return /* @__PURE__ */ n("div", {
 		role: "group",
-		className: e([n, i]),
+		className: e([t, i]),
 		children: r
 	});
 }

package/dist/components/TagGroup/TagGroupItem.js

@@ -2,22 +2,28 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { sortableHandle as n, useSortableHandle as r } from "../../utils/sortable-handle.js";
 /* empty css                       */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/TagGroup/TagGroupItem.tsx
-var i = "haze-TagGroupItem__tag", a = "haze-TagGroupItem__closeBtn";
-function o({ children: o, onClose: s, className: c }) {
-	let l = t("tagGroup");
-	return /* @__PURE__ */ r("span", {
-		className: e([i, c]),
-		children: [o, s && /* @__PURE__ */ n("button", {
+var o = "haze-TagGroupItem__tag", s = "haze-TagGroupItem__closeBtn";
+function c({ children: c, onClose: l, className: u }) {
+	let d = t("tagGroup"), f = r(), p = f ? /* @__PURE__ */ i("span", {
+		...f.attributes,
+		...f.listeners,
+		className: e([n]),
+		children: c
+	}) : c;
+	return /* @__PURE__ */ a("span", {
+		className: e([o, u]),
+		children: [p, l && /* @__PURE__ */ i("button", {
 			type: "button",
-			onClick: s,
-			"aria-label": l.remove,
-			className: e([a]),
+			onClick: l,
+			"aria-label": d.remove,
+			className: e([s]),
 			children: "x"
 		})]
 	});
 }
 //#endregion
-export { o as default };
+export { c as default };

package/dist/components/TagGroup/index.js

@@ -1,4 +1,5 @@
 "use client";
 import e from "./TagGroup.js";
 import t from "./TagGroupItem.js";
-export { e as TagGroup, t as TagGroupItem };
+import n from "./SortableTagGroup.js";
+export { n as SortableTagGroup, e as TagGroup, t as TagGroupItem };

package/dist/components/TagGroup/tag-group-styles.js

@@ -0,0 +1,7 @@
+
+"use client";
+/* empty css                           */
+//#region src/lib/components/TagGroup/tag-group-styles.ts
+var e = "haze-tag-group-styles__group";
+//#endregion
+export { e as group };

package/dist/components/TagInput/SortableTagInput.js

@@ -0,0 +1,24 @@
+"use client";
+import e from "./SortableTagInputCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
+//#region src/lib/components/TagInput/SortableTagInput.tsx
+function r({ value: r, onChange: i, placeholder: a, maxTags: o, disabled: s, className: c, id: l, "aria-invalid": u, "aria-describedby": d, ref: f }) {
+	let [p, m] = n(r, []);
+	return /* @__PURE__ */ t(e, {
+		ref: f,
+		value: p,
+		onChange: (e) => {
+			m(e), i?.(e);
+		},
+		placeholder: a,
+		maxTags: o,
+		disabled: s,
+		className: c,
+		id: l,
+		"aria-invalid": u,
+		"aria-describedby": d
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/TagInput/SortableTagInputCore.js

@@ -0,0 +1,52 @@
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { removeBtn as t, tag as n, tagHandle as r } from "./tag-input-styles.js";
+import i from "./TagInputCore.js";
+import { sortableItemStyle as a } from "../../utils/sortable-shared.js";
+import { SortableRegion as o } from "../../utils/sortable.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { rectSortingStrategy as l, useSortable as u } from "@dnd-kit/sortable";
+//#region src/lib/components/TagInput/SortableTagInputCore.tsx
+function d({ id: i, label: o, removeLabel: l, onRemove: d }) {
+	let { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: g, isDragging: _ } = u({ id: i });
+	return /* @__PURE__ */ c("li", {
+		ref: m,
+		style: a(h, g),
+		className: e([n, _ && "haze-tag-input-styles__tagDragging"]),
+		children: [/* @__PURE__ */ s("span", {
+			...f,
+			...p,
+			className: e([r]),
+			children: o
+		}), /* @__PURE__ */ s("button", {
+			type: "button",
+			onClick: d,
+			onKeyDown: (e) => {
+				e.key === "Backspace" && (e.preventDefault(), d());
+			},
+			"aria-label": l,
+			className: e([t]),
+			children: "x"
+		})]
+	});
+}
+function f(e) {
+	let { disabled: t } = e;
+	return /* @__PURE__ */ s(i, {
+		...e,
+		renderTag: t ? void 0 : (e) => /* @__PURE__ */ s(d, {
+			id: e.index,
+			label: e.tag,
+			removeLabel: e.removeLabel,
+			onRemove: e.onRemove
+		}, e.index),
+		wrapTagList: t ? void 0 : (e, { count: t, onMove: n }) => /* @__PURE__ */ s(o, {
+			ids: Array.from({ length: t }, (e, t) => t),
+			strategy: l,
+			onMove: n,
+			children: e
+		})
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/TagInput/TagInput.js

@@ -3,12 +3,13 @@ import e from "./TagInputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/TagInput/TagInput.tsx
-function r({ value: r, onChange: i, placeholder: a, maxTags: o, disabled: s, className: c, id: l, "aria-invalid": u, "aria-describedby": d }) {
-	let [f, p] = n(r, []);
+function r({ value: r, onChange: i, placeholder: a, maxTags: o, disabled: s, className: c, id: l, "aria-invalid": u, "aria-describedby": d, ref: f }) {
+	let [p, m] = n(r, []);
 	return /* @__PURE__ */ t(e, {
-		value: f,
+		ref: f,
+		value: p,
 		onChange: (e) => {
-			p(e), i?.(e);
+			m(e), i?.(e);
 		},
 		placeholder: a,
 		maxTags: o,

package/dist/components/TagInput/TagInputCore.js

@@ -1,71 +1,85 @@
 
 "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 { mergeRefs as t } from "../../utils/refs.js";
+import { formatString as n } from "../LocaleProvider/locale.js";
+import { useStrings as r } from "../LocaleProvider/useStrings.js";
+import { listWrap as i, removeBtn as a, tag as o } from "./tag-input-styles.js";
 /* empty css                       */
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as l, useEffect as u, useRef as d, useState as f } from "react";
 //#region src/lib/components/TagInput/TagInputCore.tsx
-var l = "haze-TagInputCore__container", u = "haze-TagInputCore__listWrap", d = "haze-TagInputCore__tag", f = "haze-TagInputCore__removeBtn", p = "haze-TagInputCore__inputEl";
-function m({ value: m, onChange: h, placeholder: g, maxTags: _, disabled: v, className: y, id: b, "aria-invalid": x, "aria-describedby": S }) {
-	let [C, w] = c(""), T = s(null), E = s(null), D = s(null);
-	o(() => {
-		let e = D.current;
+var p = "haze-TagInputCore__container", m = "haze-TagInputCore__inputEl";
+function h({ value: h, onChange: g, placeholder: _, maxTags: v, disabled: y, renderTag: b, wrapTagList: x, className: S, id: C, "aria-invalid": w, "aria-describedby": T, ref: E }) {
+	let [D, O] = f(""), k = d(null), A = d(null), j = l((e) => t(A, E)(e), [A, E]), M = d(null);
+	u(() => {
+		let e = M.current;
 		if (e === null) return;
-		if (D.current = null, m.length === 0) {
-			E.current?.focus();
+		if (M.current = null, h.length === 0) {
+			A.current?.focus();
 			return;
 		}
-		let t = Math.min(e, m.length - 1);
-		(T.current?.querySelectorAll("li > button"))?.[t]?.focus();
-	}, [m]);
-	let O = a((e) => {
+		let t = Math.min(e, h.length - 1);
+		(k.current?.querySelectorAll("li > button"))?.[t]?.focus();
+	}, [h]);
+	let N = l((e) => {
 		let t = e.trim();
-		t && !m.includes(t) && (_ && m.length >= _ || (h([...m, t]), w("")));
+		t && !h.includes(t) && (v && h.length >= v || (g([...h, t]), O("")));
 	}, [
-		m,
-		_,
-		h
-	]), k = a((e) => {
-		let t = m.filter((t, n) => n !== e);
-		h(t), D.current = t.length === 0 ? 0 : Math.min(e, t.length - 1);
-	}, [m, h]), A = (e) => {
-		e.key === "Enter" || e.key === "," ? (e.preventDefault(), O(C)) : e.key === "Backspace" && !C && m.length > 0 && k(m.length - 1);
-	}, j = n("tagInput"), M = g || j.placeholder, N = t(m.length === 1 ? j.tagCountSingular : j.tagCount, { count: m.length });
-	return /* @__PURE__ */ i("div", {
-		ref: T,
-		className: e([l, y]),
-		children: [/* @__PURE__ */ r("ul", {
-			className: e([u]),
-			children: m.map((n, a) => /* @__PURE__ */ i("li", {
-				className: e([d]),
-				children: [n, /* @__PURE__ */ r("button", {
-					type: "button",
-					onClick: () => k(a),
-					onKeyDown: (e) => {
-						e.key === "Backspace" && (e.preventDefault(), k(a));
-					},
-					"aria-label": t(j.removeTag, { tag: n }),
-					disabled: v,
-					className: e([f]),
-					children: "x"
-				})]
-			}, a))
-		}), /* @__PURE__ */ r("input", {
-			ref: E,
-			id: b,
-			"aria-invalid": x,
-			"aria-describedby": S,
-			value: C,
-			onChange: (e) => w(e.target.value),
-			onKeyDown: A,
-			placeholder: m.length === 0 ? g : void 0,
-			"aria-label": m.length > 0 ? `${M}, ${N}` : M,
-			disabled: v,
-			className: e([p])
+		h,
+		v,
+		g
+	]), P = l((e) => {
+		let t = h.filter((t, n) => n !== e);
+		g(t), M.current = t.length === 0 ? 0 : Math.min(e, t.length - 1);
+	}, [h, g]), F = l((e, t) => {
+		if (e === t) return;
+		let n = [...h], [r] = n.splice(e, 1);
+		r !== void 0 && (n.splice(t, 0, r), g(n));
+	}, [h, g]), I = (e) => {
+		e.key === "Enter" || e.key === "," ? (e.preventDefault(), N(D)) : e.key === "Backspace" && !D && h.length > 0 && P(h.length - 1);
+	}, L = r("tagInput"), R = _ || L.placeholder, z = n(h.length === 1 ? L.tagCountSingular : L.tagCount, { count: h.length }), B = /* @__PURE__ */ s("ul", {
+		className: e([i]),
+		children: h.map((t, r) => b ? b({
+			tag: t,
+			index: r,
+			removeLabel: n(L.removeTag, { tag: t }),
+			onRemove: () => P(r)
+		}) : /* @__PURE__ */ c("li", {
+			className: e([o]),
+			children: [t, /* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: () => P(r),
+				onKeyDown: (e) => {
+					e.key === "Backspace" && (e.preventDefault(), P(r));
+				},
+				"aria-label": n(L.removeTag, { tag: t }),
+				disabled: y,
+				className: e([a]),
+				children: "x"
+			})]
+		}, r))
+	});
+	return /* @__PURE__ */ c("div", {
+		ref: k,
+		className: e([p, S]),
+		children: [x ? x(B, {
+			count: h.length,
+			onMove: F
+		}) : B, /* @__PURE__ */ s("input", {
+			ref: j,
+			id: C,
+			"aria-invalid": w,
+			"aria-describedby": T,
+			value: D,
+			onChange: (e) => O(e.target.value),
+			onKeyDown: I,
+			placeholder: h.length === 0 ? _ : void 0,
+			"aria-label": h.length > 0 ? `${R}, ${z}` : R,
+			disabled: y,
+			className: e([m])
 		})]
 	});
 }
 //#endregion
-export { m as default };
+export { h as default };

package/dist/components/TagInput/index.js

@@ -1,4 +1,6 @@
 "use client";
 import e from "./TagInputCore.js";
 import t from "./TagInput.js";
-export { t as TagInput, e as TagInputCore };
+import n from "./SortableTagInputCore.js";
+import r from "./SortableTagInput.js";
+export { r as SortableTagInput, n as SortableTagInputCore, t as TagInput, e as TagInputCore };

package/dist/components/TagInput/tag-input-styles.js

@@ -0,0 +1,7 @@
+
+"use client";
+/* empty css                           */
+//#region src/lib/components/TagInput/tag-input-styles.ts
+var e = "haze-tag-input-styles__listWrap", t = "haze-tag-input-styles__tag", n = "haze-tag-input-styles__removeBtn", r = "haze-tag-input-styles__tagHandle", i = "haze-tag-input-styles__tagDragging";
+//#endregion
+export { e as listWrap, n as removeBtn, t as tag, i as tagDragging, r as tagHandle };

package/dist/components/Textarea/Textarea.js

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

package/dist/components/Textarea/TextareaCore.js

@@ -9,13 +9,14 @@ var n = "haze-TextareaCore__base", r = {
 	md: "haze-TextareaCore__md",
 	lg: "haze-TextareaCore__lg"
 };
-function i({ value: i, onChange: a, onNativeChange: o, size: s = "md", className: c, ...l }) {
+function i({ value: i, onChange: a, onNativeChange: o, size: s = "md", className: c, ref: l, ...u }) {
 	return /* @__PURE__ */ t("textarea", {
+		ref: l,
 		value: i,
 		onChange: (e) => {
 			a(e.target.value), o?.(e);
 		},
-		...l,
+		...u,
 		className: e([
 			n,
 			r[s],

package/dist/components/TimePicker/TimePicker.js

@@ -3,16 +3,17 @@ import e from "./TimePickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/TimePicker/TimePicker.tsx
-function r({ value: r, onChange: i, placeholder: a, className: o, ...s }) {
-	let [c, l] = n(r, "");
+function r({ value: r, onChange: i, placeholder: a, className: o, ref: s, ...c }) {
+	let [l, u] = n(r, "");
 	return /* @__PURE__ */ t(e, {
-		value: c,
+		ref: s,
+		value: l,
 		onChange: (e) => {
-			l(e), i?.(e);
+			u(e), i?.(e);
 		},
 		placeholder: a,
 		className: o,
-		...s
+		...c
 	});
 }
 //#endregion

package/dist/components/TimePicker/TimePickerCore.js

@@ -5,13 +5,14 @@ import { classnames as e } from "../../utils/classnames.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/TimePicker/TimePickerCore.tsx
 var n = "haze-TimePickerCore__input";
-function r({ value: r, onChange: i, placeholder: a, className: o, ...s }) {
+function r({ value: r, onChange: i, placeholder: a, className: o, ref: s, ...c }) {
 	return /* @__PURE__ */ t("input", {
+		ref: s,
 		type: "time",
 		value: r,
 		placeholder: a,
 		onChange: (e) => i(e.target.value),
-		...s,
+		...c,
 		className: e([n, o])
 	});
 }

package/dist/components/Toast/Toast.js

@@ -1,72 +1,74 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useCallback as r, useEffect as i, useRef as a } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useCallback as i, useEffect as a, useRef as o } from "react";
 //#region src/lib/components/Toast/Toast.tsx
-var o = "haze-Toast__base", s = {
+var s = "haze-Toast__base", c = {
 	info: "haze-Toast__info",
 	success: "haze-Toast__success",
 	warning: "haze-Toast__warning",
 	danger: "haze-Toast__danger"
-}, c = {
+}, l = {
 	info: "status",
 	success: "status",
 	warning: "status",
 	danger: "alert"
-}, l = "haze-Toast__contentStyle", u = "haze-Toast__closeBtn";
-function d({ variant: d = "info", onClose: f, duration: p, children: m, className: h, ...g }) {
-	let _ = a(p), v = a(0), y = a(null), b = a(!1), x = a(!1), S = a(f);
-	i(() => {
-		S.current = f;
-	}, [f]);
-	let C = r(() => {
-		y.current !== null && (clearTimeout(y.current), y.current = null, _.current = Math.max(0, _.current - (Date.now() - v.current)));
-	}, []), w = r(() => {
-		y.current !== null || _.current <= 0 || (v.current = Date.now(), y.current = setTimeout(() => {
-			y.current = null, S.current();
-		}, _.current));
-	}, []), T = r(() => {
-		b.current || x.current ? C() : w();
-	}, [C, w]);
-	return i(() => {
-		if (!(p <= 0)) return _.current = p, !b.current && !x.current && w(), C;
+}, u = "haze-Toast__contentStyle", d = "haze-Toast__closeBtn";
+function f({ variant: f = "info", onClose: p, duration: m, children: h, classNames: g, className: _, ...v }) {
+	let y = t("toast"), b = o(m), x = o(0), S = o(null), C = o(!1), w = o(!1), T = o(p);
+	a(() => {
+		T.current = p;
+	}, [p]);
+	let E = i(() => {
+		S.current !== null && (clearTimeout(S.current), S.current = null, b.current = Math.max(0, b.current - (Date.now() - x.current)));
+	}, []), D = i(() => {
+		S.current !== null || b.current <= 0 || (x.current = Date.now(), S.current = setTimeout(() => {
+			S.current = null, T.current();
+		}, b.current));
+	}, []), O = i(() => {
+		C.current || w.current ? E() : D();
+	}, [E, D]);
+	return a(() => {
+		if (!(m <= 0)) return b.current = m, !C.current && !w.current && D(), E;
 	}, [
-		p,
-		w,
-		C
-	]), /* @__PURE__ */ n("div", {
-		role: c[d],
+		m,
+		D,
+		E
+	]), /* @__PURE__ */ r("div", {
+		role: l[f],
 		onPointerEnter: () => {
-			b.current = !0, T();
+			C.current = !0, O();
 		},
 		onPointerLeave: () => {
-			b.current = !1, T();
+			C.current = !1, O();
 		},
 		onFocus: () => {
-			x.current = !0, T();
+			w.current = !0, O();
 		},
 		onBlur: () => {
-			x.current = !1, T();
+			w.current = !1, O();
 		},
-		...g,
+		...v,
 		className: e([
-			o,
-			s[d],
-			h
+			s,
+			c[f],
+			_,
+			g?.item
 		]),
-		children: [/* @__PURE__ */ t("div", {
-			className: l,
-			children: m
-		}), /* @__PURE__ */ t("button", {
+		children: [/* @__PURE__ */ n("div", {
+			className: e([u, g?.content]),
+			children: h
+		}), /* @__PURE__ */ n("button", {
 			type: "button",
-			className: u,
-			"aria-label": "Close",
-			onClick: f,
+			"aria-label": y.close,
+			onClick: p,
+			className: e([d, g?.close]),
 			children: "×"
 		})]
 	});
 }
 //#endregion
-export { d as default };
+export { f as default };