@octane-xplat/ui 0.5.0 → 0.6.0

package/dist/native/SegmentedControl.native.tsrx.js

@@ -0,0 +1,75 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityState } from "./escape-props.native.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalProps, universalValue, useState } from "@nativescript-community/octane";
+//#region src/SegmentedControl.native.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"propsSlot": 0,
+	"children": [{
+		"kind": "host",
+		"type": "label",
+		"props": { "className": "vx-segment-label" },
+		"bindings": [["text", 1]]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["accessibilityLabel", 4]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 5
+	}]
+});
+var SegmentedControl = defineUniversalComponent("nativescript", function SegmentedControl(props) {
+	const [internal, setInternal] = useState(props.defaultValue, _h$0);
+	const current = props.value ?? internal;
+	const select = (value) => {
+		if (props.value === void 0) setInternal(value);
+		props.onValueChange?.(value);
+	};
+	return universalValue(__octaneUniversalPlan1, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-segmented", props.disabled && "vx-segmented--disabled", props.className),
+		props.style,
+		props.accessibilityLabel,
+		props.options.map((opt) => {
+			const selected = current === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return universalValue(__octaneUniversalPlan0, [universalProps([
+				[
+					"set",
+					"key",
+					opt.value
+				],
+				[
+					"set",
+					"className",
+					cx("vx-segment", selected && "vx-segment--on", disabled && "vx-segment--disabled")
+				],
+				[
+					"set",
+					"accessibilityState",
+					nativeAccessibilityState({ selected })
+				],
+				[
+					"set",
+					"onTap",
+					disabled ? void 0 : () => select(opt.value)
+				]
+			]), opt.label ?? opt.value]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SegmentedControl };

package/dist/native/Select.native.tsrx.js

@@ -0,0 +1,202 @@
+import { cx } from "./cx.js";
+import { Pressable } from "./Pressable.native.tsrx.js";
+import { Popover } from "./Popover.native.tsrx.js";
+import { TextInput } from "./TextInput.native.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalFor, universalPlan, universalProps, universalValue, useRef, useState } from "@nativescript-community/octane";
+//#region src/Select.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "host",
+		"type": "label",
+		"bindings": [["className", 0], ["text", 1]]
+	}, {
+		"kind": "host",
+		"type": "label",
+		"props": {
+			"className": "vx-select-caret",
+			"text": "▾"
+		}
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [["className", 0], ["onTap", 1]],
+	"children": [{
+		"kind": "host",
+		"type": "label",
+		"props": { "className": "vx-select-check" },
+		"bindings": [["text", 2]]
+	}, {
+		"kind": "host",
+		"type": "label",
+		"props": { "className": "vx-menu-item-label" },
+		"bindings": [["text", 3]]
+	}]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "className": "vx-menu-list vx-select-list" },
+		"children": [{
+			"kind": "slot",
+			"slot": 1
+		}]
+	}]
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var Select = defineUniversalComponent("nativescript", function Select(props) {
+	const anchor = useRef(null, _h$0);
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false, _h$1);
+	const openControlled = props.open !== void 0;
+	const open = openControlled ? props.open : internalOpen;
+	const norm = (v) => v === void 0 ? [] : Array.isArray(v) ? v : [v];
+	const [internalValue, setInternalValue] = useState(norm(props.defaultValue), _h$2);
+	const valueControlled = props.value !== void 0;
+	const selected = valueControlled ? norm(props.value) : internalValue;
+	const [query, setQuery] = useState("", _h$3);
+	const setOpen = (next) => {
+		if (props.disabled && next) return;
+		if (!openControlled) setInternalOpen(next);
+		if (!next) setQuery("");
+		props.onOpenChange?.(next);
+	};
+	const report = (keys) => {
+		if (!valueControlled) setInternalValue(keys);
+		props.onValueChange?.(props.multiple ? keys : keys[0]);
+	};
+	const pick = (opt) => {
+		if (opt.disabled) return;
+		if (props.multiple) report(selected.includes(opt.value) ? selected.filter((v) => v !== opt.value) : [...selected, opt.value]);
+		else {
+			report([opt.value]);
+			setOpen(false);
+		}
+	};
+	const labelFor = (v) => props.options.find((o) => o.value === v)?.label ?? v;
+	const triggerText = selected.length ? selected.map(labelFor).join(", ") : props.placeholder ?? "";
+	const shown = props.searchable && query ? props.options.filter((o) => (o.label ?? o.value).toLowerCase().includes(query.toLowerCase())) : props.options;
+	return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", Pressable, universalProps([
+		[
+			"set",
+			"bind",
+			(v) => {
+				anchor.current = v;
+			}
+		],
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			cx("vx-select-trigger", props.disabled && "vx-select--disabled", props.className)
+		],
+		[
+			"set",
+			"style",
+			props.style
+		],
+		[
+			"set",
+			"disabled",
+			props.disabled
+		],
+		[
+			"set",
+			"onPress",
+			() => setOpen(!open)
+		],
+		[
+			"set",
+			"accessibilityLabel",
+			props.accessibilityLabel
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan0, [cx("vx-select-value", !selected.length && "vx-select-placeholder"), triggerText]);
+	}))), universalComponent("nativescript", Popover, universalProps([
+		[
+			"set",
+			"anchor",
+			anchor
+		],
+		[
+			"set",
+			"open",
+			open
+		],
+		[
+			"set",
+			"placement",
+			props.placement ?? "bottom"
+		],
+		[
+			"set",
+			"onDismiss",
+			() => setOpen(false)
+		],
+		[
+			"set",
+			"className",
+			"vx-menu"
+		]
+	], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan3, [props.searchable ? universalValue(__octaneUniversalPlan1, [universalComponent("nativescript", TextInput, universalProps([
+			[
+				"set",
+				"className",
+				"vx-select-search"
+			],
+			[
+				"set",
+				"placeholder",
+				"Search…"
+			],
+			[
+				"set",
+				"value",
+				query
+			],
+			[
+				"set",
+				"onChange",
+				setQuery
+			]
+		]))]) : null, universalFor(shown, (opt, __octaneUniversalIndex) => opt.value, (opt, __octaneUniversalIndex) => {
+			return universalValue(__octaneUniversalPlan2, [
+				cx("vx-menu-item", "vx-select-option", selected.includes(opt.value) && "vx-select-option--on", opt.disabled && "vx-menu-item--disabled"),
+				opt.disabled ? void 0 : () => pick(opt),
+				selected.includes(opt.value) ? "✓" : "",
+				opt.label ?? opt.value
+			]);
+		})]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Select };

package/dist/native/Separator.native.tsrx.js

@@ -0,0 +1,25 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Separator.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	]
+});
+var Separator = defineUniversalComponent("nativescript", function Separator(props) {
+	const vertical = props.orientation === "vertical";
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-separator", vertical ? "vx-separator--v" : "vx-separator--h", props.className),
+		props.style
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Separator };

package/dist/native/{ui63.js → Sheet.native.tsrx.js}

@@ -1,6 +1,7 @@
-import { cx } from "./ui2.js";
-import { applyThemeClasses } from "./ui31.js";
-import { rootLayoutFor } from "./ui34.js";
+import { cx } from "./cx.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { rootLayoutFor } from "./root-layout.native.js";
+import { attachSheetDetents } from "./sheet-detents.native.js";
 import { createNativeScriptRoot, defineUniversalComponent, hookSlots, universalPlan, universalValue, useEffect, useRef } from "@nativescript-community/octane";
 import { GridLayout, isAndroid, isIOS } from "@nativescript/core";
 //#region src/Sheet.native.tsrx
@@ -53,16 +54,23 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 		if (props.style) Object.assign(host.style, props.style);
 		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : void 0);
 		const root = createNativeScriptRoot(host);
