@octane-xplat/ui 0.4.0 → 0.5.0

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "945217e4-b47f-4701-903e-c65b8de4bec5",
+  "buildId": "d5edf471-fc0d-486d-9d3d-c0ab3ededea6",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/native/ui.js

@@ -27,26 +27,29 @@ import { openModal } from "./ui33.js";
 import { findInRootLayouts, rootLayoutFor, topRootLayout } from "./ui34.js";
 import { Overlay } from "./ui35.js";
 import { Popover } from "./ui38.js";
-import { showToast } from "./ui39.js";
-import { useAnimation } from "./ui40.js";
-import { styled } from "./ui41.js";
-import { openWindow } from "./ui42.js";
-import { Screen } from "./ui43.js";
-import { Tabs } from "./ui44.js";
-import { Switch } from "./ui45.js";
-import { useSafeAreaInsets } from "./ui46.js";
-import { SafeArea } from "./ui47.js";
-import { KeyboardAvoiding } from "./ui48.js";
-import { Drawer } from "./ui49.js";
-import { ActivityIndicator } from "./ui50.js";
-import { Meter } from "./ui52.js";
-import { Slider } from "./ui53.js";
-import { registerIcon, registerIcons } from "./ui54.js";
-import { Icon } from "./ui55.js";
-import { Heading } from "./ui56.js";
-import { PlatformBadge } from "./ui57.js";
-import { createStore } from "./ui58.js";
-import { useStore } from "./ui59.js";
-import { Sheet } from "./ui60.js";
-import { closeSheet, openSheet, sheetHost } from "./ui61.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, findInRootLayouts, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, layoutsForRoute, onThemeSchemeChange, openModal, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, rootLayoutFor, routeFor, routeStacks, screenFor, setThemePreference, sheetHost, showToast, stackEntries, styled, themeSchemeClasses, topRootLayout, useAnimation, useCanGoBack, useColorScheme, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };
+import { Hoverable } from "./ui39.js";
+import { showToast } from "./ui40.js";
+import { useAnimation } from "./ui41.js";
+import "./ui42.js";
+import { styled } from "./ui43.js";
+import { openWindow } from "./ui44.js";
+import { Screen } from "./ui45.js";
+import { Tabs } from "./ui46.js";
+import { Switch } from "./ui47.js";
+import { useSafeAreaInsets } from "./ui48.js";
+import { SafeArea } from "./ui49.js";
+import { KeyboardAvoiding } from "./ui50.js";
+import { Drawer } from "./ui51.js";
+import { useMeasure } from "./ui52.js";
+import { ActivityIndicator } from "./ui53.js";
+import { Meter } from "./ui55.js";
+import { Slider } from "./ui56.js";
+import { registerIcon, registerIcons } from "./ui57.js";
+import { Icon } from "./ui58.js";
+import { Heading } from "./ui59.js";
+import { PlatformBadge } from "./ui60.js";
+import { createStore } from "./ui61.js";
+import { useStore } from "./ui62.js";
+import { Sheet } from "./ui63.js";
+import { closeSheet, openSheet, sheetHost } from "./ui64.js";
+export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Hoverable, 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, findInRootLayouts, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, layoutsForRoute, onThemeSchemeChange, openModal, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, rootLayoutFor, routeFor, routeStacks, screenFor, setThemePreference, sheetHost, showToast, stackEntries, styled, themeSchemeClasses, topRootLayout, useAnimation, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/dist/native/ui14.js

@@ -1,5 +1,5 @@
 import { cx } from "./ui2.js";
-import { applyEscapeProps, nativeAccessibilityState } from "./ui3.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./ui3.js";
 import { layoutChildProps } from "./ui5.js";
 import { createContext, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue, useContext } from "@nativescript-community/octane";
 //#region src/Text.native.tsrx
