@octane-xplat/ui 0.9.0 → 0.10.0

package/dist/native/Slider.tsrx.js

@@ -1,8 +1,8 @@
 import { cx } from "./cx.js";
 import { nativeAccessibilityRole } from "./escape-props.js";
 import { usePan } from "./pan.tsrx.js";
-import { applyNativeProps } from "./platformProps.js";
 import { useMeasure } from "./useMeasure.tsrx.js";
+import { applyNativeProps } from "./platformProps.js";
 import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useCallback, useEffect, useRef, useState, withSlot } from "@nativescript-community/octane";
 //#region src/Slider.tsrx
 var _hs$ = /* @__PURE__ */ hookSlots(7);
@@ -57,7 +57,7 @@ var Slider = defineUniversalComponent("nativescript", function Slider(props) {
 	const host = useRef(null, _h$3);
 	const bindHost = useCallback((el) => {
 		host.current = el;
-		measure.bind(el);
+		measure.ref(el);
 	}, [], _h$4);
 	const thumbSize = 20;
 	const trackTop = 12;

package/dist/native/Stack.tsrx.js

@@ -1,47 +1,153 @@
+import { refList } from "./ref-list.js";
 import { cx } from "./cx.js";
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+import { usePan } from "./pan.tsrx.js";
+import { resolveStackLayout } from "./stack-layout.js";
+import { defineUniversalComponent, hookSlots, universalIf, universalPlan, universalValue, useMemo, withSlot } from "@nativescript-community/octane";
 //#region src/Stack.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": "gridlayout",
-	"props": {
-		"rows": "*",
-		"columns": "*"
-	},
+	"type": "scrollview",
 	"bindings": [
 		["id", 0],
 		["ref", 1],
 		["className", 2],
 		["style", 3],
-		["accessible", 4],
-		["accessibilityLabel", 5],
-		["accessibilityRole", 6],
-		["accessibilityHint", 7],
-		["accessibilityValue", 8],
-		["accessibilityState", 9],
-		["accessibilityLiveRegion", 10]
+		["orientation", 4],
+		["accessible", 5],
+		["accessibilityLabel", 6],
+		["accessibilityRole", 7],
+		["accessibilityHint", 8],
+		["accessibilityValue", 9],
+		["accessibilityState", 10],
+		["accessibilityLiveRegion", 11],
+		["onPan", 12],
+		["onSwipe", 13]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [
+			["flexDirection", 14],
+			["justifyContent", 15],
+			["alignItems", 16],
+			["flexWrap", 17],
+			["gap", 18]
+		],
+		"children": [{
+			"kind": "slot",
+			"slot": 19
+		}]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["flexDirection", 2],
+		["justifyContent", 3],
+		["alignItems", 4],
+		["flexWrap", 5],
+		["gap", 6],
+		["className", 7],
+		["style", 8],
+		["accessible", 9],
+		["accessibilityLabel", 10],
+		["accessibilityRole", 11],
+		["accessibilityHint", 12],
+		["accessibilityValue", 13],
+		["accessibilityState", 14],
+		["accessibilityLiveRegion", 15],
+		["onPan", 16],
+		["onSwipe", 17]
 	],
 	"children": [{
 		"kind": "slot",
-		"slot": 11
+		"slot": 18
 	}]
 });
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
 var Stack = defineUniversalComponent("nativescript", function Stack(props) {
-	return universalValue(__octaneUniversalPlan0, [
-		props.id,
-		(view) => applyEscapeProps(view, props),
-		cx("vx-stack", props.className),
-		props.style,
-		props.accessible,
-		props.accessibilityLabel,
-		nativeAccessibilityRole(props.accessibilityRole),
-		props.accessibilityHint,
-		props.accessibilityValue,
-		nativeAccessibilityState(props.accessibilityState),
-		props.accessibilityLiveRegion,
-		props.children
-	]);
+	const layout = resolveStackLayout(props);
+	const onPan = withSlot(_h$0, usePan, props.onPan);
+	const sizingStyle = {
+		...props.width != null ? { width: props.width } : {},
+		...props.height != null ? { height: props.height } : {},
+		...props.maxWidth != null ? { maxWidth: props.maxWidth } : {},
+		...props.minHeight != null ? { minHeight: props.minHeight } : {},
+		...layout.paddingTop !== void 0 ? { paddingTop: layout.paddingTop } : {},
+		...layout.paddingBottom !== void 0 ? { paddingBottom: layout.paddingBottom } : {},
+		...layout.paddingInlineStart !== void 0 ? { paddingLeft: layout.paddingInlineStart } : {},
+		...layout.paddingInlineEnd !== void 0 ? { paddingRight: layout.paddingInlineEnd } : {}
+	};
+	const forwardedRef = useMemo(() => refList((v) => {
+		if (v) applyEscapeProps(v, props);
+	}, props.ref), [
+		props.ref,
+		props.ios,
+		props.android,
+		props.web
+	], _h$1);
+	return universalValue(__octaneUniversalPlan2, [universalIf(layout.scrollable, () => {
+		return universalValue(__octaneUniversalPlan0, [
+			props.id,
+			forwardedRef,
+			cx("vx-stack", "vx-stack--scroll", props.className),
+			{
+				...sizingStyle,
+				...props.style
+			},
+			layout.flexDirection === "row" ? "horizontal" : "vertical",
+			props.accessible,
+			props.accessibilityLabel,
+			nativeAccessibilityRole(props.accessibilityRole),
+			props.accessibilityHint,
+			props.accessibilityValue,
+			nativeAccessibilityState(props.accessibilityState),
+			props.accessibilityLiveRegion,
+			onPan,
+			props.onSwipe,
+			layout.flexDirection,
+			layout.justifyContent,
+			layout.alignItems,
+			layout.flexWrap,
+			layout.gap,
+			props.children
+		]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan1, [
+			props.id,
+			forwardedRef,
+			layout.flexDirection,
+			layout.justifyContent,
+			layout.alignItems,
+			layout.flexWrap,
+			layout.gap,
+			cx("vx-stack", props.className),
+			{
+				...sizingStyle,
+				...props.style
+			},
+			props.accessible,
+			props.accessibilityLabel,
+			nativeAccessibilityRole(props.accessibilityRole),
+			props.accessibilityHint,
+			props.accessibilityValue,
+			nativeAccessibilityState(props.accessibilityState),
+			props.accessibilityLiveRegion,
+			onPan,
+			props.onSwipe,
+			props.children
+		]);
+	})]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion
 export { Stack };

package/dist/native/StackItem.tsrx.js

@@ -0,0 +1,121 @@
+import { refList } from "./ref-list.js";
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { usePan } from "./pan.tsrx.js";
+import { stackItemStyle } from "./stack-layout.js";
+import { defineUniversalComponent, hookSlots, universalIf, universalPlan, universalValue, useMemo, withSlot } from "@nativescript-community/octane";
+//#region src/StackItem.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": "scrollview",
+	"props": { "orientation": "vertical" },
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3],
+		["accessible", 4],
+		["accessibilityLabel", 5],
+		["accessibilityRole", 6],
+		["accessibilityHint", 7],
+		["accessibilityValue", 8],
+		["accessibilityState", 9],
+		["accessibilityLiveRegion", 10],
+		["onPan", 11],
+		["onSwipe", 12]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "flexDirection": "column" },
+		"children": [{
+			"kind": "slot",
+			"slot": 13
+		}]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["className", 2],
+		["style", 3],
+		["accessible", 4],
+		["accessibilityLabel", 5],
+		["accessibilityRole", 6],
+		["accessibilityHint", 7],
+		["accessibilityValue", 8],
+		["accessibilityState", 9],
+		["accessibilityLiveRegion", 10],
+		["onPan", 11],
+		["onSwipe", 12]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 13
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var StackItem = defineUniversalComponent("nativescript", function StackItem(props) {
+	const itemStyle = stackItemStyle(props);
+	const onPan = withSlot(_h$0, usePan, props.onPan);
+	const forwardedRef = useMemo(() => refList((v) => {
+		if (v) applyEscapeProps(v, props);
+	}, props.ref), [
+		props.ref,
+		props.ios,
+		props.android,
+		props.web
+	], _h$1);
+	return universalValue(__octaneUniversalPlan2, [universalIf(props.isScrollable, () => {
+		return universalValue(__octaneUniversalPlan0, [
+			props.id,
+			forwardedRef,
+			cx("vx-stackitem", props.className),
+			{
+				...itemStyle,
+				...props.style
+			},
+			props.accessible,
+			props.accessibilityLabel,
+			nativeAccessibilityRole(props.accessibilityRole),
+			props.accessibilityHint,
+			props.accessibilityValue,
+			nativeAccessibilityState(props.accessibilityState),
+			props.accessibilityLiveRegion,
+			onPan,
+			props.onSwipe,
+			props.children
+		]);
+	}, () => {
+		return universalValue(__octaneUniversalPlan1, [
+			props.id,
+			forwardedRef,
+			cx("vx-stackitem", props.className),
+			{
+				...itemStyle,
+				...props.style
+			},
+			props.accessible,
+			props.accessibilityLabel,
+			nativeAccessibilityRole(props.accessibilityRole),
+			props.accessibilityHint,
+			props.accessibilityValue,
+			nativeAccessibilityState(props.accessibilityState),
+			props.accessibilityLiveRegion,
+			onPan,
+			props.onSwipe,
+			props.children
+		]);
+	})]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { StackItem };

package/dist/native/StatusDot.tsrx.js

@@ -0,0 +1,95 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props.js";
+import { useColorScheme } from "./theme/colorScheme.js";
+import { Tooltip } from "./Tooltip.mobile.tsrx.js";
+import { statusDotColor } from "./scheme-colors.js";
+import { nativeColor } from "./native-color.mobile.tsrx.js";
+import { isRenderable } from "./is-renderable.js";
+import { defineUniversalComponent, hookSlots, universalComponent, universalPlan, universalProps, universalValue, useEffect, useRef, withSlot } from "@nativescript-community/octane";
+//#region src/StatusDot.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "accessible": true },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["accessibilityRole", 4],
+		["accessibilityLabel", 5]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 6
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var StatusDot = defineUniversalComponent("nativescript", function StatusDot(props) {
+	const scheme = withSlot(_h$0, useColorScheme);
+	const dot = useRef(null, _h$1);
+	const pulsing = props.isPulsing ?? false;
+	useEffect(() => {
+		const view = dot.current;
+		if (!pulsing || !view) return;
+		let cancelled = false;
+		const beat = (opacity) => {
+			if (cancelled || !dot.current) return;
+			const done = () => {
+				if (!cancelled) beat(opacity === 1 ? .4 : 1);
+			};
+			const result = view.animate?.({
+				opacity,
+				duration: 750,
+				curve: "easeInOut"
+			});
+			if (result?.then) result.then(done, done);
+			else done();
+		};
+		beat(.4);
+		return () => {
+			cancelled = true;
+			view.cancelAnimation?.("opacity");
+			view.opacity = 1;
+		};
+	}, [pulsing], _h$2);
+	const showsIcon = isRenderable(props.icon);
+	const view = universalValue(__octaneUniversalPlan0, [
+		(v) => {
+			dot.current = v;
+			applyEscapeProps(v, props);
+		},
+		props.id,
+		cx("vx-statusdot", `vx-statusdot--${props.variant}`, props.className),
+		{
+			width: 8,
+			height: 8,
+			borderRadius: 4,
+			backgroundColor: nativeColor(statusDotColor(props.variant, scheme)),
+			justifyContent: "center",
+			alignItems: "center",
+			...props.style
+		},
+		nativeAccessibilityRole("image"),
+		props.label,
+		showsIcon ? props.icon : null
+	]);
+	return props.tooltip != null ? universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", Tooltip, universalProps([[
+		"set",
+		"trigger",
+		view
+	], [
+		"set",
+		"content",
+		props.tooltip
+	]]))]) : view;
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { StatusDot };