+		const detents = props.detents?.length ? attachSheetDetents(host, props.detents, () => {
+			host.parent?.close?.(host)?.catch?.((error) => {
+				console.error("[Sheet] close failed", error);
+			});
+		}) : null;
 		const opened = {
 			host,
 			root,
 			unbindTheme,
-			programmatic: false
+			programmatic: false,
+			detach: detents?.detach
 		};
 		shown.current = opened;
 		root.render(SheetBody, { children: props.children });
 		host.on("closed", () => {
 			if (shown.current === opened) shown.current = null;
+			opened.detach?.();
 			opened.unbindTheme?.();
 			opened.root.unmount?.();
 			if (!opened.programmatic) props.onDismiss?.();
@@ -72,7 +80,7 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 				opacity: .4,
 				tapToClose: true
 			} } : {},
-			animation: {
+			...detents ? {} : { animation: {
 				enterFrom: {
 					translateY: 400,
 					duration: 250
@@ -81,8 +89,8 @@ var Sheet = defineUniversalComponent("nativescript", function Sheet(props) {
 					translateY: 400,
 					duration: 200
 				}
-			}
-		}).catch((error) => {
+			} }
+		}).then(() => detents?.enter()).catch((error) => {
 			if (shown.current === opened) shown.current = null;
 			opened.unbindTheme?.();
 			opened.root.unmount?.();

package/dist/native/Skeleton.native.tsrx.js

@@ -0,0 +1,28 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Skeleton.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	]
+});
+var Skeleton = defineUniversalComponent("nativescript", function Skeleton(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-skeleton", props.className),
+		{
+			...props.style,
+			width: props.width,
+			height: props.height
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Skeleton };

package/dist/native/Slider.native.tsrx.js

@@ -0,0 +1,98 @@
+import { cx } from "./cx.js";
+import { nativeAccessibilityRole } from "./escape-props.native.js";
+import { usePan } from "./pan.native.tsrx.js";
+import { applyNativeProps } from "./platformProps.native.js";
+import { useMeasure } from "./useMeasure.native.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useCallback, useEffect, useRef, useState, withSlot } from "@nativescript-community/octane";
+//#region src/Slider.native.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(7);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["accessibilityRole", 3],
+		["onPan", 4],
+		["ref", 5]
+	],
+	"children": [
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": { "className": "vx-slider-track" }
+		},
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": {
+				"className": "vx-slider-fill",
+				"horizontalAlignment": "left"
+			},
+			"bindings": [["style", 6]]
+		},
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": {
+				"className": "vx-slider-thumb",
+				"horizontalAlignment": "left"
+			},
+			"bindings": [["style", 7]]
+		}
+	]
+});
+var Slider = defineUniversalComponent("nativescript", function Slider(props) {
+	const measure = withSlot(_h$0, useMeasure);
+	const drag = useRef(null, _h$1);
+	const [dragValue, setDragValue] = useState(null, _h$2);
+	const min = props.minValue ?? 0;
+	const max = props.maxValue ?? 100;
+	const value = dragValue ?? props.value ?? min;
+	const ratio = Math.min(1, Math.max(0, (value - min) / (max - min)));
+	const width = measure.bounds?.width ?? 0;
+	const host = useRef(null, _h$3);
+	const bindHost = useCallback((el) => {
+		host.current = el;
+		measure.bind(el);
+	}, [], _h$4);
+	useEffect(() => {
+		applyNativeProps(host.current, props);
+	}, [props], _h$5);
+	const onPan = withSlot(_h$6, usePan, (e) => {
+		if (props.disabled) return;
+		if (e.state === "began") {
+			drag.current = { value0: value };
+			return;
+		}
+		if (!drag.current || !width) return;
+		if (e.state === "moved") {
+			const next = Math.min(max, Math.max(min, drag.current.value0 + e.dx / width * (max - min)));
+			setDragValue(next);
+			props.onValueChange?.(next);
+		} else {
+			drag.current = null;
+			setDragValue(null);
+		}
+	});
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		cx("vx-slider", props.className),
+		props.style,
+		nativeAccessibilityRole("adjustable"),
+		onPan,
+		bindHost,
+		{ width: ratio * width },
+		{ marginLeft: Math.min(Math.max(ratio * width - 10, 0), Math.max(width - 20, 0)) }
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Slider };

package/dist/native/{ui13.js → Spacer.native.tsrx.js}

@@ -1,5 +1,5 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
 import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
 //#region src/Spacer.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {

package/dist/native/{ui9.js → Stack.native.tsrx.js}

@@ -1,6 +1,5 @@
-import { cx } from "./ui2.js";
-import { applyEscapeProps } from "./ui3.js";
-import { glassClassOf, glassConfigOf } from "./ui4.js";
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.native.js";
 import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
 //#region src/Stack.native.tsrx
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
@@ -13,22 +12,34 @@ var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"bindings": [
 		["id", 0],
 		["ref", 1],
-		["iosGlassEffect", 2],
-		["className", 3],
-		["style", 4]
+		["className", 2],
+		["style", 3],
+		["accessible", 4],
+		["accessibilityLabel", 5],
+		["accessibilityRole", 6],
+		["accessibilityHint", 7],
+		["accessibilityValue", 8],
+		["accessibilityState", 9],
+		["accessibilityLiveRegion", 10]
 	],
 	"children": [{
 		"kind": "slot",
-		"slot": 5
+		"slot": 11
 	}]
 });
 var Stack = defineUniversalComponent("nativescript", function Stack(props) {
 	return universalValue(__octaneUniversalPlan0, [
 		props.id,
 		(view) => applyEscapeProps(view, props),
-		glassConfigOf(props.glass),
-		cx("vx-stack", glassClassOf(props.glass), props.className),
+		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
 	]);
 }, { "module": "@nativescript-community/octane" });