@@ -98,6 +98,21 @@ var Text = defineUniversalComponent("nativescript", function Text(props) {
 				"textOverflow",
 				props.ellipsize ? "ellipsis" : void 0
 			],
+			[
+				"set",
+				"accessible",
+				props.accessible
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				props.accessibilityLabel
+			],
+			[
+				"set",
+				"accessibilityRole",
+				nativeAccessibilityRole(props.accessibilityRole)
+			],
 			[
 				"set",
 				"accessibilityHint",

package/dist/native/ui16.js

@@ -1,5 +1,5 @@
 import { cx } from "./ui2.js";
-import { applyEscapeProps, nativeAccessibilityState } from "./ui3.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./ui3.js";
 import { glassClassOf, glassConfigOf } from "./ui4.js";
 import { layoutChildProps } from "./ui5.js";
 import { defineUniversalComponent, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
@@ -60,7 +60,7 @@ var Pressable = defineUniversalComponent("nativescript", function Pressable(prop
 		[
 			"set",
 			"accessibilityRole",
-			props.accessibilityRole
+			nativeAccessibilityRole(props.accessibilityRole)
 		],
 		[
 			"set",

package/dist/native/ui24.js

@@ -28,6 +28,7 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 });
 var TextArea = defineUniversalComponent("nativescript", function TextArea(props) {
 	const el = useRef(null, _h$0);
+	const submitOnReturn = props.returnKeyType === "done" || props.returnKeyType === "send";
 	const lineDip = (v) => {
 		const ios = v?.ios?.font?.lineHeight;
 		if (ios > 0) return ios;
@@ -74,7 +75,7 @@ var TextArea = defineUniversalComponent("nativescript", function TextArea(props)
 		props.editable ?? true,
 		(e) => fit(e.object),
 		(e) => props.onChange?.(e.value),
-		props.onSubmit,
+		submitOnReturn ? props.onSubmit : void 0,
 		props.onFocus,
 		props.onBlur
 	]);

package/dist/native/ui3.js

@@ -6,6 +6,27 @@ function applyEscapeProps(view, props) {
 	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
 	if (bag) Object.assign(view, bag);
 }
+var NATIVE_ACCESSIBILITY_ROLES = {
+	button: "button",
+	link: "link",
+	search: "search",
+	image: "image",
+	heading: "header",
+	adjustable: "adjustable",
+	summary: "summary",
+	text: "text",
+	none: "none",
+	progressbar: "progressBar",
+	checkbox: "checkbox",
+	switch: "switch",
+	radio: "radioButton",
+	spinbutton: "spinButton",
+	tab: "button"
+};
+/** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
+function nativeAccessibilityRole(role) {
+	return role ? NATIVE_ACCESSIBILITY_ROLES[role] : void 0;
+}
 /** NativeScript's AccessibilityState is a single enum value, unlike the
 *  web's independent ARIA booleans. Priority follows the strongest state. */
 function nativeAccessibilityState(state) {
@@ -15,4 +36,4 @@ function nativeAccessibilityState(state) {
 	if (state?.checked === false) return "unchecked";
 }
 //#endregion
-export { applyEscapeProps, nativeAccessibilityState };
+export { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState };

package/dist/native/ui39.js

@@ -1,105 +1,103 @@
-import { applyThemeClasses } from "./ui31.js";
-import { topRootLayout } from "./ui34.js";
-import { createNativeScriptRoot, defineUniversalComponent, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
-import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
-//#region src/toast.native.tsrx
+import { View } from "./ui6.js";
+import { Pressable } from "./ui16.js";
+import { Popover } from "./ui38.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalPlan, universalProps, universalValue, useRef, useState } from "@nativescript-community/octane";
+//#region src/Hoverable.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": "label",
-	"props": { "className": "vx-toast" },
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
+	"kind": "slot",
+	"slot": 0
 });
 var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "gridlayout",
-	"props": { "className": "vx-toast" },
+	"kind": "range",
 	"children": [{
 		"kind": "slot",
 		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
 	}]
 });
 var __octaneUniversalPlan2 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
 });
-var queue = [];
-var active = null;
-var ToastBody = defineUniversalComponent("nativescript", function ToastBody(props) {
-	return universalValue(__octaneUniversalPlan2, [universalIf(typeof props.content === "string", () => {
-		return universalValue(__octaneUniversalPlan0, [props.content]);
-	}, () => {
-		const Component = props.content;
-		return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Component, universalProps([]))]);
-	})]);
+var Hoverable = defineUniversalComponent("nativescript", function Hoverable(props) {
+	const [open, setOpen] = useState(false, _h$0);
+	const anchor = useRef(null, _h$1);
+	return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", View, universalProps([
+		[
+			"set",
+			"className",
+			props.className
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"bind",
+			(view) => {
+				anchor.current = view;
+			}
+		],
+		[
+			"set",
+			"ios",
+			props.ios
+		],
+		[
+			"set",
+			"android",
+			props.android
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Pressable, universalProps([[
+			"set",
+			"onLongPress",
+			() => setOpen(true)
+		]], props.children)), universalComponent("nativescript", Popover, universalProps([
+			[
+				"set",
+				"open",
+				open
+			],
+			[
+				"set",
+				"anchor",
+				anchor
+			],
+			[
+				"set",
+				"placement",
+				props.placement ?? "bottom"
+			],
+			[
+				"set",
+				"dismissOnOutsideTap",
+				true
+			],
+			[
+				"set",
+				"onDismiss",
+				() => setOpen(false)
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", View, universalProps([[
+				"set",
+				"className",
+				props.cardClassName
+			], [
+				"set",
+				"style",
+				props.cardStyle
+			]], props.card))]);
+		})))]);
+	})))]);
 }, { "module": "@nativescript-community/octane" });
