haze-ui 1.5.6 → 1.6.0

package/dist/components/Segmented/Segmented.js

@@ -0,0 +1,42 @@
+/* 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";
+//#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);
+		})
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,39 @@
+/* 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/Spinner/Spinner.tsx
+var r = "haze-Spinner__base", i = {
+	sm: "haze-Spinner__sm",
+	md: "haze-Spinner__md",
+	lg: "haze-Spinner__lg"
+};
+function a({ size: a = "md", className: o }) {
+	return /* @__PURE__ */ t("span", {
+		role: "status",
+		"aria-label": "Loading",
+		className: e([
+			r,
+			i[a],
+			o
+		]),
+		children: /* @__PURE__ */ n("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ t("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10",
+				stroke: "var(--haze-color-border)",
+				strokeWidth: "3"
+			}), /* @__PURE__ */ t("path", {
+				d: "M12 2a10 10 0 0 1 10 10",
+				stroke: "var(--haze-color-primary)",
+				strokeWidth: "3",
+				strokeLinecap: "round"
+			})]
+		})
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/Stat/Stat.js

@@ -0,0 +1,52 @@
+/* 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/Stat/Stat.tsx
+var r = "haze-Stat__base", i = "haze-Stat__titleStyle", a = "haze-Stat__valueRow", o = "haze-Stat__valueStyle", s = {
+	up: "haze-Stat__up",
+	down: "haze-Stat__down",
+	neutral: "haze-Stat__neutral"
+}, c = "haze-Stat__trendStyle", l = "haze-Stat__descStyle";
+function u({ title: u, value: d, description: f, trend: p, trendValue: m, prefix: h, suffix: g, className: _ }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, _]),
+		children: [
+			/* @__PURE__ */ t("div", {
+				className: e([i]),
+				children: u
+			}),
+			/* @__PURE__ */ n("div", {
+				className: e([a]),
+				children: [
+					h,
+					/* @__PURE__ */ t("div", {
+						className: e([o]),
+						children: d
+					}),
+					g,
+					p && m && /* @__PURE__ */ n("div", {
+						className: e([c, s[p]]),
+						children: [
+							p === "up" ? "↑" : p === "down" ? "↓" : "→",
+							" ",
+							m
+						]
+					})
+				]
+			}),
+			f && /* @__PURE__ */ t("div", {
+				className: e([l]),
+				children: f
+			})
+		]
+	});
+}
+var d = "haze-Stat__groupStyle";
+function f({ children: n, className: r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e([d, r]),
+		children: n
+	});
+}
+//#endregion
+export { u as Stat, f as StatGroup };

package/dist/components/StepTimeline/StepTimeline.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";
+//#region src/lib/components/StepTimeline/StepTimeline.tsx
+var r = "haze-StepTimeline__list", i = "haze-StepTimeline__item", a = "haze-StepTimeline__marker", o = "haze-StepTimeline__markerPending", s = "haze-StepTimeline__markerActive", c = "haze-StepTimeline__markerDone", l = "haze-StepTimeline__markerError", u = "haze-StepTimeline__body", d = "haze-StepTimeline__labelStyle", f = "haze-StepTimeline__descriptionStyle", p = {
+	pending: o,
+	active: s,
+	done: c,
+	error: l
+};
+function m({ label: r, description: o, status: s = "pending", className: c }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([i, c]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([a, p[s]]),
+			children: [s === "done" && "✓", s === "error" && "!"]
+		}), /* @__PURE__ */ n("div", {
+			className: e([u]),
+			children: [/* @__PURE__ */ t("div", {
+				className: e([d]),
+				children: r
+			}), o && /* @__PURE__ */ t("div", {
+				className: e([f]),
+				children: o
+			})]
+		})]
+	});
+}
+function h({ children: n, className: i }) {
+	return /* @__PURE__ */ t("div", {
+		className: e([r, i]),
+		children: n
+	});
+}
+//#endregion
+export { m as StepTimelineItem, h as default };

package/dist/components/Stepper/Step.js

@@ -0,0 +1,38 @@
+import { useStepperContext as e } from "./StepperContext.js";
+/* empty css               */
+import { classnames as t } from "babel-runtime-jsx-plus";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/lib/components/Stepper/Step.tsx
+var i = "haze-Step__step", a = "haze-Step__stepConnector", o = "haze-Step__stepActiveConnector", s = "haze-Step__circle", c = "haze-Step__activeCircle", l = "haze-Step__completedCircle", u = "haze-Step__titleStyle", d = "haze-Step__activeTitle", f = "haze-Step__completedTitle", p = "haze-Step__descStyle";
+function m({ title: m, description: h, className: g, index: _ = 0 }) {
+	let { activeStep: v, totalSteps: y } = e(), b = _ === v, x = _ < v;
+	return /* @__PURE__ */ r("div", {
+		role: "listitem",
+		className: t([i, g]),
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: t([
+					s,
+					b && c,
+					x && l
+				]),
+				children: x ? "✓" : _ + 1
+			}),
+			/* @__PURE__ */ n("div", {
+				className: t([
+					u,
+					b && d,
+					x && f
+				]),
+				children: m
+			}),
+			h && /* @__PURE__ */ n("div", {
+				className: t([p]),
+				children: h
+			}),
+			_ < y - 1 && /* @__PURE__ */ n("div", { className: t([a, x && o]) })
+		]
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,25 @@
+import { StepperProvider as e } from "./StepperContext.js";
+/* empty css                  */
+import { classnames as t } from "babel-runtime-jsx-plus";
+import { jsx as n } from "react/jsx-runtime";
+import { useControl as r } from "react-use-control";
+import { Children as i, cloneElement as a, isValidElement as o } from "react";
+//#region src/lib/components/Stepper/Stepper.tsx
+var s = "haze-Stepper__stepper";
+function c({ activeStep: c, children: l, className: u }) {
+	let [d, f] = r(c, 0);
+	return /* @__PURE__ */ n(e, {
+		value: {
+			activeStep: d,
+			setActiveStep: f,
+			totalSteps: i.count(l)
+		},
+		children: /* @__PURE__ */ n("div", {
+			role: "list",
+			className: t([s, u]),
+			children: i.map(l, (e, t) => o(e) ? a(e, { index: t }) : e)
+		})
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/Stepper/StepperContext.js

@@ -0,0 +1,10 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/lib/components/Stepper/StepperContext.ts
+var n = e(void 0), r = n.Provider;
+function i() {
+	let e = t(n);
+	if (!e) throw Error("Step must be used within <Stepper>");
+	return e;
+}
+//#endregion
+export { r as StepperProvider, i as useStepperContext };

package/dist/components/StreamingText/StreamingText.js

@@ -0,0 +1,34 @@
+/* empty css                        */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useEffect as r, useRef as i, useState as a } from "react";
+//#region src/lib/components/StreamingText/StreamingText.tsx
+var o = "haze-StreamingText__wrapper", s = "haze-StreamingText__cursor";
+function c({ text: c, speed: l = 20, onComplete: u, showCursor: d = !0, className: f }) {
+	let [p, m] = a(""), h = i(0), g = i(!1);
+	r(() => {
+		h.current = 0, m(""), g.current = !1;
+	}, [c]), r(() => {
+		if (g.current) return;
+		if (h.current >= c.length) {
+			g.current = !0, u?.();
+			return;
+		}
+		let e = setTimeout(() => {
+			h.current += 1, m(c.slice(0, h.current));
+		}, l);
+		return () => clearTimeout(e);
+	}, [
+		p,
+		c,
+		l,
+		u
+	]);
+	let _ = h.current >= c.length;
+	return /* @__PURE__ */ n("span", {
+		className: e([o, f]),
+		children: [p, d && !_ && /* @__PURE__ */ t("span", { className: e([s]) })]
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/SwipeAction/SwipeAction.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 { useCallback as r, useRef as i, useState as a } from "react";
+//#region src/lib/components/SwipeAction/SwipeAction.tsx
+var o = "haze-SwipeAction__wrapper", s = "haze-SwipeAction__actionsLeft", c = "haze-SwipeAction__actionsRight", l = "haze-SwipeAction__content";
+function u({ left: u, right: d, children: f, onSwipeLeft: p, onSwipeRight: m, threshold: h = 80, className: g }) {
+	let [_, v] = a(0), y = i(0), b = i(0), x = i(!1), S = r((e) => {
+		y.current = e, x.current = !0;
+	}, []), C = r((e) => {
+		if (!x.current) return;
+		let t = e - y.current, n = Math.max(-120, Math.min(120, t));
+		v(n), b.current = n;
+	}, []), w = r(() => {
+		x.current = !1, b.current > h ? m?.() : b.current < -h && p?.(), v(0), b.current = 0;
+	}, [
+		h,
+		p,
+		m
+	]);
+	return /* @__PURE__ */ n("div", {
+		className: e([o, g]),
+		children: [
+			u && /* @__PURE__ */ t("div", {
+				className: e([s]),
+				children: u
+			}),
+			d && /* @__PURE__ */ t("div", {
+				className: e([c]),
+				children: d
+			}),
+			/* @__PURE__ */ t("div", {
+				style: { transform: `translateX(${_}px)` },
+				onPointerDown: (e) => S(e.clientX),
+				onPointerMove: (e) => C(e.clientX),
+				onPointerUp: w,
+				onPointerLeave: w,
+				className: e([l]),
+				children: f
+			})
+		]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/Table/Table.js

@@ -2,17 +2,20 @@
 import { classnames as e } from "babel-runtime-jsx-plus";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Table/Table.tsx
-var n = "haze-Table__base", r = "haze-Table__stripedStyle", i = "haze-Table__borderedStyle";
-function a({ striped: a = !1, bordered: o = !1, className: s, children: c }) {
-	return /* @__PURE__ */ t("table", {
-		className: e([
-			n,
-			a && r,
-			o && i,
-			s
-		]),
-		children: c
+var n = "haze-Table__wrapper", r = "haze-Table__base", i = "haze-Table__stripedStyle", a = "haze-Table__borderedStyle";
+function o({ striped: o = !1, bordered: s = !1, className: c, children: l }) {
+	return /* @__PURE__ */ t("div", {
+		className: e([n]),
+		children: /* @__PURE__ */ t("table", {
+			className: e([
+				r,
+				o && i,
+				s && a,
+				c
+			]),
+			children: l
+		})
 	});
 }
 //#endregion
-export { a as default };
+export { o as default };

package/dist/components/TagGroup/TagGroup.js

@@ -0,0 +1,14 @@
+/* empty css                   */
+import { classnames as e } from "babel-runtime-jsx-plus";
+import { jsx as t } 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", {
+		role: "group",
+		className: e([n, i]),
+		children: r
+	});
+}
+//#endregion
+export { r as default };

package/dist/components/TagGroup/TagGroupItem.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/TagGroup/TagGroupItem.tsx
+var r = "haze-TagGroupItem__tag", i = "haze-TagGroupItem__closeBtn";
+function a({ children: a, onClose: o, className: s }) {
+	return /* @__PURE__ */ n("span", {
+		className: e([r, s]),
+		children: [a, o && /* @__PURE__ */ t("button", {
+			type: "button",
+			onClick: o,
+			"aria-label": "Remove",
+			className: e([i]),
+			children: "x"
+		})]
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/TagInput/TagInput.js

@@ -0,0 +1,51 @@
+/* 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, useState as a } from "react";
+//#region src/lib/components/TagInput/TagInput.tsx
+var o = "haze-TagInput__container", s = "haze-TagInput__tag", c = "haze-TagInput__removeBtn", l = "haze-TagInput__inputEl";
+function u({ value: u, onChange: d, placeholder: f, maxTags: p, disabled: m, className: h }) {
+	let [g, _] = r(u, []), [v, y] = a(""), b = i((e) => {
+		let t = e.trim();
+		if (!t || g.includes(t) || p && g.length >= p) return;
+		let n = [...g, t];
+		_(n), d?.(n), y("");
+	}, [
+		g,
+		p,
+		_,
+		d
+	]), x = i((e) => {
+		let t = g.filter((t, n) => n !== e);
+		_(t), d?.(t);
+	}, [
+		g,
+		_,
+		d
+	]);
+	return /* @__PURE__ */ n("div", {
+		className: e([o, h]),
+		children: [g.map((r, i) => /* @__PURE__ */ n("span", {
+			className: e([s]),
+			children: [r, /* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: () => x(i),
+				disabled: m,
+				className: e([c]),
+				children: "x"
+			})]
+		}, i)), /* @__PURE__ */ t("input", {
+			value: v,
+			onChange: (e) => y(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" || e.key === "," ? (e.preventDefault(), b(v)) : e.key === "Backspace" && !v && g.length > 0 && x(g.length - 1);
+			},
+			placeholder: g.length === 0 ? f : void 0,
+			disabled: m,
+			className: e([l])
+		})]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/ThinkingIndicator/ThinkingIndicator.js

@@ -0,0 +1,20 @@
+/* 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/ThinkingIndicator/ThinkingIndicator.tsx
+var r = "haze-ThinkingIndicator__wrapper", i = "haze-ThinkingIndicator__dots", a = "haze-ThinkingIndicator__dot", o = "haze-ThinkingIndicator__dot2", s = "haze-ThinkingIndicator__dot3";
+function c({ text: c = "Thinking", className: l }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, l]),
+		children: [/* @__PURE__ */ t("span", { children: c }), /* @__PURE__ */ n("span", {
+			className: e([i]),
+			children: [
+				/* @__PURE__ */ t("span", { className: e([a]) }),
+				/* @__PURE__ */ t("span", { className: e([a, o]) }),
+				/* @__PURE__ */ t("span", { className: e([a, s]) })
+			]
+		})]
+	});
+}
+//#endregion
+export { c as default };

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,22 @@
+/* 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";
+//#region src/lib/components/TimePicker/TimePicker.tsx
+var r = "haze-TimePicker__input";
+function i({ value: i, onChange: a, placeholder: o, className: s, ...c }) {
+	let [l, u] = n(i, "");
+	return /* @__PURE__ */ t("input", {
+		type: "time",
+		value: l,
+		placeholder: o,
+		onChange: (e) => {
+			let t = e.target.value;
+			u(t), a?.(t);
+		},
+		...c,
+		className: e([r, s])
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,47 @@
+/* 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/Timeline/Timeline.tsx
+var r = "haze-Timeline__base";
+function i({ children: n, className: i }) {
+	return /* @__PURE__ */ t("div", {
+		role: "list",
+		className: e([r, i]),
+		children: n
+	});
+}
+var a = "haze-Timeline__item", o = "haze-Timeline__dotWrapper", s = "haze-Timeline__dot", c = {
+	primary: "haze-Timeline__primary",
+	success: "haze-Timeline__success",
+	warning: "haze-Timeline__warning",
+	danger: "haze-Timeline__danger",
+	default: "haze-Timeline__default"
+}, l = "haze-Timeline__line", u = "haze-Timeline__content", d = "haze-Timeline__titleStyle", f = "haze-Timeline__descStyle", p = "haze-Timeline__timeStyle";
+function m({ title: r, description: i, time: m, color: h = "default", className: g }) {
+	return /* @__PURE__ */ n("div", {
+		role: "listitem",
+		className: e([a, g]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([o]),
+			children: [/* @__PURE__ */ t("div", { className: e([s, c[h]]) }), /* @__PURE__ */ t("div", { className: e([l]) })]
+		}), /* @__PURE__ */ n("div", {
+			className: e([u]),
+			children: [
+				/* @__PURE__ */ t("div", {
+					className: e([d]),
+					children: r
+				}),
+				i && /* @__PURE__ */ t("div", {
+					className: e([f]),
+					children: i
+				}),
+				m && /* @__PURE__ */ t("div", {
+					className: e([p]),
+					children: m
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { i as Timeline, m as TimelineItem };

package/dist/components/TokenCounter/TokenCounter.js

@@ -0,0 +1,30 @@
+/* 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/TokenCounter/TokenCounter.tsx
+var r = "haze-TokenCounter__wrapper", i = "haze-TokenCounter__bar", a = "haze-TokenCounter__fill", o = "haze-TokenCounter__fillNormal", s = "haze-TokenCounter__fillWarning", c = "haze-TokenCounter__fillDanger", l = "haze-TokenCounter__info", u = "haze-TokenCounter__count";
+function d({ used: d, max: f, label: p, className: m }) {
+	let h = f > 0 ? Math.min(100, d / f * 100) : 0, g = h > 90 ? c : h > 70 ? s : o;
+	return /* @__PURE__ */ n("div", {
+		className: e([r, m]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([l]),
+			children: [/* @__PURE__ */ t("span", { children: p || "Tokens" }), /* @__PURE__ */ n("span", {
+				className: e([u]),
+				children: [
+					d.toLocaleString(),
+					" / ",
+					f.toLocaleString()
+				]
+			})]
+		}), /* @__PURE__ */ t("div", {
+			className: e([i]),
+			children: /* @__PURE__ */ t("div", {
+				style: { width: `${h}%` },
+				className: e([a, g])
+			})
+		})]
+	});
+}
+//#endregion
+export { d as default };

package/dist/components/ToolCallCard/ToolCallCard.js

@@ -0,0 +1,57 @@
+/* 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/ToolCallCard/ToolCallCard.tsx
+var r = "haze-ToolCallCard__card", i = "haze-ToolCallCard__header", a = "haze-ToolCallCard__statusIcon", o = "haze-ToolCallCard__statusPending", s = "haze-ToolCallCard__statusRunning", c = "haze-ToolCallCard__statusDone", l = "haze-ToolCallCard__statusError", u = "haze-ToolCallCard__body", d = "haze-ToolCallCard__section", f = "haze-ToolCallCard__sectionLabel", p = "haze-ToolCallCard__content", m = {
+	pending: o,
+	running: s,
+	done: c,
+	error: l
+}, h = {
+	pending: "Pending",
+	running: "Running...",
+	done: "Done",
+	error: "Error"
+};
+function g({ name: o, input: s, output: c, status: l = "pending", className: g }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, g]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([i]),
+			children: [
+				/* @__PURE__ */ t("span", { className: e([a, m[l]]) }),
+				/* @__PURE__ */ t("span", { children: o }),
+				/* @__PURE__ */ t("span", {
+					style: {
+						marginLeft: "auto",
+						color: "var(--haze-color-text-muted)"
+					},
+					children: h[l]
+				})
+			]
+		}), (s || c) && /* @__PURE__ */ n("div", {
+			className: e([u]),
+			children: [s && /* @__PURE__ */ n("div", {
+				className: e([d]),
+				children: [/* @__PURE__ */ t("div", {
+					className: e([f]),
+					children: "Input"
+				}), /* @__PURE__ */ t("div", {
+					className: e([p]),
+					children: s
+				})]
+			}), c && /* @__PURE__ */ n("div", {
+				className: e([d]),
+				children: [/* @__PURE__ */ t("div", {
+					className: e([f]),
+					children: "Output"
+				}), /* @__PURE__ */ t("div", {
+					className: e([p]),
+					children: c
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { g as default };