haze-ui 1.5.6 → 1.6.0

package/dist/components/Affix/Affix.js

@@ -0,0 +1,22 @@
+/* empty css                */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Affix/Affix.tsx
+var n = "haze-Affix__affix", r = "haze-Affix__posTop", i = "haze-Affix__posBottom";
+function a({ position: a = "top", offset: o = 0, children: s, className: c, style: l }) {
+	let u = a === "top" ? r : i;
+	return /* @__PURE__ */ t("div", {
+		style: {
+			...a === "top" ? { top: o } : { bottom: o },
+			...l
+		},
+		className: e([
+			n,
+			u,
+			c
+		]),
+		children: s
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Alert/Alert.js

@@ -1,7 +1,7 @@
 /* empty css                */
 import { classnames as e } from "babel-runtime-jsx-plus";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useState as r } from "react";
+import { useControl as r } from "react-use-control";
 //#region src/lib/components/Alert/Alert.tsx
 var i = "haze-Alert__base", a = {
 	info: "haze-Alert__info",
@@ -9,26 +9,30 @@ var i = "haze-Alert__base", a = {
 	warning: "haze-Alert__warning",
 	danger: "haze-Alert__danger"
 }, o = "haze-Alert__contentStyle", s = "haze-Alert__closeBtn";
-function c({ variant: c = "info", closable: l = !1, className: u, children: d }) {
-	let [f, p] = r(!0);
-	return f ? /* @__PURE__ */ n("div", {
+function c({ visible: c, onClose: l, variant: u = "info", closable: d = !1, className: f, children: p }) {
+	let [m, h] = r(c, !0);
+	if (!m) return null;
+	let g = () => {
+		h(!1), l?.();
+	};
+	return /* @__PURE__ */ n("div", {
 		role: "alert",
 		className: e([
 			i,
-			a[c],
-			u
+			a[u],
+			f
 		]),
 		children: [/* @__PURE__ */ t("div", {
 			className: o,
-			children: d
-		}), l && /* @__PURE__ */ t("button", {
+			children: p
+		}), d && /* @__PURE__ */ t("button", {
 			type: "button",
 			className: s,
 			"aria-label": "Close",
-			onClick: () => p(!1),
+			onClick: g,
 			children: "×"
 		})]
-	}) : null;
+	});
 }
 //#endregion
 export { c as default };

package/dist/components/ApprovalCard/ApprovalCard.js

@@ -0,0 +1,42 @@
+/* empty css                       */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/ApprovalCard/ApprovalCard.tsx
+var r = "haze-ApprovalCard__card", i = "haze-ApprovalCard__header", a = "haze-ApprovalCard__body", o = "haze-ApprovalCard__desc", s = "haze-ApprovalCard__content", c = "haze-ApprovalCard__actions", l = "haze-ApprovalCard__btn", u = "haze-ApprovalCard__denyBtn", d = "haze-ApprovalCard__approveBtn";
+function f({ title: f = "Approval Required", description: p, onApprove: m, onDeny: h, approveText: g = "Approve", denyText: _ = "Deny", children: v, className: y }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, y]),
+		children: [
+			/* @__PURE__ */ t("div", {
+				className: e([i]),
+				children: f
+			}),
+			/* @__PURE__ */ n("div", {
+				className: e([a]),
+				children: [p && /* @__PURE__ */ t("div", {
+					className: e([o]),
+					children: p
+				}), v && /* @__PURE__ */ t("div", {
+					className: e([s]),
+					children: v
+				})]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: e([c]),
+				children: [/* @__PURE__ */ t("button", {
+					type: "button",
+					onClick: h,
+					className: e([l, u]),
+					children: _
+				}), /* @__PURE__ */ t("button", {
+					type: "button",
+					onClick: m,
+					className: e([l, d]),
+					children: g
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,17 @@
+/* empty css                      */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/AspectRatio/AspectRatio.tsx
+var n = "haze-AspectRatio__wrapper", r = "haze-AspectRatio__inner";
+function i({ ratio: i = 16 / 9, children: a, className: o }) {
+	return /* @__PURE__ */ t("div", {
+		style: { paddingBottom: `${1 / i * 100}%` },
+		className: e([n, o]),
+		children: /* @__PURE__ */ t("div", {
+			className: e([r]),
+			children: a
+		})
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/BackToTop/BackToTop.js

@@ -0,0 +1,28 @@
+/* empty css                    */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as n, useEffect as r, useState as i } from "react";
+//#region src/lib/components/BackToTop/BackToTop.tsx
+var a = "haze-BackToTop__button", o = "haze-BackToTop__hidden";
+function s({ threshold: s = 300, children: c = "↑", className: l }) {
+	let [u, d] = i(!1), f = n(() => {
+		d(window.scrollY > s);
+	}, [s]);
+	return r(() => (window.addEventListener("scroll", f, { passive: !0 }), () => window.removeEventListener("scroll", f)), [f]), /* @__PURE__ */ t("button", {
+		onClick: () => {
+			window.scrollTo({
+				top: 0,
+				behavior: "smooth"
+			});
+		},
+		"aria-label": "Back to top",
+		className: e([
+			a,
+			!u && o,
+			l
+		]),
+		children: c
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Banner/Banner.js

@@ -0,0 +1,36 @@
+/* empty css                 */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+//#region src/lib/components/Banner/Banner.tsx
+var i = "haze-Banner__banner", a = {
+	info: "haze-Banner__info",
+	success: "haze-Banner__success",
+	warning: "haze-Banner__warning",
+	danger: "haze-Banner__danger"
+}, o = "haze-Banner__closeBtn", s = "haze-Banner__content";
+function c({ visible: c, onClose: l, variant: u = "info", children: d, className: f }) {
+	let [p, m] = r(c, !0);
+	return p ? /* @__PURE__ */ n("div", {
+		role: "alert",
+		className: e([
+			i,
+			a[u],
+			f
+		]),
+		children: [/* @__PURE__ */ t("div", {
+			className: e([s]),
+			children: d
+		}), l && /* @__PURE__ */ t("button", {
+			type: "button",
+			onClick: () => {
+				m(!1), l?.();
+			},
+			"aria-label": "Close",
+			className: e([o]),
+			children: "x"
+		})]
+	}) : null;
+}
+//#endregion
+export { c as default };

package/dist/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,22 @@
+/* empty css                      */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+//#region src/lib/components/BottomSheet/BottomSheet.tsx
+var i = "haze-BottomSheet__overlay", a = "haze-BottomSheet__sheet", o = "haze-BottomSheet__handle";
+function s({ open: s, onClose: c, children: l, className: u }) {
+	let [d, f] = r(s, !1);
+	return d ? /* @__PURE__ */ t("div", {
+		onClick: () => {
+			f(!1), c?.();
+		},
+		className: e([i, u]),
+		children: /* @__PURE__ */ n("div", {
+			onClick: (e) => e.stopPropagation(),
+			className: e([a]),
+			children: [/* @__PURE__ */ t("div", { className: e([o]) }), l]
+		})
+	}) : null;
+}
+//#endregion
+export { s as default };

package/dist/components/ChatContainer/ChatContainer.js

@@ -0,0 +1,25 @@
+/* empty css                        */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+import { useEffect as n, useRef as r } from "react";
+//#region src/lib/components/ChatContainer/ChatContainer.tsx
+var i = "haze-ChatContainer__container";
+function a({ children: a, autoScroll: o = !0, className: s }) {
+	let c = r(null);
+	return n(() => {
+		if (!o || !c.current) return;
+		let e = c.current, t = new MutationObserver(() => {
+			e.scrollTop = e.scrollHeight;
+		});
+		return t.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), e.scrollTop = e.scrollHeight, () => t.disconnect();
+	}, [o]), /* @__PURE__ */ t("div", {
+		ref: c,
+		className: e([i, s]),
+		children: a
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/ChatInput/ChatInput.js

@@ -0,0 +1,45 @@
+/* empty css                    */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+import { useCallback as i, useRef as a } from "react";
+//#region src/lib/components/ChatInput/ChatInput.tsx
+var o = "haze-ChatInput__wrapper", s = "haze-ChatInput__textarea", c = "haze-ChatInput__sendBtn";
+function l({ value: l, onSend: u, placeholder: d = "Type a message...", disabled: f, maxLength: p, className: m }) {
+	let [h, g] = r(l, ""), _ = a(null), v = i(() => {
+		let e = h.trim();
+		!e || f || (u?.(e), g(""), _.current && (_.current.style.height = "auto"));
+	}, [
+		h,
+		f,
+		u,
+		g
+	]);
+	return /* @__PURE__ */ n("div", {
+		className: e([o, m]),
+		children: [/* @__PURE__ */ t("textarea", {
+			ref: _,
+			value: h,
+			onChange: (e) => {
+				g(e.target.value), _.current && (_.current.style.height = "auto", _.current.style.height = `${_.current.scrollHeight}px`);
+			},
+			onKeyDown: (e) => {
+				e.key === "Enter" && !e.shiftKey && (e.preventDefault(), v());
+			},
+			placeholder: d,
+			disabled: f,
+			maxLength: p,
+			rows: 1,
+			className: e([s])
+		}), /* @__PURE__ */ t("button", {
+			type: "button",
+			onClick: v,
+			disabled: f || !h.trim(),
+			"aria-label": "Send",
+			className: e([c]),
+			children: "↑"
+		})]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/ChatMessage/ChatMessage.js

@@ -0,0 +1,45 @@
+/* empty css                      */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/ChatMessage/ChatMessage.tsx
+var r = "haze-ChatMessage__wrapper", i = "haze-ChatMessage__wrapperUser", a = "haze-ChatMessage__avatarSlot", o = "haze-ChatMessage__body", s = "haze-ChatMessage__header", c = "haze-ChatMessage__headerUser", l = "haze-ChatMessage__bubble", u = "haze-ChatMessage__bubbleUser", d = "haze-ChatMessage__bubbleAssistant", f = "haze-ChatMessage__bubbleSystem", p = "haze-ChatMessage__statusText", m = "haze-ChatMessage__statusError", h = {
+	user: u,
+	assistant: d,
+	system: f
+};
+function g({ role: u, avatar: d, name: f, timestamp: g, status: _, children: v, className: y }) {
+	let b = u === "user";
+	return /* @__PURE__ */ n("div", {
+		className: e([
+			r,
+			b && i,
+			y
+		]),
+		children: [u !== "system" && /* @__PURE__ */ t("div", {
+			className: e([a]),
+			children: d || (u === "user" ? "U" : "A")
+		}), /* @__PURE__ */ n("div", {
+			className: e([o]),
+			children: [
+				(f || g) && /* @__PURE__ */ n("div", {
+					className: e([s, b && c]),
+					children: [f && /* @__PURE__ */ t("span", { children: f }), g && /* @__PURE__ */ t("span", { children: g })]
+				}),
+				/* @__PURE__ */ t("div", {
+					className: e([l, h[u]]),
+					children: v
+				}),
+				_ && /* @__PURE__ */ n("div", {
+					className: e([p, _ === "error" && m]),
+					children: [
+						_ === "sending" && "Sending...",
+						_ === "sent" && "Sent",
+						_ === "error" && "Failed to send"
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/Chip/Chip.js

@@ -0,0 +1,42 @@
+/* empty css               */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/Chip/Chip.tsx
+var r = "haze-Chip__base", i = {
+	default: "haze-Chip__default",
+	primary: "haze-Chip__primary",
+	success: "haze-Chip__success",
+	warning: "haze-Chip__warning",
+	danger: "haze-Chip__danger"
+}, a = {
+	default: "haze-Chip__default",
+	primary: "haze-Chip__primary",
+	success: "haze-Chip__success",
+	warning: "haze-Chip__warning",
+	danger: "haze-Chip__danger"
+}, o = "haze-Chip__iconStyle", s = "haze-Chip__closeBtn";
+function c({ variant: c = "solid", color: l = "default", icon: u, onClose: d, className: f, children: p }) {
+	return /* @__PURE__ */ n("span", {
+		className: e([
+			r,
+			c === "outline" ? a[l] : i[l],
+			f
+		]),
+		children: [
+			u && /* @__PURE__ */ t("span", {
+				className: e([o]),
+				children: u
+			}),
+			p,
+			d && /* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: d,
+				"aria-label": "Remove",
+				className: e([s]),
+				children: "×"
+			})
+		]
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,19 @@
+/* empty css                    */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/CodeBlock/CodeBlock.tsx
+var r = "haze-CodeBlock__block", i = "haze-CodeBlock__pre", a = "haze-CodeBlock__lang";
+function o({ children: o, language: s, className: c }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, c]),
+		children: [s && /* @__PURE__ */ t("span", {
+			className: e([a]),
+			children: s
+		}), /* @__PURE__ */ t("pre", {
+			className: e([i]),
+			children: /* @__PURE__ */ t("code", { children: o })
+		})]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/Collapsible/Collapsible.js

@@ -0,0 +1,46 @@
+/* empty css                      */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
+import { createContext as r, useContext as i } from "react";
+//#region src/lib/components/Collapsible/Collapsible.tsx
+var a = r(void 0);
+function o() {
+	let e = i(a);
+	if (!e) throw Error("Collapsible sub-components must be used within <Collapsible>");
+	return e;
+}
+var s = "haze-Collapsible__base";
+function c({ open: r, defaultOpen: i = !1, children: o, className: c }) {
+	let [l, u] = n(r, i);
+	return /* @__PURE__ */ t(a.Provider, {
+		value: {
+			open: l,
+			toggle: () => u((e) => !e)
+		},
+		children: /* @__PURE__ */ t("div", {
+			className: e([s, c]),
+			children: o
+		})
+	});
+}
+var l = "haze-Collapsible__triggerStyle";
+function u({ children: n, className: r }) {
+	let { toggle: i } = o();
+	return /* @__PURE__ */ t("button", {
+		type: "button",
+		onClick: i,
+		className: e([l, r]),
+		children: n
+	});
+}
+var d = "haze-Collapsible__contentStyle";
+function f({ children: n, className: r }) {
+	let { open: i } = o();
+	return i ? /* @__PURE__ */ t("div", {
+		className: e([d, r]),
+		children: n
+	}) : null;
+}
+//#endregion
+export { c as Collapsible, f as CollapsibleContent, u as CollapsibleTrigger };

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,45 @@
+/* empty css                      */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+//#region src/lib/components/ColorPicker/ColorPicker.tsx
+var i = "haze-ColorPicker__container", a = "haze-ColorPicker__previewRow", o = "haze-ColorPicker__colorInput", s = "haze-ColorPicker__textInput", c = "haze-ColorPicker__presetsRow", l = "haze-ColorPicker__presetBtn", u = "haze-ColorPicker__activePreset";
+function d({ value: d, presets: f, onChange: p, className: m }) {
+	let [h, g] = r(d, "#000000"), _ = (e) => {
+		let t = e.target.value;
+		g(t), p?.(t);
+	}, v = (e) => {
+		let t = e.target.value;
+		g(t), p?.(t);
+	}, y = (e) => {
+		g(e), p?.(e);
+	};
+	return /* @__PURE__ */ n("div", {
+		className: e([i, m]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([a]),
+			children: [/* @__PURE__ */ t("input", {
+				type: "color",
+				value: h,
+				onChange: v,
+				className: e([o])
+			}), /* @__PURE__ */ t("input", {
+				type: "text",
+				value: h,
+				onChange: _,
+				className: e([s])
+			})]
+		}), f && f.length > 0 && /* @__PURE__ */ t("div", {
+			className: e([c]),
+			children: f.map((n) => /* @__PURE__ */ t("button", {
+				type: "button",
+				style: { background: n },
+				"aria-label": n,
+				onClick: () => y(n),
+				className: e([l, h === n && u])
+			}, n))
+		})]
+	});
+}
+//#endregion
+export { d as default };

package/dist/components/Combobox/Combobox.js

@@ -6,41 +6,41 @@ import { useControl as i } from "react-use-control";
 import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
 //#region src/lib/components/Combobox/Combobox.tsx
 var l = "haze-Combobox__wrapper", u = "haze-Combobox__input", d = "haze-Combobox__listbox", f = "haze-Combobox__hidden";
-function p({ value: p, options: m, placeholder: h, className: g }) {
-	let [_, v] = i(p, ""), [y, b] = c(""), [x, S] = c(!1), [C, w] = c(-1), T = o(), E = s(null), D = m.filter((e) => e.label.toLowerCase().includes(y.toLowerCase()));
+function p({ value: p, open: m, options: h, placeholder: g, className: _ }) {
+	let [v, y] = i(p, ""), [b, x] = c(""), [S, C] = i(m, !1), [w, T] = c(-1), E = o(), D = s(null), O = h.filter((e) => e.label.toLowerCase().includes(b.toLowerCase()));
 	a(() => {
-		w(-1);
-	}, [y]);
-	let O = (e) => {
-		v(e), b(m.find((t) => t.value === e)?.label ?? e), S(!1), E.current?.focus();
-	}, k = (e) => {
-		e.key === "ArrowDown" ? (e.preventDefault(), w((e) => Math.min(e + 1, D.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), w((e) => Math.max(e - 1, 0))) : e.key === "Enter" && C >= 0 && D[C] ? (e.preventDefault(), O(D[C].value)) : e.key === "Escape" && S(!1);
+		T(-1);
+	}, [b]);
+	let k = (e) => {
+		y(e), x(h.find((t) => t.value === e)?.label ?? e), C(!1), D.current?.focus();
+	}, A = (e) => {
+		e.key === "ArrowDown" ? (e.preventDefault(), T((e) => Math.min(e + 1, O.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), T((e) => Math.max(e - 1, 0))) : e.key === "Enter" && w >= 0 && O[w] ? (e.preventDefault(), k(O[w].value)) : e.key === "Escape" && C(!1);
 	};
 	return /* @__PURE__ */ r("div", {
-		className: t([l, g]),
+		className: t([l, _]),
 		children: [/* @__PURE__ */ n("input", {
-			ref: E,
+			ref: D,
 			role: "combobox",
-			"aria-expanded": x,
-			"aria-controls": T,
+			"aria-expanded": S,
+			"aria-controls": E,
 			"aria-autocomplete": "list",
 			className: u,
-			value: y,
-			placeholder: h,
+			value: b,
+			placeholder: g,
 			onChange: (e) => {
-				b(e.target.value), S(!0);
+				x(e.target.value), C(!0);
 			},
-			onFocus: () => S(!0),
-			onKeyDown: k
+			onFocus: () => C(!0),
+			onKeyDown: A
 		}), /* @__PURE__ */ n("div", {
-			id: T,
+			id: E,
 			role: "listbox",
-			className: t([d, !x && f]),
-			children: D.map((t, r) => /* @__PURE__ */ n(e, {
+			className: t([d, !S && f]),
+			children: O.map((t, r) => /* @__PURE__ */ n(e, {
 				value: t.value,
-				highlighted: r === C,
-				selected: t.value === _,
-				onSelect: O,
+				highlighted: r === w,
+				selected: t.value === v,
+				onSelect: k,
 				children: t.label
 			}, t.value))
 		})]

package/dist/components/Command/Command.js

@@ -0,0 +1,58 @@
+/* empty css                  */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
+import { createContext as r, useContext as i, useMemo as a } from "react";
+//#region src/lib/components/Command/Command.tsx
+var o = r(void 0);
+function s() {
+	let e = i(o);
+	if (!e) throw Error("Command sub-components must be used within <Command>");
+	return e;
+}
+var c = "haze-Command__base";
+function l({ query: r, children: i, className: s }) {
+	let [l, u] = n(r, ""), d = a(() => ({
+		query: l,
+		setQuery: u
+	}), [l, u]);
+	return /* @__PURE__ */ t(o.Provider, {
+		value: d,
+		children: /* @__PURE__ */ t("div", {
+			role: "combobox",
+			className: e([c, s]),
+			children: i
+		})
+	});
+}
+var u = "haze-Command__inputStyle";
+function d({ placeholder: n, className: r }) {
+	let { query: i, setQuery: a } = s();
+	return /* @__PURE__ */ t("input", {
+		type: "text",
+		placeholder: n,
+		value: i,
+		onChange: (e) => a(e.target.value),
+		className: e([u, r])
+	});
+}
+var f = "haze-Command__listStyle";
+function p({ children: n, className: r }) {
+	return /* @__PURE__ */ t("div", {
+		role: "listbox",
+		className: e([f, r]),
+		children: n
+	});
+}
+var m = "haze-Command__itemStyle";
+function h({ children: n, className: r, onSelect: i }) {
+	let { query: a } = s();
+	return !a || (typeof n == "string" ? n : "").toLowerCase().includes(a.toLowerCase()) ? /* @__PURE__ */ t("div", {
+		role: "option",
+		onClick: i,
+		className: e([m, r]),
+		children: n
+	}) : null;
+}
+//#endregion
+export { d as CommandInput, h as CommandItem, p as CommandList, l as default };