haze-ui 1.26.0 → 1.28.0

package/dist/components/Divider/Divider.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/Divider/index.js

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

package/dist/components/Drawer/Drawer.js

@@ -1,56 +1,76 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useFocusScope as t } from "../../utils/focus-scope.js";
-import { whenExitSettles as n } from "../../utils/presence.js";
+import { whenExitSettles as t } from "../../utils/presence.js";
+import { useFocusScope as n } from "../../utils/focus-scope.js";
+import { useViewTransitionFlip as r } from "../../utils/view-transition.js";
 /* empty css                 */
-import { jsx as r } from "react/jsx-runtime";
-import { useCallback as i, useEffect as a, useRef as o } from "react";
-import { useControl as s } from "react-use-control";
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as a, useEffect as o, useImperativeHandle as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Drawer/Drawer.tsx
-var c = "haze-Drawer__overlay", l = {
+var u = "haze-Drawer__overlay", d = {
 	left: "haze-Drawer__left",
 	right: "haze-Drawer__right",
 	top: "haze-Drawer__top",
 	bottom: "haze-Drawer__bottom"
 };
-function u({ open: u, placement: d = "right", onClose: f, className: p, children: m }) {
-	let [h, g] = s(u, !1), _ = o(null), v = t({
-		enabled: h,
+function f({ open: f, placement: p = "right", onClose: m, viewTransition: h = !1, className: g, children: _, ref: v }) {
+	let [y, b] = l(f, !1), x = r(h, b), S = c(null);
+	o(() => {
+		if (!y) return;
+		let e = document.activeElement;
+		S.current = e instanceof HTMLElement ? e : null;
+	}, [y]);
+	let C = c(null), w = n({
+		enabled: y,
 		trapped: !1
-	}), y = i((e) => {
-		_.current = e, v(e);
-	}, [v]);
-	return a(() => {
-		let e = _.current;
+	});
+	s(v, () => ({
+		open: () => {
+			x(!0);
+		},
+		close: () => {
+			x(!1);
+		},
+		focusTrigger: () => {
+			let e = S.current;
+			e?.isConnected && e.focus();
+		}
+	}), [x]);
+	let T = a((e) => {
+		C.current = e, w(e);
+	}, [w]);
+	return o(() => {
+		let e = C.current;
 		if (e) {
-			if (h && !e.open) e.showModal();
-			else if (!h && e.open) {
-				let t = n(e), r = () => {
+			if (y && !e.open) e.showModal();
+			else if (!y && e.open) {
+				let n = t(e), r = () => {
 					e.getAttribute("data-state") === "closed" && e.close();
 				};
-				t ? t.then(r) : r();
+				n ? n.then(r) : r();
 			}
 		}
-	}, [h]), /* @__PURE__ */ r("dialog", {
-		ref: y,
-		"data-state": h ? "open" : "closed",
+	}, [y]), /* @__PURE__ */ i("dialog", {
+		ref: T,
+		"data-state": y ? "open" : "closed",
 		onClose: () => {
-			g(!1), f?.();
+			b(!1), m?.();
 		},
 		onCancel: (e) => {
-			e.preventDefault(), g(!1);
+			e.preventDefault(), x(!1);
 		},
 		onClick: (e) => {
-			e.target === _.current && g(!1);
+			e.target === C.current && x(!1);
 		},
 		className: e([
-			c,
-			l[d],
-			p
+			u,
+			d[p],
+			g
 		]),
-		children: m
+		children: _
 	});
 }
 //#endregion
-export { u as default };
+export { f as default };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -5,41 +5,53 @@ import { useFloating as t } from "../../utils/floating.js";
 import { DropdownMenuProvider as n } from "./DropdownMenuContext.js";
 /* empty css                       */
 import { jsx as r } from "react/jsx-runtime";
-import { useCallback as i, useId as a, useMemo as o, useRef as s } from "react";
-import { useControl as c } from "react-use-control";
+import { useCallback as i, useId as a, useImperativeHandle as o, useMemo as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/DropdownMenu/DropdownMenu.tsx
-var l = "haze-DropdownMenu__wrapper";
-function u({ open: u, onOpenChange: d, collisionPadding: f, children: p, className: m }) {
-	let [h, g] = c(u, !1), _ = s(null), v = s(null), y = a(), b = s(null), x = i((e) => {
-		let t = typeof e == "function" ? e(h) : e;
-		g(t), d?.(t);
+var u = "haze-DropdownMenu__wrapper";
+function d({ open: d, onOpenChange: f, collisionPadding: p, children: m, className: h, ref: g }) {
+	let [_, v] = l(d, !1), y = c(null), b = c(null), x = a(), S = c(null), C = i((e) => {
+		let t = typeof e == "function" ? e(_) : e;
+		v(t), f?.(t);
 	}, [
-		h,
-		g,
-		d
-	]), S = o(() => f === void 0 ? void 0 : { collisionPadding: f }, [f]), C = t({
-		open: h,
-		setOpen: x,
-		triggerRef: _,
-		panelRef: v,
+		_,
+		v,
+		f
+	]);
+	o(g, () => ({
+		open: () => {
+			C(!0);
+		},
+		close: () => {
+			C(!1);
+		},
+		focusTrigger: () => {
+			y.current?.focus();
+		}
+	}), [C]);
+	let w = s(() => p === void 0 ? void 0 : { collisionPadding: p }, [p]), T = t({
+		open: _,
+		setOpen: C,
+		triggerRef: y,
+		panelRef: b,
 		animated: !0,
-		collision: S
+		collision: w
 	});
 	return /* @__PURE__ */ r(n, {
 		value: {
-			open: h,
-			setOpen: x,
-			triggerRef: _,
-			contentRef: v,
-			contentId: y,
-			focusRequestRef: b,
-			floating: C
+			open: _,
+			setOpen: C,
+			triggerRef: y,
+			contentRef: b,
+			contentId: x,
+			focusRequestRef: S,
+			floating: T
 		},
 		children: r("div", {
-			className: e([l, m]),
-			children: p
+			className: e([u, h]),
+			children: m
 		})
 	});
 }
 //#endregion
-export { u as default };
+export { d as default };

package/dist/components/DropdownMenu/DropdownMenuSub.js

@@ -0,0 +1,23 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { SubmenuProvider as t, useSubmenu as n } from "../../utils/submenu.js";
+/* empty css                          */
+import { jsx as r } from "react/jsx-runtime";
+//#region src/lib/components/DropdownMenu/DropdownMenuSub.tsx
+var i = "haze-DropdownMenuSub__wrapper";
+function a({ open: a, onOpenChange: o, className: s, children: c }) {
+	let l = n({
+		open: a,
+		onOpenChange: o
+	});
+	return /* @__PURE__ */ r(t, {
+		value: l,
+		children: r("div", {
+			className: e([i, s]),
+			children: c
+		})
+	});
+}
+//#endregion
+export { a as default };

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/FilePreview/FilePreview.js

@@ -0,0 +1,135 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import n from "../Progress/Progress.js";
+import { formatFileSize as r, getFileExtension as i } from "./file-preview-format.js";
+/* empty css                      */
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/lib/components/FilePreview/FilePreview.tsx
+var s = "haze-FilePreview__card", c = "haze-FilePreview__thumbWrap", l = "haze-FilePreview__thumb", u = "haze-FilePreview__extBadge", d = "haze-FilePreview__info", f = "haze-FilePreview__nameClass", p = "haze-FilePreview__meta", m = "haze-FilePreview__statusUploading", h = "haze-FilePreview__statusError", g = "haze-FilePreview__srOnly", _ = "haze-FilePreview__actions", v = "haze-FilePreview__actionBtn", y = "haze-FilePreview__actionBtnRetry", b = "haze-FilePreview__progressRow", x = "haze-FilePreview__percentClass", S = () => /* @__PURE__ */ o("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.25",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [/* @__PURE__ */ a("path", { d: "M9 1.5H4A1.5 1.5 0 0 0 2.5 3v10A1.5 1.5 0 0 0 4 14.5h8a1.5 1.5 0 0 0 1.5-1.5V6L9 1.5Z" }), /* @__PURE__ */ a("path", { d: "M9 1.5V6h4.5" })]
+}), C = () => /* @__PURE__ */ a("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: a("path", { d: "M2 6.5 4.8 9.2 10 3.5" })
+}), w = () => /* @__PURE__ */ o("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: [/* @__PURE__ */ a("path", { d: "M10.5 6a4.5 4.5 0 1 1-1.32-3.18" }), /* @__PURE__ */ a("path", { d: "M10.5 1v2.5H8" })]
+}), T = () => /* @__PURE__ */ a("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: a("path", { d: "M2.5 2.5l7 7M9.5 2.5l-7 7" })
+});
+function E({ file: E, status: D = "uploaded", progress: O, onRemove: k, onRetry: A, removeLabel: j, retryLabel: M, uploadingLabel: N, uploadedLabel: P, errorLabel: F, className: I, ...L }) {
+	let R = t("filePreview"), z = j ?? R.remove, B = M ?? R.retry, V = N ?? R.uploading, H = P ?? R.uploaded, U = F ?? R.error, W = (E.type?.startsWith("image/") ?? !1) && E.url !== void 0, G = W ? "" : i(E.name), K = r(E.size), q = O === void 0 ? void 0 : Math.max(0, Math.min(100, O));
+	return /* @__PURE__ */ o("div", {
+		...L,
+		className: e([s, I]),
+		children: [
+			W ? /* @__PURE__ */ a("img", {
+				src: E.url,
+				alt: "",
+				loading: "lazy",
+				className: e([l])
+			}) : /* @__PURE__ */ o("span", {
+				className: e([c]),
+				children: [/* @__PURE__ */ a(S, {}), G && /* @__PURE__ */ a("span", {
+					"aria-hidden": "true",
+					className: e([u]),
+					children: G
+				})]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: e([d]),
+				children: [/* @__PURE__ */ a("span", {
+					title: E.name,
+					className: e([f]),
+					children: E.name
+				}), /* @__PURE__ */ o("div", {
+					className: e([p]),
+					children: [
+						K && /* @__PURE__ */ a("span", { children: K }),
+						D === "uploading" && /* @__PURE__ */ a("span", {
+							className: e([m]),
+							children: V
+						}),
+						D === "uploaded" && /* @__PURE__ */ o("span", {
+							className: e([m]),
+							children: [/* @__PURE__ */ a(C, {}), /* @__PURE__ */ a("span", {
+								className: e([g]),
+								children: H
+							})]
+						}),
+						D === "error" && /* @__PURE__ */ a("span", {
+							className: e([h]),
+							children: U
+						})
+					]
+				})]
+			}),
+			(k || D === "error" && A) && /* @__PURE__ */ o("div", {
+				className: e([_]),
+				children: [D === "error" && A && /* @__PURE__ */ a("button", {
+					type: "button",
+					"aria-label": B,
+					onClick: A,
+					className: e([v, y]),
+					children: /* @__PURE__ */ a(w, {})
+				}), k && /* @__PURE__ */ a("button", {
+					type: "button",
+					"aria-label": z,
+					onClick: k,
+					className: e([v]),
+					children: /* @__PURE__ */ a(T, {})
+				})]
+			}),
+			D === "uploading" && /* @__PURE__ */ o("div", {
+				className: e([b]),
+				children: [/* @__PURE__ */ a(n, {
+					value: q ?? 0,
+					size: "sm"
+				}), q !== void 0 && /* @__PURE__ */ o("span", {
+					className: e([x]),
+					children: [Math.round(q), "%"]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { E as default };

package/dist/components/FilePreview/file-preview-format.js

@@ -0,0 +1,23 @@
+"use client";
+//#region src/lib/components/FilePreview/file-preview-format.ts
+function e(e) {
+	if (e == null || !Number.isFinite(e) || e < 0) return "";
+	if (e < 1024) return `${e} B`;
+	let t = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	], n = e, r = -1;
+	do
+		n /= 1024, r += 1;
+	while (n >= 1024 && r < t.length - 1);
+	let i = n >= 100 ? 0 : n >= 10 ? 1 : 2;
+	return `${n.toFixed(i)} ${t[r]}`;
+}
+function t(e) {
+	let t = e.lastIndexOf(".");
+	return t <= 0 || t === e.length - 1 ? "" : e.slice(t + 1).toUpperCase();
+}
+//#endregion
+export { e as formatFileSize, t as getFileExtension };

package/dist/components/FilePreview/index.js

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

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/FloatButton/FloatButton.js

@@ -0,0 +1,42 @@
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { fab as t, iconBox as n, shapes as r, variants as i } from "./float-button-styles.js";
+import { PlusGlyph as a } from "./float-button-glyphs.js";
+import { useFloatButtonGroup as o } from "./float-button-context.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/lib/components/FloatButton/FloatButton.tsx
+function u({ icon: u, description: d, shape: f = "circle", variant: p = "solid", href: m, className: h, onClick: g, ..._ }) {
+	let v = o(), y = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+		"aria-hidden": "true",
+		className: e([n]),
+		children: u ?? /* @__PURE__ */ c(a, {})
+	}), d != null && /* @__PURE__ */ c("span", {
+		className: e(["haze-float-button-styles__descBox"]),
+		children: d
+	})] }), b = [
+		t,
+		r[f],
+		i[p],
+		!v && "haze-float-button-styles__anchored",
+		h
+	];
+	return m == null ? /* @__PURE__ */ c("button", {
+		type: "button",
+		..._,
+		onClick: (e) => {
+			g?.(e), v?.closeMenu();
+		},
+		className: e(b),
+		children: y
+	}) : /* @__PURE__ */ c("a", {
+		href: m,
+		..._,
+		onClick: (e) => {
+			g?.(e), v?.closeMenu();
+		},
+		className: e(b),
+		children: y
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/FloatButton/FloatButtonGroup.js

@@ -0,0 +1,58 @@
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { anchored as t, fab as n, groupAnchor as r, iconBox as i, menuList as a, shapes as o, variants as s } from "./float-button-styles.js";
+import { PlusGlyph as c } from "./float-button-glyphs.js";
+import { FloatButtonGroupContext as l } from "./float-button-context.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useCallback as f, useId as p, useMemo as m } from "react";
+import { useControl as h } from "react-use-control";
+//#region src/lib/components/FloatButton/FloatButtonGroup.tsx
+function g({ open: g, onOpenChange: _, icon: v, description: y, shape: b = "circle", variant: x = "solid", children: S, className: C, onKeyDown: w, ...T }) {
+	let [E, D] = h(g, !1), O = p(), k = E ? "open" : "closed", A = f((e) => {
+		D(e), _?.(e);
+	}, [D, _]), j = f(() => {
+		E && A(!1);
+	}, [E, A]), M = m(() => ({ closeMenu: j }), [j]);
+	return /* @__PURE__ */ u(l.Provider, {
+		value: M,
+		children: /* @__PURE__ */ d("div", {
+			"data-state": k,
+			onKeyDown: (e) => {
+				w?.(e), e.key === "Escape" && j();
+			},
+			...T,
+			className: e([
+				r,
+				t,
+				C
+			]),
+			children: [/* @__PURE__ */ u("div", {
+				id: O,
+				"data-state": k,
+				className: e([a]),
+				children: /* @__PURE__ */ u("div", { children: S })
+			}), /* @__PURE__ */ d("button", {
+				type: "button",
+				"data-state": k,
+				"aria-expanded": E,
+				"aria-controls": O,
+				onClick: () => A(!E),
+				className: e([
+					n,
+					o[b],
+					s[x]
+				]),
+				children: [/* @__PURE__ */ u("span", {
+					"aria-hidden": "true",
+					className: e([i, E && "haze-float-button-styles__iconOpen"]),
+					children: v ?? /* @__PURE__ */ u(c, {})
+				}), y != null && /* @__PURE__ */ u("span", {
+					className: e(["haze-float-button-styles__descBox"]),
+					children: y
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/FloatButton/float-button-context.js

@@ -0,0 +1,9 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/lib/components/FloatButton/float-button-context.ts
+var n = e(void 0);
+function r() {
+	return t(n);
+}
+//#endregion
+export { n as FloatButtonGroupContext, r as useFloatButtonGroup };

package/dist/components/FloatButton/float-button-glyphs.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/lib/components/FloatButton/float-button-glyphs.tsx
+function n() {
+	return /* @__PURE__ */ t("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ e("line", {
+			x1: "12",
+			y1: "5",
+			x2: "12",
+			y2: "19"
+		}), /* @__PURE__ */ e("line", {
+			x1: "5",
+			y1: "12",
+			x2: "19",
+			y2: "12"
+		})]
+	});
+}
+//#endregion
+export { n as PlusGlyph };

package/dist/components/FloatButton/float-button-styles.js

@@ -0,0 +1,14 @@
+
+"use client";
+/* empty css                              */
+//#region src/lib/components/FloatButton/float-button-styles.ts
+var e = "haze-float-button-styles__fab", t = {
+	circle: "haze-float-button-styles__circle",
+	square: "haze-float-button-styles__square"
+}, n = {
+	solid: "haze-float-button-styles__solid",
+	outline: "haze-float-button-styles__outline",
+	ghost: "haze-float-button-styles__ghost"
+}, r = "haze-float-button-styles__anchored", i = "haze-float-button-styles__groupAnchor", a = "haze-float-button-styles__menuList", o = "haze-float-button-styles__iconBox", s = "haze-float-button-styles__iconOpen", c = "haze-float-button-styles__descBox";
+//#endregion
+export { r as anchored, c as descBox, e as fab, i as groupAnchor, o as iconBox, s as iconOpen, a as menuList, t as shapes, n as variants };

package/dist/components/FloatButton/index.js

@@ -0,0 +1,4 @@
+"use client";
+import e from "./FloatButton.js";
+import t from "./FloatButtonGroup.js";
+export { e as FloatButton, t as FloatButtonGroup };

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 };