-function finishToast(entry) {
-	if (active !== entry) return;
-	if (entry.timer !== null) clearTimeout(entry.timer);
-	entry.timer = null;
-	const rootLayout = topRootLayout();
-	const finish = () => {
-		entry.unbindTheme?.();
-		entry.root.unmount?.();
-		if (active === entry) active = null;
-		showNext();
-	};
-	if (rootLayout && rootLayout?.hasChild?.(entry.host)) rootLayout.close(entry.host).then(finish, (error) => {
-		console.error("[Toast] close failed", error);
-		finish();
-	});
-	else finish();
-}
-function showNext() {
-	if (active || queue.length === 0) return;
-	const entry = queue.shift();
-	const rootLayout = topRootLayout();
-	if (!rootLayout) {
-		console.warn("[Toast] RootLayout is not mounted; toast was skipped");
-		return;
-	}
-	const host = new GridLayout();
-	const unbindTheme = applyThemeClasses(host, "vx-toast-host");
-	host.horizontalAlignment = "stretch";
-	host.verticalAlignment = entry.options.position === "top" ? "top" : "bottom";
-	host.marginTop = entry.options.position === "top" ? 24 : 0;
-	host.marginBottom = entry.options.position === "top" ? 0 : 24;
-	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : void 0);
-	const root = createNativeScriptRoot(host);
-	const current = {
-		...entry,
-		host,
-		root,
-		timer: null,
-		unbindTheme
-	};
-	active = current;
-	root.render(ToastBody, { content: entry.content });
-	const open = () => {
-		rootLayout.open(host).then(() => {
-			if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3e3));
-		}, (error) => {
-			console.error("[Toast] open failed", error);
-			root.unmount?.();
-			if (active === current) active = null;
-			showNext();
-		});
-	};
-	if (rootLayout.hasChild?.(host)) rootLayout.close(host).then(open, (error) => {
-		console.error("[Toast] stale host close failed", error);
-		if (active === current) active = null;
-		showNext();
-	});
-	else open();
-}
-function showToast(content, options = {}) {
-	queue.push({
-		content,
-		options
-	});
-	showNext();
-}
 //#endregion
-export { showToast };
+export { Hoverable };

package/dist/native/ui40.js