package/dist/native/Stepper.native.tsrx.js

@@ -0,0 +1,75 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.native.js";
+import { defineUniversalComponent, universalFor, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Stepper.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [["className", 0]]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "className": "vx-step-label" },
+	"bindings": [["text", 0]]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "className": "vx-stepper-cell" },
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"bindings": [["className", 1], ["onTap", 2]],
+		"children": [{
+			"kind": "host",
+			"type": "label",
+			"props": { "className": "vx-step-dot" },
+			"bindings": [["text", 3]]
+		}, {
+			"kind": "slot",
+			"slot": 4
+		}]
+	}]
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 4
+	}]
+});
+var Stepper = defineUniversalComponent("nativescript", function Stepper(props) {
+	const current = props.current ?? 0;
+	return universalValue(__octaneUniversalPlan3, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-stepper", props.className),
+		props.style,
+		universalFor(props.steps.map((step, i) => ({
+			step,
+			i
+		})), (e, __octaneUniversalIndex) => e.step.key, (e, __octaneUniversalIndex) => {
+			return universalValue(__octaneUniversalPlan2, [
+				e.i > 0 ? universalValue(__octaneUniversalPlan0, [cx("vx-stepper-line", e.i <= current && "vx-stepper-line--done")]) : null,
+				cx("vx-step", e.i < current && "vx-step--done", e.i === current && "vx-step--on", e.step.disabled && "vx-step--disabled"),
+				e.step.disabled ? void 0 : () => props.onStepChange?.(e.i),
+				e.i < current ? "✓" : String(e.i + 1),
+				e.step.label != null ? universalValue(__octaneUniversalPlan1, [e.step.label]) : null
+			]);
+		})
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Stepper };

package/dist/native/Switch.native.tsrx.js

@@ -0,0 +1,33 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props.native.js";
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/Switch.native.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["accessibilityRole", 4],
+		["onTap", 5]
+	],
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": { "className": "vx-switch-thumb" }
+	}]
+});
+var Switch = defineUniversalComponent("nativescript", function Switch(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		(v) => applyEscapeProps(v, props),
+		props.id,
+		cx("vx-switch", props.checked ? "vx-switch--on" : void 0, props.className),
+		props.style,
+		nativeAccessibilityRole("switch"),
+		() => props.onCheckedChange?.(!(props.checked ?? false))
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Switch };