@octane-xplat/ui 0.7.3 → 0.10.0

package/dist/web/InputNumber.web.tsrx.js

@@ -1,7 +1,7 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { Pressable } from "./Pressable.web.tsrx.js";
 import { TextInput } from "./TextInput.web.tsrx.js";
-import { __s, bag0, bag5, clone, componentSlotVoid, hookSlots, markChildrenBlock, queueRefAttach, queueRefDetach, setStyle, template, useState } from "octane";
+import { __s, bag0, bag8, clone, componentSlotVoid, hookSlots, markChildrenBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, template, useState } from "octane";
 import { bindSignalAttribute, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/InputNumber.web.tsrx
 enableSignalBindings(1, true);
@@ -20,13 +20,15 @@ var InputNumber = /* @__PURE__ */ __s(function InputNumber(props, __s, __extra)
 	const [internal, setInternal] = useState(props.defaultValue, _hs$ + 0);
 	const controlled = props.value !== void 0;
 	const value = controlled ? props.value : internal;
+	const isBlocked = props.isDisabled || props.isReadOnly;
 	const clamp = (n) => Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, n));
 	const setValue = (n) => {
+		if (isBlocked) return;
 		if (!controlled) setInternal(n);
 		props.onValueChange?.(n);
 	};
 	const stepBy = (dir) => {
-		if (props.disabled) return;
+		if (isBlocked) return;
 		setValue(clamp((value ?? 0) + dir * (props.step ?? 1)));
 	};
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
@@ -50,50 +52,58 @@ var InputNumber = /* @__PURE__ */ __s(function InputNumber(props, __s, __extra)
 		const _root = clone(_t$2);
 		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_b = bag5(__s, _root, _m0, _m1, void 0, void 0, void 0);
+		_b = bag8(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, void 0);
 		__s.refFields = _rm$5;
 	} else {
 		const _r = (e) => applyEscapeProps(e, props);
 		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:46803ab7", setPlainAttribute);
-	_b.d = updateFreshClassName([
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:1bcc1944", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-disabled", props.isDisabled || void 0, "b:dd9e1f34", setAriaAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.a, "aria-readonly", props.isReadOnly || void 0, "b:6a921dc8", setAriaAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-busy", props.isLoading || void 0, "b:6772c1bd", setAriaAttribute);
+	_b.g = updateFreshClassName([
 		"vx-inputnumber",
-		props.disabled ? "vx-inputnumber--disabled" : void 0,
+		props.isDisabled ? "vx-inputnumber--disabled" : void 0,
+		props.isReadOnly ? "vx-inputnumber--readonly" : void 0,
+		props.isLoading ? "vx-inputnumber--loading" : void 0,
+		props.status ? `vx-inputnumber--status-${props.status.type}` : void 0,
+		props.size ? `vx-inputnumber--size-${props.size}` : void 0,
 		props.className
-	], _b.d, _b.a);
+	], _b.g, _b.a);
 	{
 		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.a, _v, _b.e);
-			_b.e = _v;
+		if (_b.h !== _v) {
+			setStyle(_b.a, _v, _b.h);
+			_b.h = _v;
 		}
 	}
 	componentSlotVoid(__s, 1, _b.a, Pressable, {
 		"className": "vx-inputnumber-step",
-		"disabled": props.disabled,
+		"disabled": isBlocked,
 		"onPress": () => stepBy(-1),
 		"accessibilityLabel": "Decrement",
 		"children": markChildrenBlock(__children$1, __childrenBody)
-	}, void 0, void 0, void 0, void 0, void 0, "c:536aa980");
+	}, void 0, void 0, void 0, void 0, void 0, "c:59318371");
 	componentSlotVoid(__s, 2, _b.a, TextInput, {
 		"className": "vx-inputnumber-field",
 		"keyboardType": "decimal",
-		"editable": !props.disabled,
+		"isDisabled": props.isDisabled,
+		"isReadOnly": props.isReadOnly,
 		"placeholder": props.placeholder,
 		"value": value == null ? "" : String(value),
 		"onChange": (text) => {
 			const n = parseFloat(text);
 			if (text === "" || !isNaN(n)) setValue(clamp(text === "" ? 0 : n));
 		}
-	}, void 0, void 0, 2, void 0, void 0, "c:219cac31");
+	}, void 0, void 0, 2, void 0, void 0, "c:c891ddb7");
 	componentSlotVoid(__s, 3, _b.a, Pressable, {
 		"className": "vx-inputnumber-step",
-		"disabled": props.disabled,
+		"disabled": isBlocked,
 		"onPress": () => stepBy(1),
 		"accessibilityLabel": "Increment",
 		"children": markChildrenBlock(__children$4, __childrenBody$)
-	}, void 0, void 0, void 0, void 0, void 0, "c:63ec5d67");
+	}, void 0, void 0, void 0, void 0, void 0, "c:e6a403fa");
 });
 //#endregion
 export { InputNumber };

package/dist/web/InputRating.web.tsrx.js

@@ -1,23 +1,27 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { Icon } from "./Icon.web.tsrx.js";
-import { __s, bag8, clone, createElement, createScopedElement, createScopedValue, hookSlots, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, template, useState } from "octane";
+import { useFieldControlProps } from "./field-context.js";
+import { __s, bag15, clone, createElement, createScopedElement, createScopedValue, hookSlots, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, template, useState, withSlot } from "octane";
 import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/InputRating.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<div role=\"radiogroup\"></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(1);
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _rm$1 = [
 	"r",
 	"b",
 	"a"
 ];
-var InputRating = /* @__PURE__ */ __s(function InputRating(props, __s, __extra) {
+var InputRating = /* @__PURE__ */ __s(function InputRating(inputProps, __s, __extra) {
+	const props = withSlot(_h$0, useFieldControlProps, inputProps);
 	const max = props.max ?? 5;
-	const [internal, setInternal] = useState(props.defaultValue ?? 0, _hs$ + 0);
+	const [internal, setInternal] = useState(props.defaultValue ?? 0, _hs$ + 1);
 	const controlled = props.value !== void 0;
 	const value = controlled ? props.value : internal;
+	const isBlocked = props.isDisabled || props.isReadOnly;
 	const setValue = (n) => {
-		if (props.disabled) return;
+		if (isBlocked) return;
 		if (!controlled) setInternal(n);
 		props.onValueChange?.(n);
 	};
@@ -28,16 +32,20 @@ var InputRating = /* @__PURE__ */ __s(function InputRating(props, __s, __extra)
 		const _root = clone(_t$0);
 		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_b = bag8(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, null, void 0);
+		_b = bag15(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
 		const _r = (e) => applyEscapeProps(e, props);
 		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:a2323249", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:f8f123e4", setPlainAttribute);
 	_b.d = updateFreshClassName([
 		"vx-rating",
-		props.disabled ? "vx-rating--disabled" : void 0,
+		props.isDisabled ? "vx-rating--disabled" : void 0,
+		props.isReadOnly ? "vx-rating--readonly" : void 0,
+		props.isLoading ? "vx-rating--loading" : void 0,
+		props.status ? `vx-rating--status-${props.status.type}` : void 0,
+		props.size ? `vx-rating--size-${props.size}` : void 0,
 		props.className
 	], _b.d, _b.a);
 	{
@@ -47,26 +55,34 @@ var InputRating = /* @__PURE__ */ __s(function InputRating(props, __s, __extra)
 			_b.e = _v;
 		}
 	}
-	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-label", props.accessibilityLabel, "b:995cbbbe", setAriaAttribute);
-	_b.i = bindSignalChild(__s, _b.i, 1, _b.a, Array.from({ length: max }, (_, i) => {
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-label", props.ariaLabel, "b:5ecf0018", setAriaAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "aria-labelledby", props.ariaLabelledBy, "b:a2fff7b7", setAriaAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.a, "aria-describedby", props.ariaDescribedBy, "b:3136c6e8", setAriaAttribute);
+	_b.i = bindSignalAttribute(__s, _b.i, _b.a, "aria-disabled", props.isDisabled || void 0, "b:18b3f247", setAriaAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.a, "aria-readonly", props.isReadOnly || void 0, "b:0a5a52c0", setAriaAttribute);
+	_b.k = bindSignalAttribute(__s, _b.k, _b.a, "aria-busy", props.isLoading || void 0, "b:d7942599", setAriaAttribute);
+	_b.l = bindSignalAttribute(__s, _b.l, _b.a, "aria-required", props.isRequired && !props.isOptional || void 0, "b:0ea6d917", setAriaAttribute);
+	_b.m = bindSignalAttribute(__s, _b.m, _b.a, "aria-invalid", props.status?.type === "error" || void 0, "b:6afbadbd", setAriaAttribute);
+	_b.p = bindSignalChild(__s, _b.p, 1, _b.a, Array.from({ length: max }, (_, i) => {
 		const score = i + 1;
 		const on = score <= value;
 		return createScopedValue(() => createScopedElement("span", {
 			key: i,
 			role: "radio",
 			"aria-checked": on,
-			tabIndex: props.disabled ? void 0 : 0,
+			"aria-readonly": props.isReadOnly || void 0,
+			tabIndex: props.isDisabled ? void 0 : 0,
 			className: ["vx-rating-cell", on ? "vx-rating-cell--on" : void 0],
-			onClick: props.disabled ? void 0 : () => setValue(score),
+			onClick: isBlocked ? void 0 : () => setValue(score),
 			onKeyDown: (e) => {
-				if (props.disabled) return;
+				if (isBlocked) return;
 				if (e.key === " " || e.key === "Enter") {
 					e.preventDefault();
 					setValue(score);
 				}
 			}
-		}, () => props.icon ? createScopedValue(() => createElementFromConfig("c:735f7af4", Icon, { name: props.icon })) : createElement("span", { className: "vx-rating-glyph" }, "★")));
-	}), "b:7c9fdcbc", null, void 0, void 0, void 0, true);
+		}, () => props.icon ? createScopedValue(() => createElementFromConfig("c:76c822d8", Icon, { name: props.icon })) : createElement("span", { className: "vx-rating-glyph" }, "★")));
+	}), "b:559a6056", null, void 0, void 0, void 0, true);
 });
 //#endregion
 export { InputRating };

