haze-ui 1.24.1 → 1.25.0

package/dist/components/Datepicker/DatepickerCore.js

@@ -1,45 +1,47 @@
 
 import { classnames as e } from "../../utils/classnames.js";
 import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
-import r from "./Calendar.js";
+import r from "../Calendar/Calendar.js";
 /* empty css                         */
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useCallback as o, useId as s, useRef as c } from "react";
 //#region src/lib/components/Datepicker/DatepickerCore.tsx
 var l = "haze-DatepickerCore__wrapper", u = "haze-DatepickerCore__input", d = "haze-DatepickerCore__dropdown";
-function f({ value: f, onChange: p, open: m, onOpenChange: h, min: g, max: _, placeholder: v = "Select date", className: y }) {
-	let b = c(null), x = c(null), S = s(), C = o((e) => h(typeof e == "function" ? e(m) : e), [h, m]), w = n({
+function f({ value: f, onChange: p, open: m, onOpenChange: h, min: g, max: _, locale: v, weekStartsOn: y, placeholder: b = "Select date", className: x }) {
+	let S = c(null), C = c(null), w = s(), T = o((e) => h(typeof e == "function" ? e(m) : e), [h, m]), E = n({
 		open: m,
-		setOpen: C,
-		triggerRef: b,
-		panelRef: x,
+		setOpen: T,
+		triggerRef: S,
+		panelRef: C,
 		animated: !0
 	});
 	return /* @__PURE__ */ a("div", {
-		className: e([l, y]),
+		className: e([l, x]),
 		children: [/* @__PURE__ */ i("input", {
-			ref: b,
+			ref: S,
 			readOnly: !0,
-			style: w.triggerStyle,
+			style: E.triggerStyle,
 			className: u,
 			value: f,
-			placeholder: v,
+			placeholder: b,
 			role: "combobox",
 			"aria-haspopup": "dialog",
 			"aria-expanded": m,
-			"aria-controls": S,
-			onPointerDown: w.onTriggerPointerDown,
-			onClick: w.onTriggerClick
+			"aria-controls": w,
+			onPointerDown: E.onTriggerPointerDown,
+			onClick: E.onTriggerClick
 		}), /* @__PURE__ */ i(t, {
-			ref: x,
-			behavior: w,
+			ref: C,
+			behavior: E,
 			placement: "bottom",
 			visualClass: d,
-			id: S,
+			id: w,
 			children: /* @__PURE__ */ i(r, {
 				value: f,
 				min: g,
 				max: _,
+				locale: v,
+				weekStartsOn: y,
 				onSelect: (e) => {
 					p(e), h(!1);
 				}

package/dist/components/Empty/Empty.js

@@ -1,16 +1,17 @@
 
 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 { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/Empty/Empty.tsx
-var r = "haze-Empty__base", i = "haze-Empty__imageStyle", a = "haze-Empty__descStyle", o = "haze-Empty__actionStyle", s = /* @__PURE__ */ n("svg", {
+var i = "haze-Empty__base", a = "haze-Empty__imageStyle", o = "haze-Empty__descStyle", s = "haze-Empty__actionStyle", c = /* @__PURE__ */ r("svg", {
 	width: "64",
 	height: "64",
 	viewBox: "0 0 64 64",
 	fill: "none",
 	xmlns: "http://www.w3.org/2000/svg",
 	children: [
-		/* @__PURE__ */ t("rect", {
+		/* @__PURE__ */ n("rect", {
 			x: "8",
 			y: "16",
 			width: "48",
@@ -19,24 +20,24 @@ var r = "haze-Empty__base", i = "haze-Empty__imageStyle", a = "haze-Empty__descS
 			stroke: "var(--haze-color-border)",
 			strokeWidth: "2"
 		}),
-		/* @__PURE__ */ t("path", {
+		/* @__PURE__ */ n("path", {
 			d: "M8 28h48",
 			stroke: "var(--haze-color-border)",
 			strokeWidth: "2"
 		}),
-		/* @__PURE__ */ t("circle", {
+		/* @__PURE__ */ n("circle", {
 			cx: "20",
 			cy: "22",
 			r: "2",
 			fill: "var(--haze-color-border)"
 		}),
-		/* @__PURE__ */ t("circle", {
+		/* @__PURE__ */ n("circle", {
 			cx: "28",
 			cy: "22",
 			r: "2",
 			fill: "var(--haze-color-border)"
 		}),
-		/* @__PURE__ */ t("path", {
+		/* @__PURE__ */ n("path", {
 			d: "M24 38l6-6 4 4 8-8",
 			stroke: "var(--haze-color-border)",
 			strokeWidth: "2",
@@ -45,24 +46,25 @@ var r = "haze-Empty__base", i = "haze-Empty__imageStyle", a = "haze-Empty__descS
 		})
 	]
 });
-function c({ description: c = "No data", image: l, className: u, children: d }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, u]),
+function l({ description: l, image: u, className: d, children: f }) {
+	let p = t("empty"), m = l ?? p.description;
+	return /* @__PURE__ */ r("div", {
+		className: e([i, d]),
 		children: [
-			/* @__PURE__ */ t("div", {
-				className: e([i]),
-				children: l ?? s
-			}),
-			/* @__PURE__ */ t("div", {
+			/* @__PURE__ */ n("div", {
 				className: e([a]),
-				children: c
+				children: u ?? c
 			}),
-			d && /* @__PURE__ */ t("div", {
+			/* @__PURE__ */ n("div", {
 				className: e([o]),
-				children: d
+				children: m
+			}),
+			f && /* @__PURE__ */ n("div", {
+				className: e([s]),
+				children: f
 			})
 		]
 	});
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/FileInput/FileInput.js

@@ -1,21 +1,22 @@
 
 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 { useRef as r } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useRef as i } from "react";
 //#region src/lib/components/FileInput/FileInput.tsx
-var i = "haze-FileInput__hiddenInput", a = "haze-FileInput__trigger";
-function o({ children: o, className: s, ...c }) {
-	let l = r(null);
-	return /* @__PURE__ */ n("label", {
-		className: e([a, s]),
-		children: [/* @__PURE__ */ t("input", {
-			ref: l,
+var a = "haze-FileInput__hiddenInput", o = "haze-FileInput__trigger";
+function s({ children: s, className: c, ...l }) {
+	let u = i(null), d = t("fileInput");
+	return /* @__PURE__ */ r("label", {
+		className: e([o, c]),
+		children: [/* @__PURE__ */ n("input", {
+			ref: u,
 			type: "file",
-			className: i,
-			...c
-		}), o ?? "Choose file"]
+			className: a,
+			...l
+		}), s ?? d.label]
 	});
 }
 //#endregion
-export { o as default };
+export { s as default };

package/dist/components/HoverCard/HoverCard.js

@@ -0,0 +1,53 @@
+
+import { FloatingPanel as e, useFloating as t } from "../../utils/floating.js";
+/* empty css                    */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as i, useId as a, useMemo as o, useRef as s } from "react";
+import { useControl as c } from "react-use-control";
+//#region src/lib/components/HoverCard/HoverCard.tsx
+var l = "haze-HoverCard__container", u = "haze-HoverCard__panelVisuals";
+function d({ content: d, openDelay: f = 200, closeDelay: p = 120, placement: m = "bottom-span", open: h, collisionPadding: g, className: _, children: v }) {
+	let [y, b] = c(h, !1), x = a(), S = s(null), C = s(null), w = o(() => g === void 0 ? void 0 : { collisionPadding: g }, [g]), T = t({
+		open: y,
+		setOpen: b,
+		triggerRef: S,
+		panelRef: C,
+		animated: !0,
+		collision: w
+	}), E = s(0), D = s(0);
+	i(() => () => {
+		window.clearTimeout(E.current), window.clearTimeout(D.current);
+	}, []);
+	let O = () => {
+		window.clearTimeout(E.current), window.clearTimeout(D.current);
+	}, k = () => {
+		O(), !y && (E.current = window.setTimeout(() => b(!0), f));
+	}, A = () => {
+		O(), y && (D.current = window.setTimeout(() => b(!1), p));
+	};
+	return /* @__PURE__ */ r("span", {
+		className: l,
+		children: [/* @__PURE__ */ n("span", {
+			ref: S,
+			style: T.triggerStyle,
+			"aria-describedby": x,
+			onMouseEnter: k,
+			onMouseLeave: A,
+			onFocus: k,
+			onBlur: A,
+			children: v
+		}), /* @__PURE__ */ n(e, {
+			ref: C,
+			behavior: T,
+			placement: m,
+			id: x,
+			visualClass: u,
+			className: _,
+			onMouseEnter: O,
+			onMouseLeave: A,
+			children: d
+		})]
+	});
+}
+//#endregion
+export { d as default };

package/dist/components/HoverCard/index.js

@@ -0,0 +1,2 @@
+import e from "./HoverCard.js";
+export { e as HoverCard };

package/dist/components/InlineEdit/InlineEdit.js

@@ -1,47 +1,48 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                     */
-import { jsx as t } from "react/jsx-runtime";
-import { useEffect as n, useRef as r, useState as i } from "react";
-import { useControl as a } from "react-use-control";
+import { jsx as n } from "react/jsx-runtime";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/InlineEdit/InlineEdit.tsx
-var o = "haze-InlineEdit__display", s = "haze-InlineEdit__editing", c = "haze-InlineEdit__placeholderStyle";
-function l({ value: l, onChange: u, placeholder: d = "Click to edit", disabled: f, className: p }) {
-	let [m, h] = a(l, ""), [g, _] = i(!1), [v, y] = i(m), b = r(null);
-	n(() => {
-		g && (b.current?.focus(), b.current?.select());
-	}, [g]);
-	let x = () => {
-		f || (y(m), _(!0));
-	}, S = () => {
-		_(!1), v !== m && (h(v), u?.(v));
-	}, C = () => {
-		_(!1), y(m);
+var s = "haze-InlineEdit__display", c = "haze-InlineEdit__editing", l = "haze-InlineEdit__placeholderStyle";
+function u({ value: u, onChange: d, placeholder: f, disabled: p, className: m }) {
+	let [h, g] = o(u, ""), [_, v] = a(!1), [y, b] = a(h), x = i(null), S = t("inlineEdit"), C = f ?? S.placeholder;
+	r(() => {
+		_ && (x.current?.focus(), x.current?.select());
+	}, [_]);
+	let w = () => {
+		p || (b(h), v(!0));
+	}, T = () => {
+		v(!1), y !== h && (g(y), d?.(y));
+	}, E = () => {
+		v(!1), b(h);
 	};
-	return g ? /* @__PURE__ */ t("input", {
-		ref: b,
-		"aria-label": d,
-		value: v,
-		onChange: (e) => y(e.target.value),
-		onBlur: S,
+	return _ ? /* @__PURE__ */ n("input", {
+		ref: x,
+		"aria-label": C,
+		value: y,
+		onChange: (e) => b(e.target.value),
+		onBlur: T,
 		onKeyDown: (e) => {
-			e.key === "Enter" && S(), e.key === "Escape" && C();
+			e.key === "Enter" && T(), e.key === "Escape" && E();
 		},
-		className: e([s, p])
-	}) : /* @__PURE__ */ t("span", {
-		onClick: x,
+		className: e([c, m])
+	}) : /* @__PURE__ */ n("span", {
+		onClick: w,
 		role: "button",
 		tabIndex: 0,
 		onKeyDown: (e) => {
-			e.key === "Enter" && x();
+			e.key === "Enter" && w();
 		},
 		className: e([
-			o,
-			!m && c,
-			p
+			s,
+			!h && l,
+			m
 		]),
-		children: m || d
+		children: h || C
 	});
 }
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,21 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css              */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/lib/components/Kbd/Kbd.tsx
+var n = "haze-Kbd__base", r = {
+	sm: "haze-Kbd__sm",
+	md: "haze-Kbd__md"
+};
+function i({ size: i = "md", className: a, ...o }) {
+	return /* @__PURE__ */ t("kbd", {
+		...o,
+		className: e([
+			n,
+			r[i],
+			a
+		])
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Kbd/index.js

@@ -0,0 +1,2 @@
+import e from "./Kbd.js";
+export { e as Kbd };

package/dist/components/LocaleProvider/LocaleContext.js

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+//#region src/lib/components/LocaleProvider/LocaleContext.ts
+var t = e(void 0);
+//#endregion
+export { t as LocaleContext };

package/dist/components/LocaleProvider/LocaleProvider.js

@@ -0,0 +1,21 @@
+import { LocaleContext as e } from "./LocaleContext.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useContext as n, useMemo as r } from "react";
+//#region src/lib/components/LocaleProvider/LocaleProvider.tsx
+function i({ locale: i, strings: a, children: o }) {
+	let s = n(e), c = r(() => ({
+		locale: i ?? s?.locale,
+		strings: a,
+		parent: s
+	}), [
+		i,
+		a,
+		s
+	]);
+	return /* @__PURE__ */ t(e.Provider, {
+		value: c,
+		children: o
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/LocaleProvider/index.js

@@ -0,0 +1,4 @@
+import e from "./LocaleProvider.js";
+import { defaultStrings as t } from "./locale.js";
+import { useStrings as n } from "./useStrings.js";
+export { e as default, t as defaultStrings, n as useStrings };

package/dist/components/LocaleProvider/locale.js

@@ -0,0 +1,126 @@
+//#region src/lib/components/LocaleProvider/locale.ts
+var e = {
+	alert: { close: "Close" },
+	approvalCard: {
+		title: "Approval Required",
+		approve: "Approve",
+		deny: "Deny"
+	},
+	asyncSection: {
+		loading: "Loading…",
+		error: "Something went wrong",
+		retry: "Retry"
+	},
+	avatarGroup: { more: "+{count}" },
+	calendar: {
+		previousMonth: "Previous month",
+		nextMonth: "Next month",
+		today: "Today"
+	},
+	cascader: { expand: "Expand" },
+	sidebar: {
+		toggle: "Toggle sidebar",
+		expand: "Expand sidebar",
+		collapse: "Collapse sidebar"
+	},
+	tour: {
+		next: "Next",
+		back: "Back",
+		done: "Done",
+		skip: "Skip",
+		stepOf: "Step {current} of {total}"
+	},
+	backToTop: { label: "Back to top" },
+	banner: { close: "Close" },
+	breadcrumb: { label: "Breadcrumb" },
+	carousel: {
+		label: "Carousel",
+		previousSlide: "Previous slide",
+		nextSlide: "Next slide",
+		goToSlide: "Go to slide {index}"
+	},
+	chatInput: {
+		placeholder: "Type a message...",
+		send: "Send"
+	},
+	chatMessage: {
+		sending: "Sending...",
+		sent: "Sent",
+		failedToSend: "Failed to send"
+	},
+	chip: { remove: "Remove" },
+	colorPicker: {
+		pickColor: "Pick color",
+		hexColor: "Hex color"
+	},
+	confirmDialog: {
+		confirm: "Confirm",
+		cancel: "Cancel"
+	},
+	dateRangePicker: {
+		startDate: "Start date",
+		endDate: "End date"
+	},
+	empty: { description: "No data" },
+	fileInput: { label: "Choose file" },
+	inlineEdit: { placeholder: "Click to edit" },
+	logViewer: {
+		all: "All",
+		noLogs: "No logs"
+	},
+	modelPicker: { label: "Model" },
+	numberInput: {
+		decrease: "Decrease",
+		increase: "Increase"
+	},
+	otpInput: { digitLabel: "Digit {index} of {total}" },
+	pagination: {
+		previous: "Previous",
+		next: "Next"
+	},
+	passwordInput: {
+		label: "Password",
+		show: "Show password",
+		hide: "Hide password"
+	},
+	progress: { label: "Progress" },
+	rating: {
+		star: "{count} star",
+		stars: "{count} stars"
+	},
+	spinner: { loading: "Loading" },
+	tag: { remove: "Remove" },
+	tagGroup: { remove: "Remove" },
+	tagInput: {
+		placeholder: "Add tag",
+		removeTag: "Remove {tag}",
+		tagCount: "{count} tags",
+		tagCountSingular: "{count} tag"
+	},
+	thinkingIndicator: { text: "Thinking" },
+	tokenCounter: { label: "Tokens" },
+	toolCallCard: {
+		pending: "Pending",
+		running: "Running...",
+		done: "Done",
+		error: "Error",
+		inputLabel: "Input",
+		outputLabel: "Output"
+	},
+	transfer: {
+		source: "Source ({count})",
+		target: "Target ({count})",
+		moveToTarget: ">",
+		moveToSource: "<"
+	},
+	tree: {
+		expand: "Expand",
+		collapse: "Collapse"
+	},
+	upload: { hint: "Drag & drop files here, or click to upload" }
+};
+function t(e, t) {
+	return e.replace(/\{(\w+)\}/g, (e, n) => Object.prototype.hasOwnProperty.call(t, n) ? String(t[n]) : e);
+}
+//#endregion
+export { e as defaultStrings, t as formatString };

package/dist/components/LocaleProvider/useStrings.js

@@ -0,0 +1,17 @@
+import { LocaleContext as e } from "./LocaleContext.js";
+import { defaultStrings as t } from "./locale.js";
+import { useContext as n } from "react";
+//#region src/lib/components/LocaleProvider/useStrings.ts
+function r(e) {
+	if (!e) return [];
+	let t = r(e.parent);
+	return e.strings ? [...t, e.strings] : t;
+}
+function i(i) {
+	return r(n(e)).map((e) => e[i]).filter((e) => e !== void 0).reduce((e, t) => ({
+		...e,
+		...t
+	}), t[i]);
+}
+//#endregion
+export { i as useStrings };

package/dist/components/LogViewer/LogViewer.js

@@ -1,66 +1,67 @@
 
 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 { useMemo as r } from "react";
-import { useControl as i } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { useControl as a } from "react-use-control";
 //#region src/lib/components/LogViewer/LogViewer.tsx
-var a = "haze-LogViewer__wrapper", o = "haze-LogViewer__toolbar", s = "haze-LogViewer__filterBtn", c = "haze-LogViewer__filterActive", l = "haze-LogViewer__body", u = "haze-LogViewer__entry", d = "haze-LogViewer__timestamp", f = "haze-LogViewer__levelBadge", p = "haze-LogViewer__levelDebug", m = "haze-LogViewer__levelInfo", h = "haze-LogViewer__levelWarn", g = "haze-LogViewer__levelError", _ = "haze-LogViewer__messageStyle", v = {
-	debug: p,
-	info: m,
-	warn: h,
-	error: g
-}, y = [
+var o = "haze-LogViewer__wrapper", s = "haze-LogViewer__toolbar", c = "haze-LogViewer__filterBtn", l = "haze-LogViewer__filterActive", u = "haze-LogViewer__body", d = "haze-LogViewer__entry", f = "haze-LogViewer__timestamp", p = "haze-LogViewer__levelBadge", m = "haze-LogViewer__levelDebug", h = "haze-LogViewer__levelInfo", g = "haze-LogViewer__levelWarn", _ = "haze-LogViewer__levelError", v = "haze-LogViewer__messageStyle", y = {
+	debug: m,
+	info: h,
+	warn: g,
+	error: _
+}, b = [
 	"debug",
 	"info",
 	"warn",
 	"error"
 ];
-function b({ logs: p, filter: m, className: h }) {
-	let [g, b] = i(m, null), x = r(() => g ? p.filter((e) => e.level === g) : p, [p, g]);
-	return /* @__PURE__ */ n("div", {
-		className: e([a, h]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([o]),
-			children: [/* @__PURE__ */ t("button", {
+function x({ logs: m, filter: h, className: g }) {
+	let [_, x] = a(h, null), S = t("logViewer"), C = i(() => _ ? m.filter((e) => e.level === _) : m, [m, _]);
+	return /* @__PURE__ */ r("div", {
+		className: e([o, g]),
+		children: [/* @__PURE__ */ r("div", {
+			className: e([s]),
+			children: [/* @__PURE__ */ n("button", {
 				type: "button",
-				onClick: () => b(null),
-				className: e([s, !g && c]),
-				children: "All"
-			}), y.map((n) => /* @__PURE__ */ t("button", {
+				onClick: () => x(null),
+				className: e([c, !_ && l]),
+				children: S.all
+			}), b.map((t) => /* @__PURE__ */ n("button", {
 				type: "button",
-				onClick: () => b(n),
-				className: e([s, g === n && c]),
-				children: n
-			}, n))]
-		}), /* @__PURE__ */ n("div", {
-			className: e([l]),
-			children: [x.map((r, i) => /* @__PURE__ */ n("div", {
-				className: e([u]),
+				onClick: () => x(t),
+				className: e([c, _ === t && l]),
+				children: t
+			}, t))]
+		}), /* @__PURE__ */ r("div", {
+			className: e([u]),
+			children: [C.map((t, i) => /* @__PURE__ */ r("div", {
+				className: e([d]),
 				children: [
-					r.timestamp && /* @__PURE__ */ t("span", {
-						className: e([d]),
-						children: r.timestamp
+					t.timestamp && /* @__PURE__ */ n("span", {
+						className: e([f]),
+						children: t.timestamp
 					}),
-					/* @__PURE__ */ t("span", {
-						className: e([f, v[r.level]]),
-						children: r.level
+					/* @__PURE__ */ n("span", {
+						className: e([p, y[t.level]]),
+						children: t.level
 					}),
-					/* @__PURE__ */ t("span", {
-						className: e([_]),
-						children: r.message
+					/* @__PURE__ */ n("span", {
+						className: e([v]),
+						children: t.message
 					})
 				]
-			}, i)), x.length === 0 && /* @__PURE__ */ t("div", {
-				className: e([u]),
-				children: /* @__PURE__ */ t("span", {
+			}, i)), C.length === 0 && /* @__PURE__ */ n("div", {
+				className: e([d]),
+				children: /* @__PURE__ */ n("span", {
 					style: { color: "var(--haze-color-text-muted)" },
-					className: e([_]),
-					children: "No logs"
+					className: e([v]),
+					children: S.noLogs
 				})
 			})]
 		})]
 	});
 }
 //#endregion
-export { b as default };
+export { x as default };