@octane-xplat/ui 0.5.0 → 0.6.0

package/dist/web/Collapsible.web.tsrx.js

@@ -0,0 +1,94 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { __s, bag3, bag4, bag7, child, clone, componentSlotVoid, drainFrag, hookSlots, ifBlock, markChildrenBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Collapsible.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<div class=\"vx-collapsible-content\"></div>");
+var _t$2 = /* @__PURE__ */ template("<div><!><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var __childrenBody = {};
+function __then$3(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$1);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.children, "b:9548fdaa", null, void 0, void 0, void 0, true);
+}
+var _rm$6 = [
+	"r",
+	"b",
+	"a"
+];
+var Collapsible = /* @__PURE__ */ __s(function Collapsible(props, __s, __extra) {
+	__s.block;
+	const [internal, setInternal] = useState(props.defaultOpen ?? false, _hs$ + 0);
+	const controlled = props.open !== void 0;
+	const open = controlled ? props.open : internal;
+	const toggle = () => {
+		if (props.disabled) return;
+		const next = !open;
+		if (!controlled) setInternal(next);
+		props.onOpenChange?.(next);
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		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);
+		}
+		_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.trigger, "b:5b5d890f", _b.b, true, void 0, true, void 0);
+	}
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5, _m6;
+		const _root = clone(_t$2);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m5 = sibling(child(_root), 1);
+		_m6 = child(_root);
+		_b = bag7(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6);
+		__s.refFields = _rm$6;
+	} 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:056a0cec", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-collapsible",
+		open ? "vx-collapsible--open" : void 0,
+		props.className
+	], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	componentSlotVoid(__s, 1, _b.a, Pressable, {
+		"className": "vx-collapsible-trigger",
+		"disabled": props.disabled,
+		"onPress": toggle,
+		"accessibilityLabel": props.accessibilityLabel,
+		"accessibilityState": { disabled: props.disabled },
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, _b.g, void 0, void 0, void 0, void 0, "c:97aaebd7");
+	{
+		const __ifCondition = open;
+		ifBlock(__s, 2, _b.a, __ifCondition, __then$3, null, _b.f, __ifCondition ? [props] : void 0);
+	}
+});
+//#endregion
+export { Collapsible };

package/dist/web/CommandPalette.web.tsrx.js

@@ -0,0 +1,125 @@
+import { Icon } from "./Icon.web.tsrx.js";
+import { TextInput } from "./TextInput.web.tsrx.js";
+import { Overlay } from "./Overlay.web.tsrx.js";
+import { bag3, bag5, bag7, child, clone, componentSlot, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, hookSlots, ifBlock, mapSlot, markChildrenBlock, positionalChildren, setAriaAttribute, setEventHandler, setStyle, sibling, template, useEffect, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/CommandPalette.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<span class=\"vx-menu-item-label\"></span>");
+var _t$1 = /* @__PURE__ */ template("<div role=\"option\"><!><!></div>");
+var _t$2 = /* @__PURE__ */ template("<div><!><div role=\"listbox\" class=\"vx-menu-list vx-cmdk-list\"><!></div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var _key$3 = (item) => item.key;
+function __then$5(__props, __s, __extra) {
+	const __block = __s.block;
+	const item = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, Icon, { "name": item.icon }, __block.endMarker, void 0, 2, void 0, void 0, "c:6205bbb8");
+}
+function __then$8(__props, __s, __extra) {
+	const item = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, item.label, "b:977bb8c3", null, void 0, void 0, void 0, true);
+}
+function __item$4(item, __s, __extra) {
+	const select = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m3, _m4;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		setEventHandler(_root, "$$click", item.disabled ? void 0 : () => select(item));
+		const _el0 = child(_root);
+		_m3 = _el0;
+		_m4 = sibling(_el0, 1);
+		_b = bag5(__s, _root, void 0, _m1, void 0, _m3, _m4);
+	} else setEventHandler(_b.b, "$$click", item.disabled ? void 0 : () => select(item));
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-disabled", item.disabled || void 0, "b:6098cd7f", setAriaAttribute);
+	_b.c = updateFreshClassName(["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0], _b.c, _b.b);
+	{
+		const __ifCondition = item.icon;
+		ifBlock(__s, 1, _b.b, __ifCondition, __then$5, null, _b.d, __ifCondition ? [item] : void 0);
+	}
+	{
+		const __ifCondition$ = item.label != null;
+		ifBlock(__s, 2, _b.b, __ifCondition$, __then$8, null, _b.e, __ifCondition$ ? [item] : void 0);
+	}
+}
+var __childrenBody = {};
+var CommandPalette = function CommandPalette(props, __s, __extra) {
+	const __block = __s.block;
+	const [query, setQuery] = useState("", _hs$ + 0);
+	const setOpen = (next) => {
+		if (!next) setQuery("");
+		props.onOpenChange?.(next);
+	};
+	useEffect(() => {
+		if (!props.open) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [props.open], _hs$ + 1);
+	const shown = query ? props.items.filter((i) => (i.label ?? i.key).toLowerCase().includes(query.toLowerCase())) : props.items;
+	const select = (item) => {
+		if (item.disabled) return;
+		setOpen(false);
+		item.onSelect?.();
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$1(__props, __s, __extra) {
+		let __mapMethod;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m1, _m4, _m5, _m6;
+			const _root = clone(_t$2);
+			_m1 = _root;
+			const _el0 = sibling(child(_root), 1);
+			_m4 = _el0;
+			_m5 = child(_el0);
+			_m6 = child(_root);
+			_b = bag7(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6);
+		}
+		_b.a = updateFreshClassName(["vx-commandpalette", props.className], _b.a, _b.b);
+		{
+			const _v = props.style;
+			if (_b.c !== _v) {
+				setStyle(_b.b, _v, _b.c);
+				_b.c = _v;
+			}
+		}
+		_b.d = bindSignalAttribute(__s, _b.d, _b.b, "id", props.id, "b:7cf5e4c8", setPlainAttribute);
+		componentSlotVoid(__s, 1, _b.b, TextInput, {
+			"className": "vx-cmdk-search",
+			"placeholder": props.placeholder ?? "Type a command…",
+			"value": query,
+			"onChange": setQuery,
+			"onSubmit": () => {
+				if (shown.length && !shown[0].disabled) select(shown[0]);
+			}
+		}, _b.g, void 0, 2, void 0, void 0, "c:9baf90e7");
+		mapSlot(__s, 2, _b.e, (__mapMethod = shown.map, shown), __mapMethod, (item) => createScopedElement("div", {
+			key: item.key,
+			role: "option",
+			"aria-disabled": item.disabled || void 0,
+			className: ["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0],
+			onClick: item.disabled ? void 0 : () => select(item)
+		}, () => positionalChildren([item.icon ? createScopedValue(() => createElementFromConfig("c:c4f37a0d", Icon, { name: item.icon })) : null, item.label != null ? createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label) : null])), _key$3, __item$4, 26, [select], _b.f, 1);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Overlay, {
+		"open": props.open,
+		"shadeCover": true,
+		"onDismiss": () => setOpen(false),
+		"className": "vx-cmdk-layer",
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:7910e6ea");
+};
+//#endregion
+export { CommandPalette };

package/dist/web/ContextMenu.web.tsrx.js

@@ -0,0 +1,154 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { __s, bag10, bag2, bag3, bag5, child, clone, componentSlot, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, evt2e, evt2u, hookSlots, ifBlock, mapSlot, markChildrenBlock, positionalChildren, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, template, useEffect, useRef, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/ContextMenu.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click", "contextmenu"]);
+var _t$0 = /* @__PURE__ */ template("<span class=\"vx-menu-item-label\"></span>");
+var _t$1 = /* @__PURE__ */ template("<div role=\"menuitem\"><!><!></div>");
+var _t$2 = /* @__PURE__ */ template("<div role=\"menu\" class=\"vx-menu-list\"><!></div>");
+var _t$3 = /* @__PURE__ */ template("<div><!><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var __event = (e, props, setOpen) => {
+	if (props.disabled) return;
+	e.preventDefault();
+	setOpen(true);
+};
+var _key$3 = (item) => item.key;
+function __then$5(__props, __s, __extra) {
+	const __block = __s.block;
+	const item = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, Icon, { "name": item.icon }, __block.endMarker, void 0, 2, void 0, void 0, "c:61362e82");
+}
+function __then$8(__props, __s, __extra) {
+	const item = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, item.label, "b:6f8390fb", null, void 0, void 0, void 0, true);
+}
+function __item$4(item, __s, __extra) {
+	const select = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m3, _m4;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		setEventHandler(_root, "$$click", item.disabled ? void 0 : () => select(item));
+		const _el0 = child(_root);
+		_m3 = _el0;
+		_m4 = sibling(_el0, 1);
+		_b = bag5(__s, _root, void 0, _m1, void 0, _m3, _m4);
+	} else setEventHandler(_b.b, "$$click", item.disabled ? void 0 : () => select(item));
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-disabled", item.disabled || void 0, "b:7b8eac99", setAriaAttribute);
+	_b.c = updateFreshClassName(["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0], _b.c, _b.b);
+	{
+		const __ifCondition = item.icon;
+		ifBlock(__s, 1, _b.b, __ifCondition, __then$5, null, _b.d, __ifCondition ? [item] : void 0);
+	}
+	{
+		const __ifCondition$ = item.label != null;
+		ifBlock(__s, 2, _b.b, __ifCondition$, __then$8, null, _b.e, __ifCondition$ ? [item] : void 0);
+	}
+}
+var __childrenBody = {};
+var _rm$12 = [
+	"r",
+	"b",
+	"a"
+];
+var ContextMenu = /* @__PURE__ */ __s(function ContextMenu(props, __s, __extra) {
+	const anchor = useRef(null, _hs$ + 0);
+	const [internal, setInternal] = useState(props.defaultOpen ?? false, _hs$ + 1);
+	const controlled = props.open !== void 0;
+	const open = controlled ? props.open : internal;
+	const setOpen = (next) => {
+		if (props.disabled && next) return;
+		if (!controlled) setInternal(next);
+		props.onOpenChange?.(next);
+	};
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [open], _hs$ + 2);
+	const select = (item) => {
+		if (item.disabled) return;
+		setOpen(false);
+		item.onSelect?.();
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$2(__props, __s, __extra) {
+		let __mapItems;
+		let __mapMethod;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$2);
+			_m0 = _root;
+			_m1 = child(_root);
+			_b = bag2(__s, _root, _m0, _m1);
+		}
+		mapSlot(__s, 1, _b.a, (__mapItems = props.items, __mapMethod = __mapItems.map, __mapItems), __mapMethod, (item) => createScopedElement("div", {
+			key: item.key,
+			role: "menuitem",
+			"aria-disabled": item.disabled || void 0,
+			className: ["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0],
+			onClick: item.disabled ? void 0 : () => select(item)
+		}, () => positionalChildren([item.icon ? createScopedValue(() => createElementFromConfig("c:a3074f03", Icon, { name: item.icon })) : null, item.label != null ? createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label) : null])), _key$3, __item$4, 26, [select], _b.b, 1);
+	}
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5, _m6, _m9;
+		const _root = clone(_t$3);
+		queueRefAttach(__s, _m1 = (e) => {
+			anchor.current = e;
+			if (e) applyEscapeProps(e, props);
+		}, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m5 = evt2e(_root, "$$contextmenu", __event, props, setOpen);
+		const _el0 = child(_root);
+		_m6 = _el0;
+		_m9 = sibling(_el0, 1);
+		_b = bag10(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6, null, void 0, _m9);
+		__s.refFields = _rm$12;
+	} else {
+		{
+			const _r = (e) => {
+				anchor.current = e;
+				if (e) applyEscapeProps(e, props);
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		evt2u(_b.f, __event, props, setOpen);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:8e5eb6d9", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-contextmenu", props.className], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.k = bindSignalChild(__s, _b.k, 1, _b.a, props.children, "b:1b76a8a6", _b.g, true, void 0, void 0, void 0);
+	componentSlotVoid(__s, 2, _b.a, Popover, {
+		"anchor": anchor,
+		"open": open,
+		"placement": "bottom",
+		"onDismiss": () => setOpen(false),
+		"className": "vx-menu",
+		"children": markChildrenBlock(__children$2, __childrenBody)
+	}, _b.j, void 0, void 0, void 0, void 0, "c:09c4a2fd");
+});
+//#endregion
+export { ContextMenu };

package/dist/web/{ui45.js → Drawer.web.tsrx.js}

@@ -1,21 +1,25 @@
-import { __s, bag3, bag9, child, clone, drainFrag, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
+import { __s, bag4, bag9, child, clone, delegateEvents, drainFrag, ifBlock, queueRefAttach, queueRefDetach, setEventHandler, setStyle, sibling, template } from "octane";
 import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/Drawer.web.tsrx
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-drawer-backdrop\" aria-hidden=\"true\"></div><div class=\"vx-drawer-panel\"></div>", 0, 1);
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-drawer-backdrop\"></div><div class=\"vx-drawer-panel\"></div>", 0, 1);
 var _t$1 = /* @__PURE__ */ template("<div><div class=\"vx-drawer-main\"></div><!></div>");
 function __then$1(__props, __s, __extra) {
 	const __block = __s.block;
 	const props = __extra[0];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0;
+		let _m0, _m1;
 		const _root = clone(_t$0);
-		_m0 = sibling(child(_root), 1);
+		const _el0 = child(_root);
+		_m0 = _el0;
+		setEventHandler(_el0, "$$click", props.onDismiss);
+		_m1 = sibling(_el0, 1);
 		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag3(__s, null, _m0, null, void 0);
-	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.drawer, "b:7c4fb4de", null, void 0, void 0, void 0, true);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	} else setEventHandler(_b.a, "$$click", props.onDismiss);
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, props.drawer, "b:ad5f7669", null, void 0, void 0, void 0, true);
 }
 var _rm$4 = [
 	"r",
@@ -43,7 +47,7 @@ var Drawer = /* @__PURE__ */ __s(function Drawer(props, __s, __extra) {
 		const _r = (node) => applyWebProps(node, props.web);
 		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:8ba6f567", setPlainAttribute);
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:997e567d", setPlainAttribute);
 	_b.d = updateFreshClassName(["vx-drawer", props.className], _b.d, _b.b);
 	{
 		const _v = props.style;
@@ -52,7 +56,7 @@ var Drawer = /* @__PURE__ */ __s(function Drawer(props, __s, __extra) {
 			_b.e = _v;
 		}
 	}
-	_b.j = bindSignalChild(__s, _b.j, 1, _b.g, props.main, "b:8d49146e", null, void 0, void 0, void 0, true);
+	_b.j = bindSignalChild(__s, _b.j, 1, _b.g, props.main, "b:be9721d2", null, void 0, void 0, void 0, true);
 	{
 		const __ifCondition = props.open;
 		ifBlock(__s, 2, _b.b, __ifCondition, __then$1, null, _b.f, __ifCondition ? [props] : void 0);

package/dist/web/DropdownMenu.web.tsrx.js

@@ -0,0 +1,162 @@
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { bag2, bag3, bag4, bag6, child, clone, componentSlot, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, drainFrag, hookSlots, ifBlock, mapSlot, markChildrenBlock, positionalChildren, setAriaAttribute, setEventHandler, sibling, template, useEffect, useRef, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, setPlainAttribute, textHoleUpdate, updateFreshClassName } from "octane/internal/client";
+//#region src/DropdownMenu.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click", "keydown"]);
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<span class=\"vx-menu-item-label\"></span>");
+var _t$2 = /* @__PURE__ */ template("<div role=\"menuitem\"><!><!></div>");
+var _t$3 = /* @__PURE__ */ template("<div role=\"menu\" class=\"vx-menu-list\"><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+var __childrenBody = {};
+var _key$5 = (item) => item.key;
+function __then$7(__props, __s, __extra) {
+	const __block = __s.block;
+	const item = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, Icon, { "name": item.icon }, __block.endMarker, void 0, 2, void 0, void 0, "c:5e6489f9");
+}
+function __then$10(__props, __s, __extra) {
+	const item = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$1);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, item.label, "b:d3c10474", null, void 0, void 0, void 0, true);
+}
+function __item$6(item, __s, __extra) {
+	const select = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4, _m5;
+		const _root = clone(_t$2);
+		_m1 = _root;
+		setEventHandler(_root, "$$click", item.disabled ? void 0 : () => select(item));
+		setEventHandler(_root, "$$keydown", (e) => {
+			if (!item.disabled && (e.key === " " || e.key === "Enter")) {
+				e.preventDefault();
+				select(item);
+			}
+		});
+		const _el0 = child(_root);
+		_m4 = _el0;
+		_m5 = sibling(_el0, 1);
+		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5);
+	} else {
+		setEventHandler(_b.b, "$$click", item.disabled ? void 0 : () => select(item));
+		setEventHandler(_b.b, "$$keydown", (e) => {
+			if (!item.disabled && (e.key === " " || e.key === "Enter")) {
+				e.preventDefault();
+				select(item);
+			}
+		});
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-disabled", item.disabled || void 0, "b:071205b9", setAriaAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "tabindex", item.disabled ? void 0 : 0, "b:f88238cc", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0], _b.d, _b.b);
+	{
+		const __ifCondition = item.icon;
+		ifBlock(__s, 1, _b.b, __ifCondition, __then$7, null, _b.e, __ifCondition ? [item] : void 0);
+	}
+	{
+		const __ifCondition$ = item.label != null;
+		ifBlock(__s, 2, _b.b, __ifCondition$, __then$10, null, _b.f, __ifCondition$ ? [item] : void 0);
+	}
+}
+var __childrenBody$ = {};
+var DropdownMenu = function DropdownMenu(props, __s, __extra) {
+	const __block = __s.block;
+	const anchor = useRef(null, _hs$ + 0);
+	const [internal, setInternal] = useState(props.defaultOpen ?? false, _hs$ + 1);
+	const controlled = props.open !== void 0;
+	const open = controlled ? props.open : internal;
+	const setOpen = (next) => {
+		if (props.disabled && next) return;
+		if (!controlled) setInternal(next);
+		props.onOpenChange?.(next);
+	};
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [open], _hs$ + 2);
+	const select = (item) => {
+		if (item.disabled) return;
+		setOpen(false);
+		item.onSelect?.();
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		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 = props.trigger;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+			_b.d = _v;
+		}
+	}
+	function __children$4(__props, __s, __extra) {
+		let __mapItems;
+		let __mapMethod;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$3);
+			_m0 = _root;
+			_m1 = child(_root);
+			_b = bag2(__s, _root, _m0, _m1);
+		}
+		mapSlot(__s, 1, _b.a, (__mapItems = props.items, __mapMethod = __mapItems.map, __mapItems), __mapMethod, (item) => createScopedElement("div", {
+			key: item.key,
+			role: "menuitem",
+			"aria-disabled": item.disabled || void 0,
+			tabIndex: item.disabled ? void 0 : 0,
+			className: ["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0],
+			onClick: item.disabled ? void 0 : () => select(item),
+			onKeyDown: (e) => {
+				if (!item.disabled && (e.key === " " || e.key === "Enter")) {
+					e.preventDefault();
+					select(item);
+				}
+			}
+		}, () => positionalChildren([item.icon ? createScopedValue(() => createElementFromConfig("c:f5fcf024", Icon, { name: item.icon })) : null, item.label != null ? createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label) : null])), _key$5, __item$6, 26, [select], _b.b, 1);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+		"bind": (e) => {
+			anchor.current = e;
+		},
+		"id": props.id,
+		"className": ["vx-menu-trigger", props.className],
+		"style": props.style,
+		"disabled": props.disabled,
+		"onPress": () => setOpen(!open),
+		"accessibilityState": { disabled: props.disabled },
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fa171407");
+	componentSlotVoid(__s, 1, __block.parentNode, Popover, {
+		"anchor": anchor,
+		"open": open,
+		"placement": props.placement ?? "bottom",
+		"onDismiss": () => setOpen(false),
+		"className": "vx-menu",
+		"children": markChildrenBlock(__children$4, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:beadb637");
+};
+//#endregion
+export { DropdownMenu };

package/dist/web/Empty.web.tsrx.js

@@ -0,0 +1,89 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { __s, bag11, bag3, child, clone, componentSlot, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Empty.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<span class=\"vx-empty-title\"></span>");
+var _t$1 = /* @__PURE__ */ template("<span class=\"vx-empty-desc\"></span>");
+var _t$2 = /* @__PURE__ */ template("<div><!><!><!><!></div>");
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, Icon, {
+		"name": props.icon,
+		"className": "vx-empty-icon"
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:b0324667");
+}
+function __then$3(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.title, "b:74b0766e", null, void 0, void 0, void 0, true);
+}
+function __then$6(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$1);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.description, "b:8b24be6c", null, void 0, void 0, void 0, true);
+}
+var _rm$10 = [
+	"r",
+	"b",
+	"a"
+];
+var Empty = /* @__PURE__ */ __s(function Empty(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5, _m6, _m7, _m8;
+		const _root = clone(_t$2);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		const _el0 = child(_root);
+		_m5 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m6 = _el1;
+		const _el2 = sibling(_el1, 1);
+		_m7 = _el2;
+		_m8 = sibling(_el2, 1);
+		_b = bag11(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6, _m7, _m8, null, void 0);
+		__s.refFields = _rm$10;
+	} 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:3cdab370", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-empty", props.className], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	{
+		const __ifCondition = props.icon;
+		ifBlock(__s, 1, _b.a, __ifCondition, __then$0, null, _b.f, __ifCondition ? [props] : void 0);
+	}
+	{
+		const __ifCondition$ = props.title != null;
+		ifBlock(__s, 2, _b.a, __ifCondition$, __then$3, null, _b.g, __ifCondition$ ? [props] : void 0);
+	}
+	{
+		const __ifCondition$2 = props.description != null;
+		ifBlock(__s, 3, _b.a, __ifCondition$2, __then$6, null, _b.h, __ifCondition$2 ? [props] : void 0);
+	}
+	_b.l = bindSignalChild(__s, _b.l, 4, _b.a, props.children, "b:6dade3cd", _b.i, true, void 0, void 0, void 0);
+});
+//#endregion
+export { Empty };