package/dist/web/Item.web.tsrx.js

@@ -0,0 +1,139 @@
+import { Text } from "./Text.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { __s, bag13, bag4, child, clone, componentSlotVoid, createScopedElement, drainFrag, markChildrenBlock, positionalChildren, sibling, template } from "octane";
+import { childTextHoleUpdate, textHoleUpdate, updateFreshClassName } from "octane/internal/client";
+//#region src/Item.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _t$1 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$2 = /* @__PURE__ */ template("<!><!><!><!>", 0, 1);
+var __childrenBody = {};
+var __childrenBody$ = {};
+var Leading = /* @__PURE__ */ __s(function Leading(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag4(__s, _root, void 0, _m1, null, void 0);
+	}
+	_b.a = updateFreshClassName(["vx-item-leading", props.className], _b.a, _b.b);
+	{
+		const _v = props.children;
+		_b.c = childTextHoleUpdate(__s, 1, _b.b, _v, _b.c, _b.d);
+		_b.d = _v;
+	}
+});
+var Content = /* @__PURE__ */ __s(function Content(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag4(__s, _root, void 0, _m1, null, void 0);
+	}
+	_b.a = updateFreshClassName(["vx-item-content", props.className], _b.a, _b.b);
+	{
+		const _v = props.children;
+		_b.c = childTextHoleUpdate(__s, 1, _b.b, _v, _b.c, _b.d);
+		_b.d = _v;
+	}
+});
+var Supporting = function Supporting(props, __s, __extra) {
+	const __block = __s.block;
+	function __children$3(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$1);
+			_m0 = __block.parentNode;
+			_m1 = child(_root);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag4(__s, null, _m0, _m1, null, void 0);
+		}
+		{
+			const _v = props.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+			_b.d = _v;
+		}
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Text, {
+		"className": ["vx-item-supporting", props.className],
+		"children": markChildrenBlock(__children$3, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:6576782c");
+};
+var Trailing = /* @__PURE__ */ __s(function Trailing(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag4(__s, _root, void 0, _m1, null, void 0);
+	}
+	_b.a = updateFreshClassName(["vx-item-trailing", props.className], _b.a, _b.b);
+	{
+		const _v = props.children;
+		_b.c = childTextHoleUpdate(__s, 1, _b.b, _v, _b.c, _b.d);
+		_b.d = _v;
+	}
+});
+var Item = Object.assign(function ItemView(props, __s, __extra) {
+	const __block = __s.block;
+	function __children$7(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1, _m4, _m7, _m10;
+			const _root = clone(_t$2);
+			_m0 = __block.parentNode;
+			const _el0 = child(_root);
+			_m1 = _el0;
+			const _el1 = sibling(_el0, 1);
+			_m4 = _el1;
+			const _el2 = sibling(_el1, 1);
+			_m7 = _el2;
+			_m10 = sibling(_el2, 1);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag13(__s, null, _m0, _m1, null, void 0, _m4, null, void 0, _m7, null, void 0, _m10, null, void 0);
+		}
+		{
+			const _v = props.leading != null ? createScopedElement(Leading, {}, () => props.leading, "c:ccb6b66f") : null;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true);
+			_b.d = _v;
+		}
+		{
+			const _v = props.title != null || props.supportingText != null ? createScopedElement(Content, {}, () => positionalChildren([props.title != null ? createScopedElement(Text, { className: "vx-item-title" }, () => props.title, "c:3abcd17b") : null, props.supportingText != null ? createScopedElement(Supporting, {}, () => props.supportingText, "c:7e92cfce") : null]), "c:bb948fd5") : null;
+			_b.f = textHoleUpdate(__s, 2, _b.a, _v, _b.f, _b.g, _b.e, true);
+			_b.g = _v;
+		}
+		{
+			const _v = props.children;
+			_b.i = textHoleUpdate(__s, 3, _b.a, _v, _b.i, _b.j, _b.h, true);
+			_b.j = _v;
+		}
+		{
+			const _v = props.trailing != null ? createScopedElement(Trailing, {}, () => props.trailing, "c:08c3380a") : null;
+			_b.l = textHoleUpdate(__s, 4, _b.a, _v, _b.l, _b.m, _b.k, true);
+			_b.m = _v;
+		}
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+		"id": props.id,
+		"className": ["vx-item", props.className],
+		"style": props.style,
+		"onPress": props.onPress,
+		"disabled": props.disabled,
+		"accessibilityLabel": props.accessibilityLabel,
+		"accessibilityRole": props.accessibilityRole ?? (props.onPress ? "button" : "text"),
+		"accessibilityHint": props.accessibilityHint,
+		"accessibilityState": props.accessibilityState,
+		"children": markChildrenBlock(__children$7, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:4f0b0e61");
+}, {
+	Leading,
+	Content,
+	Supporting,
+	Trailing
+});
+//#endregion
+export { Item };

