haze-ui 1.26.0 → 1.27.0

package/dist/components/DropdownMenu/DropdownMenuSubContent.js

@@ -0,0 +1,24 @@
+
+"use client";
+import { FloatingPanel as e } from "../../utils/floating.js";
+import { useSubmenuContext as t } from "../../utils/submenu.js";
+/* empty css                                 */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/DropdownMenu/DropdownMenuSubContent.tsx
+var r = "haze-DropdownMenuSubContent__content";
+function i({ className: i, children: a }) {
+	let o = t();
+	return !o.open && o.floating.exited ? null : /* @__PURE__ */ n(e, {
+		ref: o.contentRef,
+		behavior: o.floating,
+		placement: "right",
+		id: o.contentId,
+		role: "menu",
+		visualClass: r,
+		className: i,
+		onKeyDown: o.contentKeyDown,
+		children: a
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/DropdownMenu/DropdownMenuSubTrigger.js

@@ -0,0 +1,30 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useSubmenuContext as t } from "../../utils/submenu.js";
+/* empty css                                 */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/lib/components/DropdownMenu/DropdownMenuSubTrigger.tsx
+var r = "haze-DropdownMenuSubTrigger__trigger";
+function i({ disabled: i = !1, className: a, children: o }) {
+	let s = t();
+	return /* @__PURE__ */ n("button", {
+		ref: s.triggerRef,
+		type: "button",
+		role: "menuitem",
+		tabIndex: -1,
+		"aria-haspopup": "menu",
+		"aria-expanded": s.open,
+		"aria-owns": s.open ? s.contentId : void 0,
+		disabled: i,
+		style: s.floating.triggerStyle,
+		onPointerDown: s.floating.onTriggerPointerDown,
+		onPointerEnter: s.onTriggerPointerEnter,
+		onClick: s.floating.onTriggerClick,
+		onKeyDown: s.handleTriggerKeyDown,
+		className: e([r, a]),
+		children: o
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/DropdownMenu/index.js

@@ -4,4 +4,7 @@ import t from "./DropdownMenuTrigger.js";
 import n from "./DropdownMenuContent.js";
 import r from "./DropdownMenuItem.js";
 import i from "./DropdownMenuSeparator.js";
-export { e as DropdownMenu, n as DropdownMenuContent, r as DropdownMenuItem, i as DropdownMenuSeparator, t as DropdownMenuTrigger };
+import a from "./DropdownMenuSub.js";
+import o from "./DropdownMenuSubTrigger.js";
+import s from "./DropdownMenuSubContent.js";
+export { e as DropdownMenu, n as DropdownMenuContent, r as DropdownMenuItem, i as DropdownMenuSeparator, a as DropdownMenuSub, s as DropdownMenuSubContent, o as DropdownMenuSubTrigger, t as DropdownMenuTrigger };

package/dist/components/Flex/Flex.js

@@ -1,5 +1,4 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Flex/index.js

@@ -1,3 +1,2 @@
-"use client";
 import e from "./Flex.js";
 export { e as Flex };

package/dist/components/Fullscreen/Fullscreen.js

@@ -0,0 +1,29 @@
+"use client";
+import { useFullscreen as e } from "../../hooks/useFullscreen.js";
+import { Children as t, cloneElement as n, useEffect as r, useRef as i } from "react";
+import { useControl as a } from "react-use-control";
+//#region src/lib/components/Fullscreen/Fullscreen.tsx
+function o({ fullscreen: o, onChange: s, target: c, children: l }) {
+	let [u, d] = a(o, !1), [f, , p] = e(c), m = i(null);
+	r(() => {
+		m.current !== u && (m.current = u, u !== f && (u ? p.enter() : p.exit()));
+	}, [
+		u,
+		f,
+		p
+	]);
+	let h = i(!1);
+	r(() => {
+		h.current !== f && (h.current = f, d(f), s?.(f));
+	}, [
+		f,
+		d,
+		s
+	]);
+	let g = t.only(l);
+	return n(g, { onClick: (e) => {
+		g.props.onClick?.(e), d((e) => !e);
+	} });
+}
+//#endregion
+export { o as default };

package/dist/components/Fullscreen/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Fullscreen.js";
+export { e as Fullscreen };

package/dist/components/Grid/Grid.js

@@ -1,5 +1,4 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Grid/GridItem.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/lib/components/Grid/GridItem.tsx
 function t({ span: t = 1, start: n, className: r, children: i }) {

package/dist/components/Grid/index.js

@@ -1,4 +1,3 @@
-"use client";
 import e from "./Grid.js";
 import t from "./GridItem.js";
 export { e as Grid, t as GridItem };

package/dist/components/Icon/Icon.js

@@ -1,5 +1,4 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Icon/index.js

@@ -1,3 +1,2 @@
-"use client";
 import e from "./Icon.js";
 export { e as Icon };

package/dist/components/Image/Image.js

@@ -1,27 +1,45 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import t from "./ImagePreview.js";
 /* empty css                */
-import { jsx as t } from "react/jsx-runtime";
-import { useState as n } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/Image/Image.tsx
-var r = "haze-Image__wrapper", i = "haze-Image__imgStyle", a = "haze-Image__fallbackStyle";
-function o({ src: o, alt: s, fallback: c, aspectRatio: l, objectFit: u = "cover", className: d }) {
-	let [f, p] = n(!1);
-	return /* @__PURE__ */ t("span", {
-		style: { aspectRatio: l },
-		className: e([r, d]),
-		children: f && c ? /* @__PURE__ */ t("span", {
-			className: a,
-			children: c
-		}) : /* @__PURE__ */ t("img", {
-			className: i,
-			src: o,
-			alt: s,
-			style: { objectFit: u },
-			onError: () => p(!0)
+var s = "haze-Image__wrapper", c = "haze-Image__imgStyle", l = "haze-Image__fallbackStyle", u = "haze-Image__previewTrigger";
+function d({ src: d, alt: f, fallback: p, aspectRatio: m, objectFit: h = "cover", preview: g = !1, className: _, style: v, onClick: y, onError: b, ...x }) {
+	let [S, C] = a(!1), w = g !== !1, T = typeof g == "object" ? g : {}, E = w && T.zoom !== !1, D = w && T.rotate !== !1, [, O, k] = o(void 0, !1), A = (e) => {
+		b?.(e), C(!0);
+	}, j = (e) => {
+		y?.(e), w && (e.currentTarget.focus(), O(!0));
+	};
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		style: { aspectRatio: m },
+		className: e([s, _]),
+		children: S && p ? /* @__PURE__ */ r("span", {
+			className: l,
+			children: p
+		}) : /* @__PURE__ */ r("img", {
+			tabIndex: w ? -1 : void 0,
+			...x,
+			src: d,
+			alt: f,
+			style: {
+				...v,
+				objectFit: h
+			},
+			onError: A,
+			onClick: j,
+			className: e([c, w && u])
 		})
-	});
+	}), w && /* @__PURE__ */ r(t, {
+		src: d,
+		alt: f,
+		open: k,
+		zoom: E,
+		rotate: D
+	})] });
 }
 //#endregion
-export { o as default };
+export { d as default };

package/dist/components/Image/ImagePreview.js

@@ -0,0 +1,233 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { whenExitSettles as n } from "../../utils/presence.js";
+import { useFocusScope as r } from "../../utils/focus-scope.js";
+/* empty css                       */
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
+import { useControl as d } from "react-use-control";
+//#region src/lib/components/Image/ImagePreview.tsx
+var f = .25, p = 4, m = .25, h = 90, g = (e) => Math.min(p, Math.max(f, e)), _ = "haze-ImagePreview__overlay", v = "haze-ImagePreview__previewImg", y = "haze-ImagePreview__imgPannable", b = "haze-ImagePreview__imgPanning", x = "haze-ImagePreview__imgAnimated", S = "haze-ImagePreview__toolbar", C = "haze-ImagePreview__toolButton", w = () => /* @__PURE__ */ o("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [
+		/* @__PURE__ */ a("circle", {
+			cx: "11",
+			cy: "11",
+			r: "7"
+		}),
+		/* @__PURE__ */ a("line", {
+			x1: "16.5",
+			y1: "16.5",
+			x2: "21",
+			y2: "21"
+		}),
+		/* @__PURE__ */ a("line", {
+			x1: "8",
+			y1: "11",
+			x2: "14",
+			y2: "11"
+		}),
+		/* @__PURE__ */ a("line", {
+			x1: "11",
+			y1: "8",
+			x2: "11",
+			y2: "14"
+		})
+	]
+}), T = () => /* @__PURE__ */ o("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [
+		/* @__PURE__ */ a("circle", {
+			cx: "11",
+			cy: "11",
+			r: "7"
+		}),
+		/* @__PURE__ */ a("line", {
+			x1: "16.5",
+			y1: "16.5",
+			x2: "21",
+			y2: "21"
+		}),
+		/* @__PURE__ */ a("line", {
+			x1: "8",
+			y1: "11",
+			x2: "14",
+			y2: "11"
+		})
+	]
+}), E = () => /* @__PURE__ */ o("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [/* @__PURE__ */ a("path", { d: "M20.5 12a8.5 8.5 0 1 1-2.6-6.1" }), /* @__PURE__ */ a("polyline", { points: "21 3 21 9 15 9" })]
+}), D = () => /* @__PURE__ */ o("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [/* @__PURE__ */ a("line", {
+		x1: "5",
+		y1: "5",
+		x2: "19",
+		y2: "19"
+	}), /* @__PURE__ */ a("line", {
+		x1: "19",
+		y1: "5",
+		x2: "5",
+		y2: "19"
+	})]
+});
+function O({ src: O, alt: k, open: A, zoom: j = !0, rotate: M = !0 }) {
+	let [N, P] = d(A, !1), F = t("image"), [I, L] = u(1), [R, z] = u(0), [B, V] = u({
+		x: 0,
+		y: 0
+	}), [H, U] = u(!1), W = l(null), G = l(null), K = l(null), q = r({
+		enabled: N,
+		trapped: !1
+	}), J = s((e) => {
+		W.current = e, q(e);
+	}, [q]);
+	c(() => {
+		let e = W.current;
+		if (e) {
+			if (N && !e.open) e.showModal(), G.current?.focus();
+			else if (!N && e.open) {
+				let t = n(e), r = () => {
+					e.getAttribute("data-state") === "closed" && e.close();
+				};
+				t ? t.then(r) : r();
+			}
+		}
+	}, [N]), c(() => {
+		if (!N || !j) return;
+		let e = W.current;
+		if (!e) return;
+		let t = (e) => {
+			e.preventDefault(), L((t) => g(t - Math.sign(e.deltaY) * m));
+		};
+		return e.addEventListener("wheel", t, { passive: !1 }), () => e.removeEventListener("wheel", t);
+	}, [N, j]);
+	let Y = (e) => {
+		e.target === W.current && P(!1);
+	}, X = (e) => {
+		j && e.button === 0 && (typeof e.currentTarget.setPointerCapture == "function" && e.currentTarget.setPointerCapture(e.pointerId), K.current = {
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			originX: B.x,
+			originY: B.y
+		}, U(!0));
+	}, Z = (e) => {
+		let t = K.current;
+		t?.pointerId === e.pointerId && V({
+			x: t.originX + e.clientX - t.startX,
+			y: t.originY + e.clientY - t.startY
+		});
+	}, Q = (e) => {
+		K.current?.pointerId === e.pointerId && (K.current = null, U(!1));
+	};
+	return /* @__PURE__ */ o("dialog", {
+		ref: J,
+		"aria-label": k,
+		"data-state": N ? "open" : "closed",
+		className: _,
+		onCancel: (e) => {
+			e.preventDefault(), P(!1);
+		},
+		onClose: () => {
+			P(!1), L(1), z(0), V({
+				x: 0,
+				y: 0
+			});
+		},
+		onClick: Y,
+		children: [/* @__PURE__ */ a("img", {
+			src: O,
+			alt: k,
+			draggable: !1,
+			style: { transform: `translate(${B.x}px, ${B.y}px) scale(${I}) rotate(${R}deg)` },
+			onPointerDown: X,
+			onPointerMove: Z,
+			onPointerUp: Q,
+			onPointerCancel: Q,
+			className: e([
+				v,
+				j && (H ? b : y),
+				!H && x
+			])
+		}), /* @__PURE__ */ o("div", {
+			className: S,
+			children: [
+				j && /* @__PURE__ */ o(i, { children: [
+					/* @__PURE__ */ a("button", {
+						type: "button",
+						className: C,
+						"aria-label": F.zoomIn,
+						disabled: I >= p,
+						onClick: () => L(g(I + m)),
+						children: /* @__PURE__ */ a(w, {})
+					}),
+					/* @__PURE__ */ a("button", {
+						type: "button",
+						className: C,
+						"aria-label": F.zoomOut,
+						disabled: I <= f,
+						onClick: () => L(g(I - m)),
+						children: /* @__PURE__ */ a(T, {})
+					}),
+					/* @__PURE__ */ a("button", {
+						type: "button",
+						className: C,
+						"aria-label": F.reset,
+						onClick: () => {
+							L(1), z(0), V({
+								x: 0,
+								y: 0
+							});
+						},
+						children: "1:1"
+					})
+				] }),
+				M && /* @__PURE__ */ a("button", {
+					type: "button",
+					className: C,
+					"aria-label": F.rotate,
+					onClick: () => z((e) => (e + h) % 360),
+					children: /* @__PURE__ */ a(E, {})
+				}),
+				/* @__PURE__ */ a("button", {
+					ref: G,
+					type: "button",
+					className: C,
+					"aria-label": F.close,
+					onClick: () => P(!1),
+					children: /* @__PURE__ */ a(D, {})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { O as default };

package/dist/components/Input/Input.js

@@ -3,15 +3,16 @@ import e from "./InputCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Input/Input.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/Input/InputCore.js

@@ -9,13 +9,14 @@ var n = "haze-InputCore__base", r = {
 	md: "haze-InputCore__md",
 	lg: "haze-InputCore__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("input", {
+		ref: l,
 		value: i,
 		onChange: (e) => {
 			a(e.target.value), o?.(e);
 		},
-		...l,
+		...u,
 		className: e([
 			n,
 			r[s],

package/dist/components/Kbd/Kbd.js

@@ -1,5 +1,4 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css              */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Kbd/index.js

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

package/dist/components/LocaleProvider/LocaleProvider.js

@@ -1,22 +1,25 @@
 "use client";
 import { LocaleContext as e } from "./LocaleContext.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useContext as n, useMemo as r } from "react";
+import { localeDirection as t } from "../../utils/direction.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as r, useMemo as i } 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
+function a({ locale: a, direction: o, strings: s, children: c }) {
+	let l = r(e), u = a ?? l?.locale, d = i(() => ({
+		locale: u,
+		direction: o ?? l?.direction ?? t(u),
+		strings: s,
+		parent: l
 	}), [
-		i,
-		a,
+		u,
+		o,
+		l,
 		s
 	]);
-	return /* @__PURE__ */ t(e.Provider, {
-		value: c,
-		children: o
+	return /* @__PURE__ */ n(e.Provider, {
+		value: d,
+		children: c
 	});
 }
 //#endregion
-export { i as default };
+export { a as default };

package/dist/components/LocaleProvider/index.js

@@ -3,4 +3,5 @@ import e from "./LocaleProvider.js";
 import { defaultStrings as t, enUS as n } from "./locale.js";
 import { zhCN as r } from "./zh-cn.js";
 import { useStrings as i } from "./useStrings.js";
-export { e as default, t as defaultStrings, n as enUS, i as useStrings, r as zhCN };
+import { createStrings as a } from "./strings.js";
+export { a as createStrings, e as default, t as defaultStrings, n as enUS, i as useStrings, r as zhCN };

package/dist/components/LocaleProvider/locale.js

@@ -16,9 +16,22 @@ var e = {
 	calendar: {
 		previousMonth: "Previous month",
 		nextMonth: "Next month",
-		today: "Today"
+		today: "Today",
+		selectMonth: "Select month",
+		selectQuarter: "Select quarter",
+		selectYear: "Select year",
+		previousYear: "Previous year",
+		nextYear: "Next year",
+		previousDecade: "Previous decade",
+		nextDecade: "Next decade",
+		weekNumber: "Wk"
 	},
 	cascader: { expand: "Expand" },
+	combobox: {
+		create: "Create \"{query}\"",
+		noResults: "No results"
+	},
+	command: { noResults: "No results" },
 	sidebar: {
 		toggle: "Toggle sidebar",
 		expand: "Expand sidebar",
@@ -40,6 +53,11 @@ var e = {
 		nextSlide: "Next slide",
 		goToSlide: "Go to slide {index}"
 	},
+	chat: {
+		newMessages: "New messages",
+		stopGeneration: "Stop generating",
+		copy: "Copy"
+	},
 	chatInput: {
 		placeholder: "Type a message...",
 		send: "Send"
@@ -64,6 +82,13 @@ var e = {
 	},
 	empty: { description: "No data" },
 	fileInput: { label: "Choose file" },
+	image: {
+		zoomIn: "Zoom in",
+		zoomOut: "Zoom out",
+		reset: "Reset",
+		rotate: "Rotate",
+		close: "Close"
+	},
 	inlineEdit: { placeholder: "Click to edit" },
 	logViewer: {
 		all: "All",
@@ -89,10 +114,26 @@ var e = {
 		hide: "Hide password"
 	},
 	progress: { label: "Progress" },
+	promptInput: {
+		label: "Prompt",
+		removeTag: "Remove {tag}",
+		noMatch: "No matches",
+		loading: "Loading…"
+	},
 	rating: {
 		star: "{count} star",
 		stars: "{count} stars"
 	},
+	select: {
+		placeholder: "Select…",
+		listboxLabel: "Options",
+		clear: "Clear",
+		searchLabel: "Search options",
+		searchPlaceholder: "Search…",
+		noMatch: "No matches",
+		loading: "Loading options…",
+		moreTags: "+{count}"
+	},
 	spinner: { loading: "Loading" },
 	tag: { remove: "Remove" },
 	tagGroup: { remove: "Remove" },
@@ -103,6 +144,11 @@ var e = {
 		tagCountSingular: "{count} tag"
 	},
 	thinkingIndicator: { text: "Thinking" },
+	toast: {
+		loading: "Loading…",
+		success: "Success",
+		error: "Something went wrong"
+	},
 	tokenCounter: { label: "Tokens" },
 	toolCallCard: {
 		pending: "Pending",
@@ -122,7 +168,17 @@ var e = {
 		expand: "Expand",
 		collapse: "Collapse"
 	},
-	upload: { hint: "Drag & drop files here, or click to upload" }
+	upload: {
+		hint: "Drag & drop files here, or click to upload",
+		clickHint: "Click to browse files",
+		label: "Upload files",
+		retry: "Retry upload",
+		cancel: "Cancel upload",
+		remove: "Remove file",
+		uploading: "Uploading",
+		success: "Uploaded",
+		error: "Upload failed"
+	}
 };
 function t(e, t) {
 	return e.replace(/\{(\w+)\}/g, (e, n) => Object.prototype.hasOwnProperty.call(t, n) ? String(t[n]) : e);

package/dist/components/LocaleProvider/strings.js

@@ -0,0 +1,15 @@
+"use client";
+//#region src/lib/components/LocaleProvider/strings.ts
+function e(e, n) {
+	let r = {};
+	for (let i of Object.keys(e)) r[i] = t(e[i], n[i]);
+	return r;
+}
+function t(e, t) {
+	return {
+		...e,
+		...t
+	};
+}
+//#endregion
+export { e as createStrings };