@octane-xplat/ui 0.9.0 → 0.10.0

package/dist/native/Carousel.tsrx.js

@@ -0,0 +1,317 @@
+import { cx } from "./cx.js";
+import { applyEscapeProps } from "./escape-props.js";
+import { spacingStep } from "./spacing.js";
+import { Pressable } from "./Pressable.tsrx.js";
+import { mapChildren, toChildArray } from "./child-array.js";
+import { Icon } from "./Icon.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef, useState } from "@nativescript-community/octane";
+//#region src/Carousel.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(14);
+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 _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
+var _h$12 = /* @__PURE__ */ Symbol(_hs$ + 12);
+var _h$13 = /* @__PURE__ */ Symbol(_hs$ + 13);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"bindings": [["className", 0], ["accessibilityLabel", 1]],
+	"children": [{
+		"kind": "slot",
+		"slot": 2
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-carousel-fade vx-carousel-fade-start",
+		"verticalAlignment": "stretch",
+		"horizontalAlignment": "left",
+		"isUserInteractionEnabled": false
+	}
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-carousel-fade vx-carousel-fade-end",
+		"verticalAlignment": "stretch",
+		"horizontalAlignment": "right",
+		"isUserInteractionEnabled": false
+	}
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "range",
+	"children": [{
+		"kind": "slot",
+		"slot": 0
+	}, {
+		"kind": "slot",
+		"slot": 1
+	}]
+});
+var __octaneUniversalPlan6 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "gridlayout",
+	"props": {
+		"rows": "*",
+		"columns": "*"
+	},
+	"bindings": [
+		["className", 0],
+		["style", 1],
+		["id", 2],
+		["accessibilityLabel", 3]
+	],
+	"children": [
+		{
+			"kind": "host",
+			"type": "scrollview",
+			"props": {
+				"orientation": "horizontal",
+				"className": "vx-carousel-viewport",
+				"scrollBarIndicatorVisible": false
+			},
+			"bindings": [["ref", 4]],
+			"children": [{
+				"kind": "host",
+				"type": "flexboxlayout",
+				"props": {
+					"flexDirection": "row",
+					"className": "vx-carousel-track"
+				},
+				"bindings": [["ref", 5], ["style", 6]],
+				"children": [{
+					"kind": "slot",
+					"slot": 7
+				}]
+			}]
+		},
+		{
+			"kind": "slot",
+			"slot": 8
+		},
+		{
+			"kind": "slot",
+			"slot": 9
+		},
+		{
+			"kind": "slot",
+			"slot": 10
+		}
+	]
+});
+var EPS = 1;
+var SNAP_DEBOUNCE_MS = 140;
+var Carousel = defineUniversalComponent("nativescript", function Carousel(props) {
+	const items = toChildArray(props.children);
+	const count = items.length;
+	const gap = spacingStep(props.gap ?? 2) ?? 8;
+	const scroller = useRef(null, _h$0);
+	const track = useRef(null, _h$1);
+	const [canPrev, setCanPrev] = useState(false, _h$2);
+	const [canNext, setCanNext] = useState(false, _h$3);
+	const [atStart, setAtStart] = useState(true, _h$4);
+	const [atEnd, setAtEnd] = useState(false, _h$5);
+	const loop = props.hasLoop === true;
+	const snapTimer = useRef(null, _h$6);
+	const offsets = useCallback(() => {
+		const t = track.current;
+		if (!t?.eachChildView) return [];
+		const out = [];
+		t.eachChildView((c) => {
+			out.push(c.left ?? c.originX ?? 0);
+			return true;
+		});
+		return out;
+	}, [], _h$7);
+	const measure = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const x = Number(el.horizontalOffset) || 0;
+		const max = Math.max(0, Number(el.scrollableWidth) || 0);
+		const prev = x > EPS;
+		const next = x < max - EPS;
+		setAtStart(!prev);
+		setAtEnd(!next);
+		setCanPrev(loop ? count > 1 : prev);
+		setCanNext(loop ? count > 1 : next);
+	}, [count, loop], _h$8);
+	const scrollToIndex = useCallback((i) => {
+		const el = scroller.current;
+		const o = offsets();
+		if (!el || !o.length) return;
+		const clamped = Math.min(Math.max(i, 0), count - 1);
+		el.scrollToHorizontalOffset?.(o[clamped] ?? 0, true);
+	}, [count, offsets], _h$9);
+	const scrollNext = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const x = Number(el.horizontalOffset) || 0;
+		const max = Math.max(0, Number(el.scrollableWidth) || 0);
+		const page = el.getActualSize?.().width || 0;
+		if (x >= max - EPS && loop) {
+			el.scrollToHorizontalOffset?.(0, true);
+			return;
+		}
+		el.scrollToHorizontalOffset?.(Math.min(x + page, max), true);
+	}, [loop], _h$10);
+	const scrollPrev = useCallback(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const x = Number(el.horizontalOffset) || 0;
+		const max = Math.max(0, Number(el.scrollableWidth) || 0);
+		const page = el.getActualSize?.().width || 0;
+		if (x <= EPS && loop) {
+			el.scrollToHorizontalOffset?.(max, true);
+			return;
+		}
+		el.scrollToHorizontalOffset?.(Math.max(x - page, 0), true);
+	}, [loop], _h$11);
+	const handle = {
+		scrollNext,
+		scrollPrev,
+		scrollTo: scrollToIndex,
+		canScrollNext: () => {
+			const el = scroller.current;
+			if (!el) return false;
+			if (loop) return count > 1;
+			return (Number(el.horizontalOffset) || 0) < Math.max(0, Number(el.scrollableWidth) || 0) - EPS;
+		},
+		canScrollPrev: () => {
+			const el = scroller.current;
+			if (!el) return false;
+			if (loop) return count > 1;
+			return (Number(el.horizontalOffset) || 0) > EPS;
+		}
+	};
+	useImperativeHandle(props.ref, () => handle, void 0, _h$12);
+	useEffect(() => {
+		const el = scroller.current;
+		if (!el?.on) return;
+		const onScroll = () => {
+			measure();
+			if (props.hasSnap) {
+				if (snapTimer.current) clearTimeout(snapTimer.current);
+				snapTimer.current = setTimeout(() => {
+					const o = offsets();
+					const elNow = scroller.current;
+					if (!o.length || !elNow) return;
+					const x = Number(elNow.horizontalOffset) || 0;
+					let nearest = o[0];
+					for (const off of o) if (Math.abs(off - x) < Math.abs(nearest - x)) nearest = off;
+					elNow.scrollToHorizontalOffset?.(nearest, true);
+				}, SNAP_DEBOUNCE_MS);
+			}
+		};
+		el.on("scroll", onScroll);
+		el.on("layoutChanged", measure);
+		measure();
+		return () => {
+			el.off?.("scroll", onScroll);
+			el.off?.("layoutChanged", measure);
+			if (snapTimer.current) clearTimeout(snapTimer.current);
+		};
+	}, [
+		count,
+		measure,
+		props.hasSnap,
+		offsets
+	], _h$13);
+	return universalValue(__octaneUniversalPlan6, [
+		cx("vx-carousel", props.className),
+		props.style,
+		props.id,
+		props.accessibilityLabel ?? props.label,
+		(v) => {
+			scroller.current = v;
+			applyEscapeProps(v, props);
+		},
+		(v) => {
+			track.current = v;
+		},
+		{ columnGap: gap },
+		mapChildren(items, (child, i) => universalValue(__octaneUniversalPlan0, [
+			cx("vx-carousel-slide", props.variant === "proportional" && "vx-carousel-slide--prop"),
+			`Slide ${i + 1} of ${count}`,
+			child
+		])),
+		props.hasEdgeFade && !atStart && universalValue(__octaneUniversalPlan1, []),
+		props.hasEdgeFade && !atEnd && universalValue(__octaneUniversalPlan2, []),
+		props.hasButtons && universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"className",
+				"vx-carousel-btn vx-carousel-prev"
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				"Previous"
+			],
+			[
+				"set",
+				"disabled",
+				!canPrev
+			],
+			[
+				"set",
+				"onPress",
+				scrollPrev
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				"xplat-chevron-left"
+			]]))]);
+		}))), universalComponent("nativescript", Pressable, universalProps([
+			[
+				"set",
+				"className",
+				"vx-carousel-btn vx-carousel-next"
+			],
+			[
+				"set",
+				"accessibilityLabel",
+				"Next"
+			],
+			[
+				"set",
+				"disabled",
+				!canNext
+			],
+			[
+				"set",
+				"onPress",
+				scrollNext
+			]
+		], universalChildren("nativescript", () => {
+			return universalValue(__octaneUniversalPlan4, [universalComponent("nativescript", Icon, universalProps([[
+				"set",
+				"name",
+				"xplat-chevron-right"
+			]]))]);
+		})))])
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Carousel };

