haze-ui 1.12.1 → 1.13.0

package/dist/components/Radio/RadioGroupCore.js

@@ -0,0 +1,24 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { RadioProvider as t } from "./RadioContext.js";
+/* empty css                         */
+import { jsx as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+//#region src/lib/components/Radio/RadioGroupCore.tsx
+var i = "haze-RadioGroupCore__base";
+function a({ value: a, onChange: o, name: s, className: c, children: l }) {
+	let u = r();
+	return /* @__PURE__ */ n("fieldset", {
+		className: e([i, c]),
+		children: n(t, {
+			value: {
+				name: s ?? u,
+				value: a,
+				setValue: o
+			},
+			children: l
+		})
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Rating/Rating.js

@@ -1,50 +1,18 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                 */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useState as i } from "react";
+import e from "./RatingCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/Rating/Rating.tsx
-var a = "haze-Rating__container", o = "haze-Rating__star", s = "haze-Rating__starActive";
-function c({ value: c, count: l = 5, allowHalf: u = !1, onChange: d, className: f }) {
-	let [p, m] = r(c, 0), [h, g] = i(null), _ = (e) => {
-		let t = e + 1;
-		m(t), d?.(t);
-	}, v = h ?? p;
-	return /* @__PURE__ */ t("div", {
-		role: "radiogroup",
-		className: e([a, f]),
-		children: Array.from({ length: l }, (r, i) => {
-			let a = v >= i + 1, c = u && v >= i + .5 && v < i + 1;
-			return /* @__PURE__ */ t("span", {
-				role: "radio",
-				"aria-checked": p >= i + 1 ? "true" : "false",
-				"aria-label": `${i + 1} star${i > 0 ? "s" : ""}`,
-				onClick: () => _(i),
-				onMouseEnter: () => g(i + 1),
-				onMouseLeave: () => g(null),
-				className: e([o, (a || c) && s]),
-				children: /* @__PURE__ */ n("svg", {
-					width: "18",
-					height: "18",
-					viewBox: "0 0 24 24",
-					fill: a ? "currentColor" : c ? "url(#half)" : "none",
-					stroke: "currentColor",
-					strokeWidth: "2",
-					children: [c && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", {
-						id: "half",
-						children: [/* @__PURE__ */ t("stop", {
-							offset: "50%",
-							stopColor: "currentColor"
-						}), /* @__PURE__ */ t("stop", {
-							offset: "50%",
-							stopColor: "transparent"
-						})]
-					}) }), /* @__PURE__ */ t("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })]
-				})
-			}, i);
-		})
+function r({ value: r, count: i, allowHalf: a, onChange: o, className: s }) {
+	let [c, l] = n(r, 0);
+	return /* @__PURE__ */ t(e, {
+		value: c,
+		onChange: (e) => {
+			l(e), o?.(e);
+		},
+		count: i,
+		allowHalf: a,
+		className: s
 	});
 }
 //#endregion
-export { c as default };
+export { r as default };

package/dist/components/Rating/RatingCore.js

@@ -0,0 +1,48 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                     */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+//#region src/lib/components/Rating/RatingCore.tsx
+var i = "haze-RatingCore__container", a = "haze-RatingCore__star", o = "haze-RatingCore__starActive";
+function s({ value: s, onChange: c, count: l = 5, allowHalf: u = !1, className: d }) {
+	let [f, p] = r(null), m = (e) => {
+		c(e + 1);
+	}, h = f ?? s;
+	return /* @__PURE__ */ t("div", {
+		role: "radiogroup",
+		className: e([i, d]),
+		children: Array.from({ length: l }, (r, i) => {
+			let c = h >= i + 1, l = u && h >= i + .5 && h < i + 1;
+			return /* @__PURE__ */ t("span", {
+				role: "radio",
+				"aria-checked": s >= i + 1 ? "true" : "false",
+				"aria-label": `${i + 1} star${i > 0 ? "s" : ""}`,
+				onClick: () => m(i),
+				onMouseEnter: () => p(i + 1),
+				onMouseLeave: () => p(null),
+				className: e([a, (c || l) && o]),
+				children: /* @__PURE__ */ n("svg", {
+					width: "18",
+					height: "18",
+					viewBox: "0 0 24 24",
+					fill: c ? "currentColor" : l ? "url(#half)" : "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					children: [l && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", {
+						id: "half",
+						children: [/* @__PURE__ */ t("stop", {
+							offset: "50%",
+							stopColor: "currentColor"
+						}), /* @__PURE__ */ t("stop", {
+							offset: "50%",
+							stopColor: "transparent"
+						})]
+					}) }), /* @__PURE__ */ t("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })]
+				})
+			}, i);
+		})
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Segmented/Segmented.js

@@ -1,43 +1,18 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                    */
+import e from "./SegmentedCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Segmented/Segmented.tsx
-var r = "haze-Segmented__container", i = {
-	sm: "haze-Segmented__sm",
-	md: "haze-Segmented__md",
-	lg: "haze-Segmented__lg"
-}, a = "haze-Segmented__btn", o = "haze-Segmented__activeBtn";
-function s(e) {
-	return typeof e == "string" ? {
-		value: e,
-		label: e,
-		disabled: !1
-	} : e;
-}
-function c({ options: c, value: l, onChange: u, size: d = "md", className: f }) {
-	let [p, m] = n(l, ""), h = (e) => {
-		m(e), u?.(e);
-	};
-	return /* @__PURE__ */ t("div", {
-		role: "group",
-		className: e([
-			r,
-			i[d],
-			f
-		]),
-		children: c.map((n) => {
-			let { value: r, label: i, disabled: c } = s(n);
-			return /* @__PURE__ */ t("button", {
-				type: "button",
-				disabled: c,
-				onClick: () => h(r),
-				className: e([a, p === r && o]),
-				children: i
-			}, r);
-		})
+function r({ options: r, value: i, onChange: a, size: o, className: s }) {
+	let [c, l] = n(i, "");
+	return /* @__PURE__ */ t(e, {
+		options: r,
+		value: c,
+		onChange: (e) => {
+			l(e), a?.(e);
+		},
+		size: o,
+		className: s
 	});
 }
 //#endregion
-export { c as default };
+export { r as default };

package/dist/components/Segmented/SegmentedCore.js

@@ -0,0 +1,39 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                        */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Segmented/SegmentedCore.tsx
+var n = "haze-SegmentedCore__container", r = {
+	sm: "haze-SegmentedCore__sm",
+	md: "haze-SegmentedCore__md",
+	lg: "haze-SegmentedCore__lg"
+}, i = "haze-SegmentedCore__btn", a = "haze-SegmentedCore__activeBtn";
+function o(e) {
+	return typeof e == "string" ? {
+		value: e,
+		label: e,
+		disabled: !1
+	} : e;
+}
+function s({ options: s, value: c, onChange: l, size: u = "md", className: d }) {
+	return /* @__PURE__ */ t("div", {
+		role: "group",
+		className: e([
+			n,
+			r[u],
+			d
+		]),
+		children: s.map((n) => {
+			let { value: r, label: s, disabled: u } = o(n);
+			return /* @__PURE__ */ t("button", {
+				type: "button",
+				disabled: u,
+				onClick: () => l(r),
+				className: e([i, c === r && a]),
+				children: s
+			}, r);
+		})
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Select/Select.js

@@ -1,29 +1,18 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                 */
+import e from "./SelectCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Select/Select.tsx
-var r = "haze-Select__base", i = {
-	sm: "haze-Select__sm",
-	md: "haze-Select__md",
-	lg: "haze-Select__lg"
-};
-function a({ value: a, size: o = "md", className: s, children: c, onChange: l, ...u }) {
-	let [d, f] = n(a, "");
-	return /* @__PURE__ */ t("select", {
-		value: d,
-		onChange: (e) => {
-			f(e.target.value), l?.(e);
-		},
-		...u,
-		className: e([
-			r,
-			i[o],
-			s
-		]),
-		children: c
+function r({ value: r, size: i, className: a, children: o, onChange: s, ...c }) {
+	let [l, u] = n(r, "");
+	return /* @__PURE__ */ t(e, {
+		value: l,
+		onChange: u,
+		onNativeChange: s,
+		size: i,
+		className: a,
+		...c,
+		children: o
 	});
 }
 //#endregion
-export { a as default };
+export { r as default };

package/dist/components/Select/SelectCore.js

@@ -0,0 +1,27 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                     */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Select/SelectCore.tsx
+var n = "haze-SelectCore__base", r = {
+	sm: "haze-SelectCore__sm",
+	md: "haze-SelectCore__md",
+	lg: "haze-SelectCore__lg"
+};
+function i({ value: i, onChange: a, onNativeChange: o, size: s = "md", className: c, children: l, ...u }) {
+	return /* @__PURE__ */ t("select", {
+		value: i,
+		onChange: (e) => {
+			a(e.target.value), o?.(e);
+		},
+		...u,
+		className: e([
+			n,
+			r[s],
+			c
+		]),
+		children: l
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Slider/Slider.js

@@ -1,21 +1,16 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                 */
+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
-var r = "haze-Slider__base";
-function i({ value: i, className: a, onChange: o, ...s }) {
-	let [c, l] = n(i, 50);
-	return /* @__PURE__ */ t("input", {
-		type: "range",
-		value: c,
-		onChange: (e) => {
-			l(Number(e.target.value)), o?.(e);
-		},
-		...s,
-		className: e([r, a])
+function r({ value: r, className: i, onChange: a, ...o }) {
+	let [s, c] = n(r, 50);
+	return /* @__PURE__ */ t(e, {
+		value: s,
+		onChange: c,
+		onNativeChange: a,
+		className: i,
+		...o
 	});
 }
 //#endregion
-export { i as default };
+export { r as default };

package/dist/components/Slider/SliderCore.js

@@ -0,0 +1,19 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                     */
+import { jsx as t } 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])
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/Switch/Switch.js

@@ -1,44 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                 */
+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
-var r = "haze-Switch__track", i = "haze-Switch__trackChecked", a = "haze-Switch__thumb", o = "haze-Switch__trackSm", s = "haze-Switch__trackMd", c = "haze-Switch__trackLg", l = "haze-Switch__thumbSm", u = "haze-Switch__thumbMd", d = "haze-Switch__thumbLg", f = "haze-Switch__thumbCheckedSm", p = "haze-Switch__thumbCheckedMd", m = "haze-Switch__thumbCheckedLg", h = {
-	sm: o,
-	md: s,
-	lg: c
-}, g = {
-	sm: l,
-	md: u,
-	lg: d
-}, _ = {
-	sm: f,
-	md: p,
-	lg: m
-};
-function v({ checked: o, size: s = "md", className: c, onClick: l, ...u }) {
-	let [d, f] = n(o, !1);
-	return /* @__PURE__ */ t("button", {
-		type: "button",
-		role: "switch",
-		"aria-checked": d,
-		onClick: (e) => {
-			f((e) => !e), l?.(e);
-		},
-		...u,
-		className: e([
-			r,
-			h[s],
-			d && i,
-			c
-		]),
-		children: t("span", { className: e([
-			a,
-			g[s],
-			d && _[s]
-		]) })
+function r({ checked: r, size: i, className: a, onClick: o, ...s }) {
+	let [c, l] = n(r, !1);
+	return /* @__PURE__ */ t(e, {
+		checked: c,
+		onChange: l,
+		onNativeClick: o,
+		size: i,
+		className: a,
+		...s
 	});
 }
 //#endregion
-export { v as default };
+export { r as default };

package/dist/components/Switch/SwitchCore.js

@@ -0,0 +1,42 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                     */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Switch/SwitchCore.tsx
+var n = "haze-SwitchCore__track", r = "haze-SwitchCore__trackChecked", i = "haze-SwitchCore__thumb", a = "haze-SwitchCore__trackSm", o = "haze-SwitchCore__trackMd", s = "haze-SwitchCore__trackLg", c = "haze-SwitchCore__thumbSm", l = "haze-SwitchCore__thumbMd", u = "haze-SwitchCore__thumbLg", d = "haze-SwitchCore__thumbCheckedSm", f = "haze-SwitchCore__thumbCheckedMd", p = "haze-SwitchCore__thumbCheckedLg", m = {
+	sm: a,
+	md: o,
+	lg: s
+}, h = {
+	sm: c,
+	md: l,
+	lg: u
+}, g = {
+	sm: d,
+	md: f,
+	lg: p
+};
+function _({ checked: a, onChange: o, onNativeClick: s, size: c = "md", className: l, ...u }) {
+	return /* @__PURE__ */ t("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": a,
+		onClick: (e) => {
+			o(!a), s?.(e);
+		},
+		...u,
+		className: e([
+			n,
+			m[c],
+			a && r,
+			l
+		]),
+		children: t("span", { className: e([
+			i,
+			h[c],
+			a && g[c]
+		]) })
+	});
+}
+//#endregion
+export { _ as default };

package/dist/components/TagInput/TagInput.js

@@ -1,76 +1,22 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                   */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+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
-var c = "haze-TagInput__container", l = "haze-TagInput__listWrap", u = "haze-TagInput__tag", d = "haze-TagInput__removeBtn", f = "haze-TagInput__inputEl";
-function p({ value: p, onChange: m, placeholder: h, maxTags: g, disabled: _, className: v, id: y, "aria-invalid": b, "aria-describedby": x }) {
-	let [S, C] = r(p, []), [w, T] = s(""), E = o(null), D = o(null), O = o(null);
-	a(() => {
-		let e = O.current;
-		if (e === null) return;
-		if (O.current = null, S.length === 0) {
-			D.current?.focus();
-			return;
-		}
-		let t = Math.min(e, S.length - 1);
-		(E.current?.querySelectorAll("[aria-label^=\"Remove \"]"))?.[t]?.focus();
-	}, [S]);
-	let k = i((e) => {
-		let t = e.trim();
-		if (!t || S.includes(t) || g && S.length >= g) return;
-		let n = [...S, t];
-		C(n), m?.(n), T("");
-	}, [
-		S,
-		g,
-		C,
-		m
-	]), A = i((e) => {
-		let t = S.filter((t, n) => n !== e);
-		C(t), m?.(t), O.current = t.length === 0 ? 0 : Math.min(e, t.length - 1);
-	}, [
-		S,
-		C,
-		m
-	]), j = (e) => {
-		e.key === "Enter" || e.key === "," ? (e.preventDefault(), k(w)) : e.key === "Backspace" && !w && S.length > 0 && A(S.length - 1);
-	}, M = h || "Add tag", N = `${S.length} tag${S.length === 1 ? "" : "s"}`;
-	return /* @__PURE__ */ n("div", {
-		ref: E,
-		className: e([c, v]),
-		children: [/* @__PURE__ */ t("ul", {
-			className: e([l]),
-			children: S.map((r, i) => /* @__PURE__ */ n("li", {
-				className: e([u]),
-				children: [r, /* @__PURE__ */ t("button", {
-					type: "button",
-					onClick: () => A(i),
-					onKeyDown: (e) => {
-						e.key === "Backspace" && (e.preventDefault(), A(i));
-					},
-					"aria-label": `Remove ${r}`,
-					disabled: _,
-					className: e([d]),
-					children: "x"
-				})]
-			}, i))
-		}), /* @__PURE__ */ t("input", {
-			ref: D,
-			id: y,
-			"aria-invalid": b,
-			"aria-describedby": x,
-			value: w,
-			onChange: (e) => T(e.target.value),
-			onKeyDown: j,
-			placeholder: S.length === 0 ? h : void 0,
-			"aria-label": S.length > 0 ? `${M}, ${N}` : M,
-			disabled: _,
-			className: e([f])
-		})]
+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, []);
+	return /* @__PURE__ */ t(e, {
+		value: f,
+		onChange: (e) => {
+			p(e), i?.(e);
+		},
+		placeholder: a,
+		maxTags: o,
+		disabled: s,
+		className: c,
+		id: l,
+		"aria-invalid": u,
+		"aria-describedby": d
 	});
 }
 //#endregion
-export { p as default };
+export { r as default };

package/dist/components/TagInput/TagInputCore.js

@@ -0,0 +1,68 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+//#region src/lib/components/TagInput/TagInputCore.tsx
+var s = "haze-TagInputCore__container", c = "haze-TagInputCore__listWrap", l = "haze-TagInputCore__tag", u = "haze-TagInputCore__removeBtn", d = "haze-TagInputCore__inputEl";
+function f({ value: f, onChange: p, placeholder: m, maxTags: h, disabled: g, className: _, id: v, "aria-invalid": y, "aria-describedby": b }) {
+	let [x, S] = o(""), C = a(null), w = a(null), T = a(null);
+	i(() => {
+		let e = T.current;
+		if (e === null) return;
+		if (T.current = null, f.length === 0) {
+			w.current?.focus();
+			return;
+		}
+		let t = Math.min(e, f.length - 1);
+		(C.current?.querySelectorAll("[aria-label^=\"Remove \"]"))?.[t]?.focus();
+	}, [f]);
+	let E = r((e) => {
+		let t = e.trim();
+		!t || f.includes(t) || h && f.length >= h || (p([...f, t]), S(""));
+	}, [
+		f,
+		h,
+		p
+	]), D = r((e) => {
+		let t = f.filter((t, n) => n !== e);
+		p(t), T.current = t.length === 0 ? 0 : Math.min(e, t.length - 1);
+	}, [f, p]), O = (e) => {
+		e.key === "Enter" || e.key === "," ? (e.preventDefault(), E(x)) : e.key === "Backspace" && !x && f.length > 0 && D(f.length - 1);
+	}, k = m || "Add tag", A = `${f.length} tag${f.length === 1 ? "" : "s"}`;
+	return /* @__PURE__ */ n("div", {
+		ref: C,
+		className: e([s, _]),
+		children: [/* @__PURE__ */ t("ul", {
+			className: e([c]),
+			children: f.map((r, i) => /* @__PURE__ */ n("li", {
+				className: e([l]),
+				children: [r, /* @__PURE__ */ t("button", {
+					type: "button",
+					onClick: () => D(i),
+					onKeyDown: (e) => {
+						e.key === "Backspace" && (e.preventDefault(), D(i));
+					},
+					"aria-label": `Remove ${r}`,
+					disabled: g,
+					className: e([u]),
+					children: "x"
+				})]
+			}, i))
+		}), /* @__PURE__ */ t("input", {
+			ref: w,
+			id: v,
+			"aria-invalid": y,
+			"aria-describedby": b,
+			value: x,
+			onChange: (e) => S(e.target.value),
+			onKeyDown: O,
+			placeholder: f.length === 0 ? m : void 0,
+			"aria-label": f.length > 0 ? `${k}, ${A}` : k,
+			disabled: g,
+			className: e([d])
+		})]
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/Textarea/Textarea.js

@@ -1,28 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                   */
+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
-var r = "haze-Textarea__base", i = {
-	sm: "haze-Textarea__sm",
-	md: "haze-Textarea__md",
-	lg: "haze-Textarea__lg"
-};
-function a({ value: a, size: o = "md", className: s, onChange: c, ...l }) {
-	let [u, d] = n(a, "");
-	return /* @__PURE__ */ t("textarea", {
-		value: u,
-		onChange: (e) => {
-			d(e.target.value), c?.(e);
-		},
-		...l,
-		className: e([
-			r,
-			i[o],
-			s
-		])
+function r({ value: r, size: i, className: a, onChange: o, ...s }) {
+	let [c, l] = n(r, "");
+	return /* @__PURE__ */ t(e, {
+		value: c,
+		onChange: l,
+		onNativeChange: o,
+		size: i,
+		className: a,
+		...s
 	});
 }
 //#endregion
-export { a as default };
+export { r as default };