package/dist/web/KeyboardAvoiding.web.tsrx.js

@@ -0,0 +1,78 @@
+import { cx } from "./cx.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/KeyboardAvoiding.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"s",
+	"f",
+	"e"
+];
+var KeyboardAvoiding = /* @__PURE__ */ __s(function KeyboardAvoiding(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5;
+		const _root = clone(_t$0);
+		_m0 = props.id;
+		_m1 = cx("vx-keyboard-avoiding", props.className);
+		_m2 = props.style;
+		_m3 = snapshotSpread(props.web);
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"className",
+				_m1
+			],
+			[
+				false,
+				"style",
+				_m2
+			],
+			[true, _m3]
+		], "b:1d590fbc", true);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = cx("vx-keyboard-avoiding", props.className);
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = props.style;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(props.web);
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"className",
+				_b.b
+			],
+			[
+				false,
+				"style",
+				_b.c
+			],
+			[true, _b.d]
+		], "b:1d590fbc", true);
+	}
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:da0dd4e6", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { KeyboardAvoiding };

package/dist/web/Lightbox.web.tsrx.js

@@ -0,0 +1,225 @@
+import { Text } from "./Text.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { cx } from "./cx.js";
+import { isolateModalFocus } from "./modal-focus.web.js";
+import { Fragment, bag4, child, clone, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, template, useEffect, useRef, useState } from "octane";
+import { compilerMemoRegion, createElementFromConfig, hookMemoCreate, hookMemoEqual, hookMemoPublish1, hookMemoPublish2, hookMemoPublishInvariant, textHoleUpdate } from "octane/internal/client";
+//#region src/Lightbox.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(10);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const index = __extra[0];
+	const props = __extra[1];
+	const setIndex = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	{
+		const _v = /* @__PURE__ */ createPortal(createScopedValue(() => createElementFromConfig("c:5d15db44", LightboxLayer, {
+			media: props.media,
+			index,
+			setIndex,
+			onClose: () => props.onOpenChange(false),
+			hasZoom: props.hasZoom ?? true,
+			hasAutoPlay: props.hasAutoPlay ?? false,
+			finalFocusRef: props.finalFocusRef,
+			className: props.className,
+			style: props.style,
+			id: props.id,
+			web: props.web
+		})), document.body);
+		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+		_b.d = _v;
+	}
+}
+var clampIndex = (i, count) => count <= 0 ? 0 : Math.min(Math.max(i, 0), count - 1);
+var LightboxLayer = function LightboxLayer(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(9);
+	let __hkd0, __hkd1, __hkd0$;
+	const { media, index } = props;
+	const count = media.length;
+	const item = media[index];
+	const layer = useRef(null, _hs$ + 0);
+	const stage = useRef(null, _hs$ + 1);
+	const imgEl = useRef(null, _hs$ + 2);
+	const [zoomed, setZoomed] = useState(false, _hs$ + 3);
+	const pan = useRef({
+		x: 0,
+		y: 0
+	}, _hs$ + 4);
+	const drag = useRef(null, _hs$ + 5);
+	const onClose = useRef(props.onClose, _hs$ + 6);
+	onClose.current = props.onClose;
+	const setIndex = useRef(props.setIndex, _hs$ + 7);
+	setIndex.current = props.setIndex;
+	const isVideo = item?.type === "video";
+	const zoomOn = (props.hasZoom ?? true) && !isVideo;
+	__hkd0 = props.index, __hkd1 = count, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) ? hookMemoPublish2(__hk, 0, () => {
+		setIndex.current(clampIndex(props.index + 1, count) === props.index ? props.index : props.index + 1);
+	}, __hkd0, __hkd1) : __hk[3];
+	__hkd0$ = props.index, __hk[4] !== true || !hookMemoEqual(__hk[5], __hkd0$) ? hookMemoPublish1(__hk, 4, () => {
+		setIndex.current(props.index - 1 >= 0 ? props.index - 1 : props.index);
+	}, __hkd0$) : __hk[6];
+	useEffect(() => {
+		const el = layer.current;
+		const panel = stage.current;
+		if (!el || !panel) return;
+		const restoreScroll = document.documentElement.style.overflow || "";
+		document.documentElement.style.overflow = "hidden";
+		const releaseFocus = isolateModalFocus(el, panel, () => {
+			props.finalFocusRef?.current;
+			onClose.current();
+		});
+		const rtl = getComputedStyle(el).direction === "rtl";
+		const onKey = (event) => {
+			if (event.isComposing) return;
+			const fwd = rtl ? "ArrowLeft" : "ArrowRight";
+			const back = rtl ? "ArrowRight" : "ArrowLeft";
+			if (event.key === fwd) setIndex.current(Math.min(index + 1, count - 1));
+			else if (event.key === back) setIndex.current(Math.max(index - 1, 0));
+		};
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("keydown", onKey);
+			releaseFocus();
+			document.documentElement.style.overflow = restoreScroll;
+			const target = props.finalFocusRef?.current;
+			if (target && typeof target.focus === "function" && target.isConnected !== false) target.focus({ preventScroll: true });
+		};
+	}, [index, count], _hs$ + 8);
+	const applyZoom = __hk[7] ?? hookMemoPublishInvariant(__hk, 7, (on, keepPan = false) => {
+		const el = imgEl.current;
+		if (!el) return;
+		setZoomed(on);
+		if (!keepPan) pan.current = {
+			x: 0,
+			y: 0
+		};
+		el.style.transform = on ? `scale(2.5) translate(${pan.current.x}px, ${pan.current.y}px)` : "";
+		el.style.cursor = on ? "grab" : "zoom-in";
+	});
+	const onMediaClick = () => {
+		if (zoomOn) applyZoom(!zoomed);
+	};
+	const onPointerDown = (event) => {
+		if (!zoomed || !imgEl.current) return;
+		drag.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		imgEl.current.setPointerCapture?.(event.pointerId);
+		imgEl.current.style.cursor = "grabbing";
+	};
+	const onPointerMove = __hk[8] ?? hookMemoPublishInvariant(__hk, 8, (event) => {
+		const start = drag.current;
+		const el = imgEl.current;
+		if (!start || !el) return;
+		pan.current = {
+			x: pan.current.x + (event.clientX - start.x) / 2.5,
+			y: pan.current.y + (event.clientY - start.y) / 2.5
+		};
+		drag.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		el.style.transform = `scale(2.5) translate(${pan.current.x}px, ${pan.current.y}px)`;
+	});
+	const onPointerUp = () => {
+		drag.current = null;
+		if (imgEl.current) imgEl.current.style.cursor = zoomed ? "grab" : "zoom-in";
+	};
+	return createScopedValue(() => createScopedElement("div", {
+		ref: layer,
+		id: props.id,
+		className: cx("vx-lightbox-layer", props.className),
+		style: props.style,
+		role: "dialog",
+		"aria-modal": true,
+		"aria-label": item?.alt ?? "Media viewer",
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onClose.current();
+		},
+		...props.web
+	}, () => createScopedValue(() => createScopedElement("div", {
+		ref: stage,
+		className: "vx-lightbox-stage",
+		tabIndex: -1
+	}, () => positionalChildren([
+		item != null && (isVideo ? createScopedValue(() => createElement("video", {
+			className: "vx-lightbox-media",
+			src: item.src,
+			controls: true,
+			autoPlay: props.hasAutoPlay,
+			"aria-label": item.alt
+		})) : createScopedValue(() => createElement("img", {
+			ref: imgEl,
+			className: "vx-lightbox-media",
+			src: item.src,
+			alt: item.alt,
+			draggable: false,
+			style: { cursor: zoomOn ? zoomed ? "grab" : "zoom-in" : void 0 },
+			onClick: onMediaClick,
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel: onPointerUp
+		}))),
+		count > 1 && createScopedElement(Fragment, {}, () => positionalChildren([createScopedValue(() => createScopedElement(Pressable, {
+			className: "vx-lightbox-nav vx-lightbox-prev",
+			accessibilityLabel: "Previous",
+			onPress: () => setIndex.current(Math.max(index - 1, 0)),
+			disabled: index <= 0
+		}, () => createElementFromConfig("c:ed77b386", Icon, { name: "xplat-chevron-left" }), "c:c3cdb323")), createScopedValue(() => createScopedElement(Pressable, {
+			className: "vx-lightbox-nav vx-lightbox-next",
+			accessibilityLabel: "Next",
+			onPress: () => setIndex.current(Math.min(index + 1, count - 1)),
+			disabled: index >= count - 1
+		}, () => createElementFromConfig("c:eccb259a", Icon, { name: "xplat-chevron-right" }), "c:bc09a835"))])),
+		createScopedElement(Pressable, {
+			className: "vx-lightbox-close",
+			accessibilityLabel: "Close",
+			onPress: () => onClose.current()
+		}, () => createElementFromConfig("c:58c9a20a", Icon, { name: "xplat-close" }), "c:806c911f"),
+		count > 1 && createScopedElement("div", {
+			className: "vx-lightbox-counter",
+			"aria-live": "polite"
+		}, () => positionalChildren([
+			index + 1,
+			" of ",
+			count
+		])),
+		item?.caption != null && createScopedElement("div", { className: "vx-lightbox-caption" }, () => typeof item.caption === "string" ? createScopedElement(Text, {}, () => item.caption, "c:be955464") : item.caption)
+	])))));
+};
+var Lightbox = function Lightbox(props, __s, __extra) {
+	const __block = __s.block;
+	const [internal, setInternal] = useState(props.defaultIndex ?? 0, _hs$ + 9);
+	const count = props.media.length;
+	const index = clampIndex(props.index ?? internal, count);
+	const setIndex = (i) => {
+		const clamped = clampIndex(i, count);
+		if (props.index == null) setInternal(clamped);
+		if (clamped !== index) props.onIndexChange?.(clamped);
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	{
+		const __ifCondition = props.isOpen && count > 0;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [
+			index,
+			props,
+			setIndex
+		] : void 0);
+	}
+};
+//#endregion
+export { Lightbox };