@octane-xplat/ui 0.2.0 → 0.3.0

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "599f4013-2457-4fe9-8bfc-27a249e67126",
+  "buildId": "0f82ad97-944d-4397-a64d-c6ebca7ba253",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/ui.js

@@ -1,19 +1,40 @@
-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 { getStack, registerStack, stackEntries } from "./ui15.js";
-import { Tabs } from "./ui16.js";
-import { Switch } from "./ui17.js";
-import { PlatformBadge } from "./ui18.js";
-import { currentRoute, pushRoute, routeFor, useRoute } 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 { Spacer } from "./ui10.js";
+import { Text } from "./ui11.js";
+import { Pressable } from "./ui12.js";
+import { TextInput } from "./ui13.js";
+import { TextArea } from "./ui14.js";
+import { List } from "./ui15.js";
+import { ScrollView } from "./ui16.js";
+import { Image } from "./ui17.js";
+import { Modal } from "./ui18.js";
+import { openModal } from "./ui19.js";
+import { getColorScheme, useColorScheme } from "./ui20.js";
+import { Overlay } from "./ui21.js";
+import { Popover } from "./ui22.js";
+import { showToast } from "./ui23.js";
+import { useAnimation } from "./ui24.js";
+import { styled } from "./ui25.js";
+import { Screen } from "./ui26.js";
+import { getStack, registerStack, stackEntries } from "./ui27.js";
+import { Tabs } from "./ui28.js";
+import { Switch } from "./ui29.js";
+import { useSafeAreaInsets } from "./ui30.js";
+import { SafeArea } from "./ui31.js";
+import { KeyboardAvoiding } from "./ui32.js";
+import { Drawer } from "./ui33.js";
+import { ActivityIndicator } from "./ui35.js";
+import { Slider } from "./ui36.js";
+import { registerIcon, registerIcons } from "./ui37.js";
+import { Icon } from "./ui38.js";
+import { Heading } from "./ui39.js";
+import { PlatformBadge } from "./ui40.js";
+import { deriveRouteManifest } from "./ui41.js";
+import { currentRoute, hrefFor, popRoute, pushRoute, registerRoutes, registerScreens, routeFor, screenFor, useRoute } from "./ui42.js";
+import { createStore } from "./ui43.js";
+import { useStore } from "./ui44.js";
+export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Icon, Image, KeyboardAvoiding, List, Modal, Overlay, PlatformBadge, Popover, Pressable, Row, SafeArea, Screen, ScrollView, Slider, Spacer, Stack, Switch, Tabs, Text, TextArea, TextInput, View, createStore, currentRoute, deriveRouteManifest, getColorScheme, getStack, hrefFor, openModal, popRoute, pushRoute, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, screenFor, showToast, stackEntries, styled, useAnimation, useColorScheme, useRoute, useSafeAreaInsets, useStore };

package/dist/native/ui10.js

@@ -1,52 +1,23 @@
-import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
-import { ContentView, Frame } from "@nativescript/core";
-//#region src/Modal.native.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Spacer.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
+	"kind": "host",
+	"type": "stacklayout",
+	"props": { "flexGrow": 1 },
+	"bindings": [
+		["ref", 0],
+		["className", 1],
+		["style", 2]
+	]
 });
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": []
-});
-var Panel = defineUniversalComponent("nativescript", function Panel(props) {
-	return universalValue(__octaneUniversalPlan0, [props.children]);
-}, { "module": "@nativescript-community/octane" });
-var Modal = defineUniversalComponent("nativescript", function Modal(props) {
-	const shown = useRef(null, _h$0);
-	useEffect(() => {
-		if (props.open && !shown.current) {
-			const presenter = Frame.topmost()?.currentPage ?? Frame.topmost();
-			if (!presenter) return;
-			const host = new ContentView();
-			const root = createNativeScriptRoot(host);
-			shown.current = {
-				host,
-				root
-			};
-			root.render(Panel, { children: props.children });
-			presenter.showModal(host, {
-				context: {},
-				closeCallback: () => {
-					shown.current = null;
-					props.onClose?.();
-				},
-				fullscreen: props.fullscreen ?? true,
-				animated: true
-			});
-		} else if (!props.open && shown.current) {
-			const { host } = shown.current;
-			shown.current = null;
-			host.closeModal();
-		}
-	}, [props.open], _h$1);
-	return universalValue(__octaneUniversalPlan1, []);
+var Spacer = defineUniversalComponent("nativescript", function Spacer(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(view) => applyEscapeProps(view, props),
+		cx("vx-spacer", props.className),
+		props.style
+	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Modal };
+export { Spacer };

package/dist/native/ui11.js

@@ -1,58 +1,120 @@
-import { hookSlots, useRef } from "@nativescript-community/octane";
-import { cancelAnimationFrame, requestAnimationFrame } from "@nativescript/core/animation-frame";
-//#region src/anim.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function createAnimated(initial, prop) {
-	let view = null;
-	let current = initial;
-	let raf = 0;
-	const apply = (v) => {
-		current = v;
-		if (view) view[prop] = v;
+import { cx } from "./ui2.js";
+import { applyEscapeProps, nativeAccessibilityState } from "./ui3.js";
+import { layoutChildProps } from "./ui4.js";
+import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
+//#region src/Text.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "span",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var InText = createContext(false);
+var TextScope = defineUniversalComponent("nativescript", function TextScope(props) {
+	return InText({
+		value: true,
+		children: props.children
+	});
+}, { "module": "@nativescript-community/octane" });
+var Text = defineUniversalComponent("nativescript", function Text(props) {
+	const inText = useContext(InText);
+	const textStyle = {
+		...props.style,
+		...props.ellipsize ? {
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis"
+		} : {}
 	};
-	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(v) {
-			view = v;
-			if (view) view[prop] = current;
-		},
-		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);
-		}
-	};
-}
-function useAnimation(initial = 0, prop = "translateX") {
-	const c = useRef(null, _h$0);
-	if (!c.current) c.current = createAnimated(initial, prop);
-	return c.current;
-}
+	return universalValue(__octaneUniversalPlan2, [universalIf(inText, () => {
+		return universalValue(__octaneUniversalPlan0, [universalProps([
+			[
+				"set",
+				"ref",
+				(v) => applyEscapeProps(v, props)
+			],
+			[
+				"set",
+				"className",
+				cx(props.className)
+			],
+			[
+				"set",
+				"style",
+				textStyle
+			],
+			["spread", layoutChildProps(props)]
+		]), props.children]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan1, [universalProps([
+			[
+				"set",
+				"ref",
+				(v) => applyEscapeProps(v, props)
+			],
+			["spread", layoutChildProps(props)],
+			[
+				"set",
+				"className",
+				cx(props.className)
+			],
+			[
+				"set",
+				"style",
+				textStyle
+			],
+			[
+				"set",
+				"maxLines",
+				props.numberOfLines
+			],
+			[
+				"set",
+				"textOverflow",
+				props.ellipsize ? "ellipsis" : void 0
+			],
+			[
+				"set",
+				"whiteSpace",
+				props.ellipsize ? "nowrap" : void 0
+			],
+			[
+				"set",
+				"accessibilityHint",
+				props.accessibilityHint
+			],
+			[
+				"set",
+				"accessibilityValue",
+				props.accessibilityValue
+			],
+			[
+				"set",
+				"accessibilityState",
+				nativeAccessibilityState(props.accessibilityState)
+			],
+			[
+				"set",
+				"accessibilityLiveRegion",
+				props.accessibilityLiveRegion
+			]
+		]), universalComponent("nativescript", TextScope, universalProps([], props.children))]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { useAnimation };
+export { Text };

package/dist/native/ui12.js

@@ -1,17 +1,115 @@
-import { hookSlots, useSyncExternalStore } from "@nativescript-community/octane";
-import { Application } from "@nativescript/core";
-//#region src/theme/colorScheme.native.tsrx
-var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
-function getColorScheme() {
-	return Application.primaryWindow?.systemAppearance?.() ?? Application.systemAppearance?.() ?? "light";
-}
-function subscribe(cb) {
-	const h = () => cb();
-	Application.on("systemAppearanceChanged", h);
-	return () => Application.off("systemAppearanceChanged", h);
-}
-function useColorScheme() {
-	return useSyncExternalStore(subscribe, getColorScheme, _h$0);
-}
+import { cx } from "./ui2.js";
+import { applyEscapeProps, nativeAccessibilityState } from "./ui3.js";
+import { layoutChildProps } from "./ui4.js";
+import { defineUniversalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+//#region src/Pressable.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var Pressable = defineUniversalComponent("nativescript", function Pressable(props) {
+	return universalValue(__octaneUniversalPlan0, [universalProps([
+		[
+			"set",
+			"ref",
+			(v) => applyEscapeProps(v, props)
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		["spread", layoutChildProps(props)],
+		[
+			"set",
+			"flexDirection",
+			"column"
+		],
+		[
+			"set",
+			"className",
+			cx("vx-pressable", props.className)
+		],
+		[
+			"set",
+			"style",
+			{
+				...props.style,
+				...props.hitSlop ? {
+					margin: -props.hitSlop,
+					padding: props.hitSlop
+				} : {}
+			}
+		],
+		[
+			"set",
+			"accessible",
+			props.accessible
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			props.accessibilityLabel
+		],
+		[
+			"set",
+			"accessibilityRole",
+			props.accessibilityRole
+		],
+		[
+			"set",
+			"accessibilityHint",
+			props.accessibilityHint
+		],
+		[
+			"set",
+			"accessibilityValue",
+			props.accessibilityValue
+		],
+		[
+			"set",
+			"accessibilityState",
+			nativeAccessibilityState(props.accessibilityState)
+		],
+		[
+			"set",
+			"accessibilityLiveRegion",
+			props.accessibilityLiveRegion
+		],
+		[
+			"set",
+			"ignoreTouchAnimation",
+			props.ignoreTouchAnimation
+		],
+		[
+			"set",
+			"onTap",
+			props.disabled ? void 0 : props.onPress
+		],
+		[
+			"set",
+			"onLongPress",
+			props.disabled ? void 0 : props.onLongPress
+		],
+		[
+			"set",
+			"onDoubleTap",
+			props.disabled ? void 0 : props.onDoublePress
+		],
+		[
+			"set",
+			"onTouch",
+			props.disabled ? void 0 : (e) => {
+				if (e.action === "down") props.onPressIn?.();
+				else if (e.action === "up" || e.action === "cancel") props.onPressOut?.();
+			}
+		]
+	]), props.children]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { getColorScheme, useColorScheme };
+export { Pressable };

package/dist/native/ui13.js

@@ -1,19 +1,55 @@
-import "@nativescript-community/octane";
-import { defineUniversalComponent as defineUniversalComponent$1, universalComponent as universalComponent$1 } from "octane/universal";
-//#region src/styled.native.tsrx
-function styled(Base, def) {
-	function Styled(props) {
-		const cls = [def.base];
-		const rest = { ...props };
-		for (const k of Object.keys(def.variants ?? {})) {
-			if (props[k]) cls.push(def.variants[k]);
-			delete rest[k];
-		}
-		if (props.className) cls.push(props.className);
-		rest.className = cls;
-		return universalComponent$1("nativescript", Base, rest);
-	}
-	return defineUniversalComponent$1("nativescript", Styled);
-}
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/TextInput.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "textfield",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["text", 4],
+		["hint", 5],
+		["secure", 6],
+		["keyboardType", 7],
+		["returnKeyType", 8],
+		["editable", 9],
+		["onTextChange", 10],
+		["onReturnPress", 11],
+		["onFocus", 12],
+		["onBlur", 13]
+	]
+});
+var TextInput = defineUniversalComponent("nativescript", function TextInput(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => {
+			if (!v) return;
+			applyEscapeProps(v, props);
+			props.bind?.({
+				focus: () => v.focus(),
+				blur: () => v.dismissSoftInput?.() ?? v.blur(),
+				native: v
+			});
+		},
+		props.id,
+		cx(props.className),
+		{
+			...props.style,
+			...props.placeholderTextColor ? { placeholderColor: props.placeholderTextColor } : {}
+		},
+		props.value,
+		props.placeholder ?? props.hint,
+		props.secure,
+		props.keyboardType === "default" ? void 0 : props.keyboardType,
+		props.returnKeyType,
+		props.editable,
+		(e) => props.onChange?.(e.value),
+		props.onSubmit,
+		props.onFocus,
+		props.onBlur
+	]);
+}, { "module": "@nativescript-community/octane" });
 //#endregion
-export { styled };
+export { TextInput };

package/dist/native/ui14.js

@@ -1,20 +1,83 @@
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
-//#region src/Screen.native.tsrx
+import { cx } from "./ui2.js";
+import { applyEscapeProps } from "./ui3.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
+import { Utils } from "@nativescript/core";
+//#region src/TextArea.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "rootlayout",
-	"bindings": [["className", 0], ["style", 1]],
-	"children": [{
-		"kind": "slot",
-		"slot": 2
-	}]
+	"type": "textview",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3],
+		["text", 4],
+		["hint", 5],
+		["keyboardType", 6],
+		["returnKeyType", 7],
+		["editable", 8],
+		["onLoaded", 9],
+		["onTextChange", 10],
+		["onReturnPress", 11],
+		["onFocus", 12],
+		["onBlur", 13]
+	]
 });
-var Screen = defineUniversalComponent("nativescript", function Screen(props) {
+var TextArea = defineUniversalComponent("nativescript", function TextArea(props) {
+	const el = useRef(null, _h$0);
+	const lineDip = (v) => {
+		const ios = v?.ios?.font?.lineHeight;
+		if (ios > 0) return ios;
+		const px = v?.android?.getLineHeight?.();
+		if (px > 0) return Utils.layout.toDeviceIndependentPixels(px);
+		return 24;
+	};
+	const fit = (v) => {
+		if (!v) return;
+		if (props.style?.height != null) return;
+		const line = lineDip(v);
+		const rows = props.rows ?? (props.autoGrow ? 1 : 3);
+		v.style.minHeight = rows * line;
+		if (props.maxRows) v.style.maxHeight = props.maxRows * line;
+		else if (!props.autoGrow) v.style.maxHeight = rows * line;
+	};
+	useEffect(() => fit(el.current), [
+		props.rows,
+		props.autoGrow,
+		props.maxRows,
+		props.style
+	], _h$1);
 	return universalValue(__octaneUniversalPlan0, [
-		props.className,
-		props.style,
-		props.children
+		props.id,
+		(v) => {
+			el.current = v;
+			if (!v) return;
+			applyEscapeProps(v, props);
+			props.bind?.({
+				focus: () => v.focus(),
+				blur: () => v.dismissSoftInput?.() ?? v.blur(),
+				native: v
+			});
+		},
+		cx(props.className),
+		{
+			...props.style,
+			...props.placeholderTextColor ? { placeholderColor: props.placeholderTextColor } : {}
+		},
+		props.value,
+		props.placeholder ?? props.hint,
+		props.keyboardType === "default" ? void 0 : props.keyboardType,
+		props.returnKeyType,
+		props.editable,
+		(e) => fit(e.object),
+		(e) => props.onChange?.(e.value),
+		props.onSubmit,
+		props.onFocus,
+		props.onBlur
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
-export { Screen };
+export { TextArea };