package/dist/native/Switch.tsrx.js

@@ -1,7 +1,9 @@
 import { cx } from "./cx.js";
-import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props.js";
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { useFieldControlProps } from "./field-context.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, withSlot } from "@nativescript-community/octane";
 //#region src/Switch.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "flexboxlayout",
@@ -11,7 +13,10 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		["className", 2],
 		["style", 3],
 		["accessibilityRole", 4],
-		["onTap", 5]
+		["accessibilityLabel", 5],
+		["accessibilityHint", 6],
+		["accessibilityState", 7],
+		["onTap", 8]
 	],
 	"children": [{
 		"kind": "host",
@@ -19,14 +24,22 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 		"props": { "className": "vx-switch-thumb" }
 	}]
 });
-var Switch = defineUniversalComponent("nativescript", function Switch(props) {
+var Switch = defineUniversalComponent("nativescript", function Switch(inputProps) {
+	const props = withSlot(_h$0, useFieldControlProps, inputProps);
+	const isBlocked = props.isDisabled || props.isReadOnly;
 	return universalValue(__octaneUniversalPlan0, [
 		(v) => applyEscapeProps(v, props),
 		props.id,
-		cx("vx-switch", props.checked ? "vx-switch--on" : void 0, props.className),
+		cx("vx-switch", props.checked ? "vx-switch--on" : void 0, props.isDisabled && "vx-switch--disabled", props.isReadOnly && "vx-switch--readonly", props.isLoading && "vx-switch--loading", props.status && `vx-switch--status-${props.status.type}`, props.size && `vx-switch--size-${props.size}`, props.className),
 		props.style,
 		nativeAccessibilityRole("switch"),
-		() => props.onCheckedChange?.(!(props.checked ?? false))
+		props.ariaLabel ?? props.fieldLabel ?? props.label,
+		props.accessibilityHint,
+		nativeAccessibilityState({
+			checked: props.checked ?? false,
+			disabled: props.isDisabled
+		}),
+		isBlocked ? void 0 : () => props.onCheckedChange?.(!(props.checked ?? false))
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion