@octane-xplat/ui 0.2.1 → 0.4.0

package/dist/native/ui7.js

@@ -1,73 +1,52 @@
-import { defineUniversalComponent, memo, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
-//#region src/List.native.tsrx
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { glassClassOf, glassConfigOf } from "./ui4.js";
+import { layoutChildProps } from "./ui5.js";
+import { defineUniversalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/Row.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "listview",
-	"bindings": [
-		["id", 0],
-		["className", 1],
-		["style", 2],
-		["items", 3],
-		["renderItem", 4]
-	]
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "slot",
-	"slot": 0
-});
-var __octaneUniversalPlan2 = universalPlan("nativescript", {
-	"kind": "range",
+	"type": "flexboxlayout",
+	"propsSlot": 0,
 	"children": [{
 		"kind": "slot",
-		"slot": 0
+		"slot": 1
 	}]
 });
-var __octaneUniversalPlan3 = universalPlan("nativescript", {
-	"kind": "slot",
-	"slot": 0
-});
-var ListInner = defineUniversalComponent("nativescript", function ListInner(props) {
-	return universalValue(__octaneUniversalPlan0, [
-		props.id,
-		props.className,
-		props.style,
-		props.items,
-		props.renderItem
-	]);
-}, { "module": "@nativescript-community/octane" });
-var MemoListView = memo(ListInner, (a, b) => a.items === b.items);
-var List = defineUniversalComponent("nativescript", function List(props) {
-	return universalValue(__octaneUniversalPlan3, [universalIf(props.items.length > 0, () => {
-		return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", MemoListView, universalProps([
-			[
-				"set",
-				"id",
-				props.id
-			],
-			[
-				"set",
-				"items",
-				props.items
-			],
-			[
-				"set",
-				"className",
-				props.className
-			],
-			[
-				"set",
-				"style",
-				props.style
-			],
-			[
-				"set",
-				"renderItem",
-				props.renderItem
-			]
-		]))]);
-	}, () => {
-		return universalValue(__octaneUniversalPlan2, [props.renderEmpty?.()]);
-	})]);
+var Row = defineUniversalComponent("nativescript", function Row(props) {
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"ref",
+			(v) => applyEscapeProps(v, props)
+		],
+		[
+			"set",
+			"flexDirection",
+			"row"
+		],
+		[
+			"set",
+			"iosGlassEffect",
+			glassConfigOf(props.glass)
+		],
+		[
+			"set",
+			"className",
+			cx(glassClassOf(props.glass), props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		["spread", layoutChildProps(props)]
+	]), props.children]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { List };
+export { Row };

package/dist/native/ui8.js

@@ -1,33 +1,41 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { glassClassOf, glassConfigOf } from "./ui4.js";
 import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/ScrollView.native.tsrx
+//#region src/Grid.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "scrollview",
+	"type": "gridlayout",
 	"bindings": [
 		["id", 0],
-		["className", 1],
-		["style", 2],
-		["orientation", 3]
+		["ref", 1],
+		["rows", 2],
+		["columns", 3],
+		["className", 4],
+		["style", 5],
+		["iosGlassEffect", 6]
 	],
 	"children": [{
-		"kind": "host",
-		"type": "flexboxlayout",
-		"bindings": [["flexDirection", 4]],
-		"children": [{
-			"kind": "slot",
-			"slot": 5
-		}]
+		"kind": "slot",
+		"slot": 7
 	}]
 });
-var ScrollView = defineUniversalComponent("nativescript", function ScrollView(props) {
+var warnedAboutGap = false;
+var Grid = defineUniversalComponent("nativescript", function Grid(props) {
+	if (props.gap != null && !warnedAboutGap) {
+		warnedAboutGap = true;
+		console.warn("[Grid] gap is not supported; use child margins instead.");
+	}
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,
-		props.className,
+		(view) => applyEscapeProps(view, props),
+		props.rows,
+		props.columns,
+		cx("vx-grid", glassClassOf(props.glass), props.className),
 		props.style,
-		props.horizontal ? "horizontal" : "vertical",
-		props.horizontal ? "row" : "column",
+		glassConfigOf(props.glass),
 		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { ScrollView };
+export { Grid };

package/dist/native/ui9.js

@@ -1,24 +1,36 @@
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { glassClassOf, glassConfigOf } from "./ui4.js";
 import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Image.native.tsrx
+//#region src/Stack.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "image",
+	"type": "gridlayout",
+	"props": {
+		"rows": "*",
+		"columns": "*"
+	},
 	"bindings": [
 		["id", 0],
-		["className", 1],
-		["style", 2],
-		["src", 3],
-		["accessibilityLabel", 4]
-	]
+		["ref", 1],
+		["iosGlassEffect", 2],
+		["className", 3],
+		["style", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
 });
-var Image = defineUniversalComponent("nativescript", function Image(props) {
+var Stack = defineUniversalComponent("nativescript", function Stack(props) {
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,
-		props.className,
+		(view) => applyEscapeProps(view, props),
+		glassConfigOf(props.glass),
+		cx("vx-stack", glassClassOf(props.glass), props.className),
 		props.style,
-		props.src,
-		props.alt
+		props.children
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Image };
+export { Stack };

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "cf079eb9-42ee-4226-83ff-a7f9254bf392",
+  "buildId": "09d40cb6-77c8-4f47-9fd0-53989e8bea06",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/ui.js

@@ -1,19 +1,51 @@
-import { View } from "./ui2.js";
-import { Row } from "./ui3.js";
-import { Text } from "./ui4.js";
-import { Pressable } from "./ui5.js";
-import { TextInput } from "./ui6.js";
-import { List } from "./ui7.js";
-import { ScrollView } from "./ui8.js";
-import { Image } from "./ui9.js";
-import { Modal } from "./ui10.js";
-import { useAnimation } from "./ui11.js";
-import { getColorScheme, useColorScheme } from "./ui12.js";
-import { styled } from "./ui13.js";
-import { Screen } from "./ui14.js";
-import { currentRoute, pushRoute, routeFor, useRoute } from "./ui15.js";
-import { Tabs } from "./ui16.js";
-import { Switch } from "./ui17.js";
-import { PlatformBadge } from "./ui18.js";
-import { getStack, registerStack, stackEntries } from "./ui19.js";
-export { View as Column, Image, List, Modal, PlatformBadge, Pressable, Row, Screen, ScrollView, Switch, Tabs, Text, TextInput, View, currentRoute, getColorScheme, getStack, pushRoute, registerStack, routeFor, stackEntries, styled, useAnimation, useColorScheme, useRoute };
+import { View } from "./ui5.js";
+import { Row } from "./ui6.js";
+import { Grid } from "./ui7.js";
+import { Stack } from "./ui8.js";
+import { Absolute } from "./ui9.js";
+import { LiquidGlass } from "./ui10.js";
+import { LiquidGlassContainer } from "./ui11.js";
+import { Spacer } from "./ui12.js";
+import { Text } from "./ui13.js";
+import { RichText, RichTextSpan } from "./ui14.js";
+import { Pressable } from "./ui15.js";
+import { Link } from "./ui16.js";
+import { deriveRouteManifest } from "./ui17.js";
+import { canGoBack, currentModalRoute, currentRoute, hrefFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./ui18.js";
+import { NavLink } from "./ui19.js";
+import { TextInput } from "./ui20.js";
+import { TextArea } from "./ui21.js";
+import { List } from "./ui22.js";
+import { ScrollView } from "./ui23.js";
+import { ScrollBox } from "./ui24.js";
+import { Image } from "./ui25.js";
+import { Modal } from "./ui26.js";
+import { getColorScheme, useColorScheme } from "./ui27.js";
+import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./ui29.js";
+import { openModal } from "./ui30.js";
+import { Overlay } from "./ui31.js";
+import { Popover } from "./ui33.js";
+import { showToast } from "./ui34.js";
+import { useAnimation } from "./ui35.js";
+import { styled } from "./ui36.js";
+import { openWindow } from "./ui37.js";
+import { Screen } from "./ui38.js";
+import { Tabs } from "./ui39.js";
+import { Switch } from "./ui40.js";
+import { useSafeAreaInsets } from "./ui41.js";
+import { SafeArea } from "./ui42.js";
+import { KeyboardAvoiding } from "./ui43.js";
+import { Drawer } from "./ui44.js";
+import { ActivityIndicator } from "./ui46.js";
+import { Meter } from "./ui48.js";
+import { Slider } from "./ui49.js";
+import { registerIcon, registerIcons } from "./ui50.js";
+import { Icon } from "./ui51.js";
+import { Heading } from "./ui52.js";
+import { PlatformBadge } from "./ui53.js";
+import { getStack, registerStack, stackEntries } from "./ui54.js";
+import { createStore } from "./ui55.js";
+import { useStore } from "./ui56.js";
+import { Sheet } from "./ui57.js";
+import { closeSheet, openSheet } from "./ui58.js";
+export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Icon, Image, KeyboardAvoiding, Link, LiquidGlass, LiquidGlassContainer, List, Meter, Modal, NavLink, Overlay, PlatformBadge, Popover, Pressable, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, Sheet, Slider, Spacer, Stack, Switch, Tabs, Text, TextArea, TextInput, View, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, onThemeSchemeChange, openModal, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useCanGoBack, useColorScheme, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/dist/web/ui10.js

@@ -1,43 +1,46 @@
-import { __s, bag4, clone, delegateEvents, hookSlots, queueRefAttach, queueRefDetach, setEventHandler, template, useEffect, useRef } from "octane";
-import { childTextHoleUpdate, replaceRef } from "octane/internal/client";
-//#region src/Modal.web.tsrx
-delegateEvents(["close"]);
-var _t$0 = /* @__PURE__ */ template("<dialog class=\"vx-modal\"></dialog>");
-var _hs$ = /* @__PURE__ */ hookSlots(2);
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/LiquidGlass.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
 var _rm$1 = [
 	"r",
-	"b",
-	"a"
+	"e",
+	"b"
 ];
-var Modal = /* @__PURE__ */ __s(function Modal(props, __s, __extra) {
-	const el = useRef(null, _hs$ + 0);
-	useEffect(() => {
-		const d = el.current;
-		if (!d) return;
-		if (props.open && !d.open) d.showModal();
-		else if (!props.open && d.open) d.close();
-	}, [props.open], _hs$ + 1);
+var LiquidGlass = /* @__PURE__ */ __s(function LiquidGlass(props, __s, __extra) {
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1;
+		let _m1, _m4;
 		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = el, _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		setEventHandler(_root, "$$close", props.onClose);
-		_b = bag4(__s, _root, _m0, _m1, null, void 0);
+		_m1 = _root;
+		queueRefAttach(__s, _m4 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.e, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, void 0, void 0, _m4, null, void 0);
 		__s.refFields = _rm$1;
 	} else {
-		{
-			const _r = el;
-			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
-		}
-		setEventHandler(_b.a, "$$close", props.onClose);
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.e) _b.e = replaceRef(__s, _b.e, _r, _b.b);
 	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:3b4a2648", setPlainAttribute);
+	_b.c = updateFreshClassName([
+		"vx-stack",
+		glassClassOf({ variant: props.variant ?? "regular" }),
+		props.className
+	], _b.c, _b.b);
 	{
-		const _v = props.children;
-		_b.c = childTextHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d);
-		_b.d = _v;
+		const _v = {
+			...glassStyleOf({ tint: props.tint }),
+			...props.style
+		};
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
 	}
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:9211318a", null, void 0, void 0, void 0, true);
 });
 //#endregion
-export { Modal };
+export { LiquidGlass };

package/dist/web/ui11.js

@@ -1,57 +1,42 @@
-import { hookSlots, useRef } from "octane";
-//#region src/anim.web.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function createAnimated(initial, prop) {
-	let el = null;
-	let current = initial;
-	let raf = 0;
-	const apply = (v) => {
-		current = v;
-		if (el) el.style.transform = `translateX(${v}px)`;
-	};
-	const run = (step) => {
-		cancelAnimationFrame(raf);
-		const start = Date.now();
-		const tick = () => {
-			const v = step(Date.now() - start);
-			if (v === null) return;
-			apply(v);
-			raf = requestAnimationFrame(tick);
-		};
-		raf = requestAnimationFrame(tick);
-	};
-	return {
-		get value() {
-			return current;
-		},
-		bind(e) {
-			el = e;
-			if (el) el.style.transform = `translateX(${current}px)`;
-		},
-		to(target, opts) {
-			const dur = opts?.duration ?? 300;
-			const from = current;
-			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
-		},
-		spring(target, opts) {
-			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
-			let v = 0, x = current;
-			run(() => {
-				const dt = 1 / 60;
-				v += (-stiffness * (x - target) - damping * v) * dt;
-				x += v * dt;
-				return Math.abs(v) < .5 && Math.abs(x - target) < .5 ? (apply(target), null) : x;
-			});
-		},
-		stop() {
-			cancelAnimationFrame(raf);
+import { applyEscapeProps } from "./ui2.js";
+import { __s, bag7, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/LiquidGlassContainer.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"r",
+	"e",
+	"b"
+];
+var LiquidGlassContainer = /* @__PURE__ */ __s(function LiquidGlassContainer(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		queueRefAttach(__s, _m4 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.e, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, void 0, void 0, _m4, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.e) _b.e = replaceRef(__s, _b.e, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:46ee8524", setPlainAttribute);
+	_b.c = updateFreshClassName([
+		"vx-absolute",
+		"vx-glass-container",
+		props.className
+	], _b.c, _b.b);
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
 		}
-	};
-}
-function useAnimation(initial = 0, prop = "translateX") {
-	const c = useRef(null, _h$0);
-	if (!c.current) c.current = createAnimated(initial, prop);
-	return c.current;
-}
+	}
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:295618e2", null, void 0, void 0, void 0, true);
+});
 //#endregion
-export { useAnimation };
+export { LiquidGlassContainer };

package/dist/web/ui12.js

@@ -1,16 +1,37 @@
-import { hookSlots, useSyncExternalStore } from "octane";
-//#region src/theme/colorScheme.web.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function getColorScheme() {
-	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function subscribe(cb) {
-	const mq = matchMedia("(prefers-color-scheme: dark)");
-	mq.addEventListener("change", cb);
-	return () => mq.removeEventListener("change", cb);
-}
-function useColorScheme() {
-	return useSyncExternalStore(subscribe, getColorScheme, _h$0);
-}
+import { applyEscapeProps } from "./ui2.js";
+import { __s, bag5, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Spacer.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$0 = [
+	"r",
+	"e",
+	"b"
+];
+var Spacer = /* @__PURE__ */ __s(function Spacer(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		queueRefAttach(__s, _m4 = (el) => applyEscapeProps(el, props), _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.e, _b.b));
+		_b = bag5(__s, _root, void 0, _m1, void 0, void 0, _m4);
+		__s.refFields = _rm$0;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.e) _b.e = replaceRef(__s, _b.e, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:91b4d3c0", setPlainAttribute);
+	_b.c = updateFreshClassName(["vx-spacer", props.className], _b.c, _b.b);
+	{
+		const _v = props.style;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+});
 //#endregion
-export { getColorScheme, useColorScheme };
+export { Spacer };