package/dist/native/Center.tsrx.js

@@ -0,0 +1,70 @@
+import { refList } from "./ref-list.js";
+import { cx } from "./cx.js";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
+import { spacingPx } from "./stack-layout.js";
+import { defineUniversalComponent, hookSlots, universalPlan, universalValue, useMemo } from "@nativescript-community/octane";
+//#region src/Center.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "row" },
+	"bindings": [
+		["id", 0],
+		["ref", 1],
+		["justifyContent", 2],
+		["alignItems", 3],
+		["className", 4],
+		["style", 5],
+		["accessible", 6],
+		["accessibilityLabel", 7],
+		["accessibilityRole", 8],
+		["accessibilityHint", 9],
+		["accessibilityValue", 10],
+		["accessibilityState", 11],
+		["accessibilityLiveRegion", 12]
+	],
+	"children": [{
+		"kind": "slot",
+		"slot": 13
+	}]
+});
+var Center = defineUniversalComponent("nativescript", function Center(props) {
+	const axis = props.axis ?? "both";
+	const forwardedRef = useMemo(() => refList((v) => {
+		if (v) applyEscapeProps(v, props);
+	}, props.ref), [
+		props.ref,
+		props.ios,
+		props.android,
+		props.web
+	], _h$0);
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		forwardedRef,
+		axis !== "vertical" ? "center" : void 0,
+		axis !== "horizontal" ? "center" : void 0,
+		cx("vx-center", props.className),
+		{
+			...spacingPx(props.paddingInlineStart ?? props.paddingInline ?? props.padding) !== void 0 ? { paddingLeft: spacingPx(props.paddingInlineStart ?? props.paddingInline ?? props.padding) } : {},
+			...spacingPx(props.paddingInlineEnd ?? props.paddingInline ?? props.padding) !== void 0 ? { paddingRight: spacingPx(props.paddingInlineEnd ?? props.paddingInline ?? props.padding) } : {},
+			...spacingPx(props.paddingBlockStart ?? props.paddingBlock ?? props.padding) !== void 0 ? { paddingTop: spacingPx(props.paddingBlockStart ?? props.paddingBlock ?? props.padding) } : {},
+			...spacingPx(props.paddingBlockEnd ?? props.paddingBlock ?? props.padding) !== void 0 ? { paddingBottom: spacingPx(props.paddingBlockEnd ?? props.paddingBlock ?? props.padding) } : {},
+			...props.width != null ? { width: props.width } : {},
+			...props.height != null ? { height: props.height } : {},
+			...props.maxWidth != null ? { maxWidth: props.maxWidth } : {},
+			...props.minHeight != null ? { minHeight: props.minHeight } : {},
+			...props.style
+		},
+		props.accessible,
+		props.accessibilityLabel,
+		nativeAccessibilityRole(props.accessibilityRole),
+		props.accessibilityHint,
+		props.accessibilityValue,
+		nativeAccessibilityState(props.accessibilityState),
+		props.accessibilityLiveRegion,
+		props.children
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Center };

package/dist/native/ChatComposer.tsrx.js

@@ -0,0 +1,249 @@
+import { cx } from "./cx.js";
+import { Icon } from "./Icon.tsrx.js";
+import { ChatComposerProvider } from "./chat-context.js";
+import { ChatComposerInput } from "./ChatComposerInput.tsrx.js";
+import { ChatSendButton } from "./ChatSendButton.tsrx.js";
+import { defineUniversalComponent, hookSlots, universalChildren, universalComponent, universalPlan, universalProps, universalValue, useCallback, useMemo, useRef, useState } from "@nativescript-community/octane";
+//#region src/ChatComposer.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+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 __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"flexDirection": "row",
+		"alignItems": "center"
+	},
+	"bindings": [["className", 0], ["accessibilityLiveRegion", 1]],
+	"children": [{
+		"kind": "slot",
+		"slot": 2
+	}, {
+		"kind": "host",
+		"type": "label",
+		"props": { "className": "vx-chatcomposer-statustext" },
+		"bindings": [["text", 3]]
+	}]
+});
+var __octaneUniversalPlan1 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": {
+		"className": "vx-chatcomposer-header",
+		"flexDirection": "row",
+		"alignItems": "center",
+		"justifyContent": "space-between"
+	},
+	"children": [{
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"className": "vx-chatcomposer-headerleft",
+			"flexDirection": "row",
+			"alignItems": "center"
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 0
+		}]
+	}, {
+		"kind": "host",
+		"type": "flexboxlayout",
+		"props": {
+			"className": "vx-chatcomposer-headerright",
+			"flexDirection": "row",
+			"alignItems": "center"
+		},
+		"children": [{
+			"kind": "slot",
+			"slot": 1
+		}]
+	}]
+});
+var __octaneUniversalPlan2 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan3 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var __octaneUniversalPlan4 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "flexboxlayout",
+	"props": { "flexDirection": "column" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2]
+	],
+	"children": [
+		{
+			"kind": "slot",
+			"slot": 3
+		},
+		{
+			"kind": "slot",
+			"slot": 4
+		},
+		{
+			"kind": "host",
+			"type": "flexboxlayout",
+			"props": { "flexDirection": "column" },
+			"bindings": [["className", 5], ["onTap", 6]],
+			"children": [
+				{
+					"kind": "slot",
+					"slot": 7
+				},
+				{
+					"kind": "host",
+					"type": "flexboxlayout",
+					"props": {
+						"className": "vx-chatcomposer-inputarea",
+						"flexDirection": "column"
+					},
+					"children": [{
+						"kind": "slot",
+						"slot": 8
+					}]
+				},
+				{
+					"kind": "host",
+					"type": "flexboxlayout",
+					"props": {
+						"className": "vx-chatcomposer-footer",
+						"flexDirection": "row",
+						"alignItems": "center",
+						"justifyContent": "space-between"
+					},
+					"children": [{
+						"kind": "host",
+						"type": "flexboxlayout",
+						"props": {
+							"className": "vx-chatcomposer-footerleft",
+							"flexDirection": "row",
+							"alignItems": "center"
+						},
+						"children": [{
+							"kind": "slot",
+							"slot": 9
+						}]
+					}, {
+						"kind": "host",
+						"type": "flexboxlayout",
+						"props": {
+							"className": "vx-chatcomposer-footerright",
+							"flexDirection": "row",
+							"alignItems": "center"
+						},
+						"children": [{
+							"kind": "slot",
+							"slot": 10
+						}, {
+							"kind": "slot",
+							"slot": 11
+						}]
+					}]
+				}
+			]
+		},
+		{
+			"kind": "slot",
+			"slot": 12
+		}
+	]
+});
+var __octaneUniversalPlan5 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var ChatComposer = defineUniversalComponent("nativescript", function ChatComposer(props) {
+	const placeholder = props.placeholder ?? "Type a message…";
+	const isDisabled = props.isDisabled ?? false;
+	const isStopShown = props.isStopShown ?? false;
+	const density = props.density ?? "balanced";
+	const elevation = props.elevation ?? "low";
+	const statusPosition = props.statusPosition ?? "bottom";
+	const [internalValue, setInternalValue] = useState("", _h$0);
+	const isControlled = props.value !== void 0;
+	const currentValue = (isControlled ? props.value : internalValue) ?? "";
+	const updateValue = useCallback((next) => {
+		if (!isControlled) setInternalValue(next);
+		props.onChange?.(next);
+	}, [isControlled, props.onChange], _h$1);
+	const handleSubmit = useCallback((value) => {
+		const trimmed = value.trim();
+		if (!trimmed || isDisabled) return;
+		props.onSubmit(trimmed);
+		updateValue("");
+	}, [
+		isDisabled,
+		props.onSubmit,
+		updateValue
+	], _h$2);
+	const canSend = currentValue.trim().length > 0 && !isDisabled;
+	const inputControlRef = useRef(null, _h$3);
+	const composerContext = useMemo(() => ({
+		value: currentValue,
+		onChange: updateValue,
+		onSubmit: handleSubmit,
+		placeholder,
+		isDisabled,
+		isStopShown,
+		canSend,
+		onStop: props.onStop,
+		inputControlRef
+	}), [
+		currentValue,
+		updateValue,
+		handleSubmit,
+		placeholder,
+		isDisabled,
+		isStopShown,
+		canSend,
+		props.onStop
+	], _h$4);
+	const status = props.status;
+	const statusEl = status ? universalValue(__octaneUniversalPlan0, [
+		cx("vx-chatcomposer-status", `vx-chatcomposer-status--${status.type}`, `vx-chatcomposer-status--${statusPosition}`),
+		status.type === "error" ? "assertive" : "polite",
+		universalComponent("nativescript", Icon, universalProps([[
+			"set",
+			"name",
+			status.type === "error" ? "xplat-error" : "xplat-warning"
+		], [
+			"set",
+			"size",
+			14
+		]])),
+		status.message ?? ""
+	]) : null;
+	return universalValue(__octaneUniversalPlan5, [universalComponent("nativescript", ChatComposerProvider, universalProps([[
+		"set",
+		"value",
+		composerContext
+	]], universalChildren("nativescript", () => {
+		return universalValue(__octaneUniversalPlan4, [
+			props.id,
+			cx("vx-chatcomposer", `vx-chatcomposer--${density}`, isDisabled && "vx-chatcomposer--disabled", props.className),
+			props.style,
+			statusPosition === "top" ? statusEl : null,
+			props.drawer,
+			cx("vx-chatcomposer-body", `vx-chatcomposer-body--${elevation}`, `vx-chatcomposer-body--${density}`),
+			() => inputControlRef.current?.focus(),
+			props.headerActions || props.headerContext ? universalValue(__octaneUniversalPlan1, [props.headerActions, props.headerContext]) : null,
+			props.input ?? universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", ChatComposerInput, universalProps([]))]),
+			props.footerActions,
+			props.sendActions,
+			props.sendButton ?? universalValue(__octaneUniversalPlan3, [universalComponent("nativescript", ChatSendButton, universalProps([]))]),
+			statusPosition === "bottom" ? statusEl : null
+		]);
+	})))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { ChatComposer };