@@ -1,58 +1,185 @@
-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;
-	};
-	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);
+import { applyThemeClasses } from "./ui31.js";
+import { topRootLayout } from "./ui34.js";
+import { Popover } from "./ui38.js";
+import { createNativeScriptRoot, defineUniversalComponent, universalChildren, universalComponent, universalIf, universalPlan, universalProps, universalValue } from "@nativescript-community/octane";
+import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
+//#region src/toast-anchor.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": { "className": "vx-toast" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan7 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var queue = [];
+var active = null;
+function placementFor(position = "bottom") {
+	return position.startsWith("top") ? "top" : "bottom";
+}
+function horizontalFor(position = "bottom") {
+	if (position.endsWith("-start")) return "left";
+	if (position.endsWith("-end")) return "right";
+	return "center";
+}
+var ToastBody = defineUniversalComponent("nativescript", function ToastBody(props) {
+	return universalValue(__octaneUniversalPlan7, [universalIf(props.options.anchor, () => {
+		return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Popover, universalProps([
+			[
+				"set",
+				"open",
+				props.open
+			],
+			[
+				"set",
+				"anchor",
+				props.options.anchor
+			],
+			[
+				"set",
+				"placement",
+				props.options.placement ?? placementFor(props.options.position)
+			],
+			[
+				"set",
+				"dismissOnOutsideTap",
+				false
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan2, [universalIf(typeof props.content === "string", () => {
+				return universalValue(__octaneUniversalPlan0, [props.content]);
+			}, () => {
+				const Component = props.content;
+				return universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Component, universalProps([]))]);
+			})]);
+		})))]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan6, [universalIf(typeof props.content === "string", () => {
+			return universalValue(__octaneUniversalPlan4, [props.content]);
+		}, () => {
+			const Component = props.content;
+			return universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", Component, universalProps([]))]);
+		})]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+function finishToast(entry) {
+	if (active !== entry) return;
+	if (entry.timer !== null) clearTimeout(entry.timer);
+	entry.timer = null;
+	const cleanup = () => {
+		entry.unbindTheme?.();
+		entry.root.unmount?.();
+		if (active === entry) active = null;
+		showNext();
 	};
-	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);
-		}
+	if (entry.options.anchor) {
+		entry.root.render(ToastBody, {
+			...entry,
+			open: false
+		});
+		setTimeout(cleanup, 0);
+		return;
+	}
+	const rootLayout = topRootLayout();
+	if (rootLayout && rootLayout.hasChild?.(entry.host)) rootLayout.close(entry.host).then(cleanup, (error) => {
+		console.error("[Toast] close failed", error);
+		cleanup();
+	});
+	else cleanup();
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	const entry = queue.shift();
+	const anchored = Boolean(entry.options.anchor);
+	const rootLayout = topRootLayout();
+	if (!anchored && !rootLayout) {
+		console.warn("[Toast] RootLayout is not mounted; toast was skipped");
+		showNext();
+		return;
+	}
+	const host = new GridLayout();
+	const position = entry.options.position ?? "bottom";
+	const unbindTheme = applyThemeClasses(host, "vx-toast-host");
+	const root = createNativeScriptRoot(host);
+	const current = {
+		...entry,
+		host,
+		root,
+		timer: null,
+		unbindTheme
 	};
+	active = current;
+	root.render(ToastBody, {
+		...entry,
+		open: true
+	});
+	if (anchored) {
+		current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3e3));
+		return;
+	}
+	host.horizontalAlignment = horizontalFor(position);
+	host.verticalAlignment = placementFor(position) === "top" ? "top" : "bottom";
+	host.marginTop = placementFor(position) === "top" ? 24 : 0;
+	host.marginBottom = placementFor(position) === "top" ? 0 : 24;
+	Object.assign(host, isIOS ? entry.options.ios : isAndroid ? entry.options.android : void 0);
+	rootLayout.open(host).then(() => {
+		if (active === current) current.timer = setTimeout(() => finishToast(current), Math.max(0, entry.options.duration ?? 3e3));
+	}, (error) => {
+		console.error("[Toast] open failed", error);
+		root.unmount?.();
+		if (active === current) active = null;
+		showNext();
+	});
 }
-function useAnimation(initial = 0, prop = "translateX") {
-	const c = useRef(null, _h$0);
-	if (!c.current) c.current = createAnimated(initial, prop);
-	return c.current;
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
 }
 //#endregion
-export { useAnimation };
+export { showToast };

package/dist/native/ui41.js

@@ -1,19 +1,58 @@
-import "@nativescript-community/octane";
-import { defineUniversalComponent as defineUniversalComponent$1, universalComponent as universalComponent$1 } from "octane/universal/native";
-//#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];
+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;
+	};
+	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);
 		}
-		if (props.className) cls.push(props.className);
-		rest.className = cls;
-		return universalComponent$1("nativescript", Base, rest);
-	}
-	return defineUniversalComponent$1("nativescript", Styled);
+	};
+}
+function useAnimation(initial = 0, prop = "translateX") {
+	const c = useRef(null, _h$0);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
 }
 //#endregion
-export { styled };
+export { useAnimation };