@octane-xplat/ui 0.4.0 → 0.6.0

package/dist/web/CameraView.web.tsrx.js

@@ -0,0 +1,310 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { __s, bag15, bag4, child, clone, delegateEvents, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, queueRefAttach, queueRefDetach, setEventHandler, setStyle, snapshotSpread, template, useEffect, useRef } from "octane";
+import { bindSignalHostPropSources, enableSignalBindings, replaceRef, setAttributeIfChanged } from "octane/internal/client";
+//#region src/CameraView.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["playing"]);
+var _t$0 = /* @__PURE__ */ template("<video class=\"vx-cameraview-surface\" autoplay=\"\" playsinline=\"\"></video>");
+var _t$1 = /* @__PURE__ */ template("<div><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _rm$1 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$0(__props, __s, __extra) {
+	const el = __extra[0];
+	const facing = __extra[1];
+	const props = __extra[2];
+	const readyFired = __extra[3];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (v) => {
+			el.current = v;
+			if (!v) return;
+			applyEscapeProps(v, props);
+			props.bind?.({ native: v });
+		}, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$playing", () => {
+			if (!readyFired.current) {
+				readyFired.current = true;
+				props.onReady?.();
+			}
+		});
+		_b = bag4(__s, _root, _m0, _m1, void 0, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _r = (v) => {
+				el.current = v;
+				if (!v) return;
+				applyEscapeProps(v, props);
+				props.bind?.({ native: v });
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.a, "$$playing", () => {
+			if (!readyFired.current) {
+				readyFired.current = true;
+				props.onReady?.();
+			}
+		});
+	}
+	_b.c = setAttributeIfChanged(true, _b.c, _b.a, "muted");
+	{
+		const _v = facing === "front" ? { transform: "scaleX(-1)" } : void 0;
+		if (_b.d !== _v) {
+			setStyle(_b.a, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+}
+var _rm$3 = [
+	"s",
+	"n",
+	"m"
+];
+var CameraView = /* @__PURE__ */ __s(function CameraView(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	const facing = props.facing ?? "back";
+	const active = props.active !== false;
+	const readyFired = useRef(false, _hs$ + 1);
+	useEffect(() => {
+		const v = el.current;
+		if (!v || !active) return;
+		const md = navigator.mediaDevices;
+		if (!md?.getUserMedia) {
+			props.onError?.({ message: "camera unsupported" });
+			return;
+		}
+		let stream = null;
+		let dead = false;
+		readyFired.current = false;
+		md.getUserMedia({
+			video: { facingMode: facing === "front" ? "user" : "environment" },
+			audio: false
+		}).then((s) => {
+			if (dead) {
+				for (const t of s.getTracks()) t.stop();
+				return;
+			}
+			stream = s;
+			v.srcObject = s;
+			v.play()?.catch(() => {});
+		}).catch((e) => {
+			props.onError?.({ message: e?.name === "NotAllowedError" ? "camera permission denied" : String(e?.name ?? e) });
+		});
+		return () => {
+			dead = true;
+			v.srcObject = null;
+			if (stream) for (const t of stream.getTracks()) t.stop();
+		};
+	}, [active, facing], _hs$ + 2);
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14;
+		const _root = clone(_t$1);
+		_m0 = props.id;
+		_m1 = [
+			"vx-stack",
+			"vx-cameraview",
+			props.className
+		];
+		_m2 = snapshotSpread(layoutChildProps(props, props.style));
+		_m3 = props.accessibilityRole;
+		_m4 = props.accessibilityLabel;
+		_m5 = props.accessible === false ? true : void 0;
+		_m6 = props.accessibilityHint;
+		_m7 = props.accessibilityValue;
+		_m8 = props.accessibilityState?.disabled;
+		_m9 = props.accessibilityState?.selected;
+		_m10 = props.accessibilityState?.checked;
+		_m11 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m12 = _root;
+		_m13 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"id",
+				_m0
+			],
+			[
+				false,
+				"className",
+				_m1
+			],
+			[true, _m2],
+			[
+				false,
+				"role",
+				_m3
+			],
+			[
+				false,
+				"aria-label",
+				_m4
+			],
+			[
+				false,
+				"aria-hidden",
+				_m5
+			],
+			[
+				false,
+				"aria-description",
+				_m6
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m7
+			],
+			[
+				false,
+				"aria-disabled",
+				_m8
+			],
+			[
+				false,
+				"aria-selected",
+				_m9
+			],
+			[
+				false,
+				"aria-checked",
+				_m10
+			],
+			[
+				false,
+				"aria-live",
+				_m11
+			]
+		], "b:323f41d4", true);
+		markDangerouslySetInnerHTMLChildren(_root);
+		_m14 = child(_root);
+		_b = bag15(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14);
+		__s.refFields = _rm$3;
+	} else {
+		{
+			const _v = props.id;
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = [
+				"vx-stack",
+				"vx-cameraview",
+				props.className
+			];
+			if (_b.b !== _v) _b.b = _v;
+		}
+		_b.c = snapshotSpread(layoutChildProps(props, props.style));
+		{
+			const _v = props.accessibilityRole;
+			if (_b.d !== _v) _b.d = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		_b.n = bindSignalHostPropSources(__s, _b.n, _b.m, [
+			[
+				false,
+				"id",
+				_b.a
+			],
+			[
+				false,
+				"className",
+				_b.b
+			],
+			[true, _b.c],
+			[
+				false,
+				"role",
+				_b.d
+			],
+			[
+				false,
+				"aria-label",
+				_b.e
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.f
+			],
+			[
+				false,
+				"aria-description",
+				_b.g
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.h
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.i
+			],
+			[
+				false,
+				"aria-selected",
+				_b.j
+			],
+			[
+				false,
+				"aria-checked",
+				_b.k
+			],
+			[
+				false,
+				"aria-live",
+				_b.l
+			]
+		], "b:323f41d4", true);
+	}
+	{
+		const __ifCondition = active;
+		ifBlock(__s, 1, _b.m, __ifCondition, __then$0, null, _b.o, __ifCondition ? [
+			el,
+			facing,
+			props,
+			readyFired
+		] : void 0);
+	}
+});
+//#endregion
+export { CameraView };

package/dist/web/Card.web.tsrx.js

@@ -0,0 +1,73 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { __s, bag10, bag3, child, clone, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Card.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-card-header\"></div>");
+var _t$1 = /* @__PURE__ */ template("<div class=\"vx-card-footer\"></div>");
+var _t$2 = /* @__PURE__ */ template("<div><!><div class=\"vx-card-body\"></div><!></div>");
+function __then$0(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.header, "b:dc519a69", null, void 0, void 0, void 0, true);
+}
+function __then$4(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$1);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.footer, "b:b6594fd8", null, void 0, void 0, void 0, true);
+}
+var _rm$7 = [
+	"r",
+	"b",
+	"a"
+];
+var Card = /* @__PURE__ */ __s(function Card(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5, _m6, _m7;
+		const _root = clone(_t$2);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		const _el0 = child(_root);
+		_m5 = _el0;
+		_m6 = sibling(_el0, 2);
+		_m7 = sibling(_el0, 1);
+		_b = bag10(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6, _m7, null, void 0);
+		__s.refFields = _rm$7;
+	} else {
+		const _r = (e) => applyEscapeProps(e, props);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:f4037cad", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-card", props.className], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	{
+		const __ifCondition = props.header != null;
+		ifBlock(__s, 1, _b.a, __ifCondition, __then$0, null, _b.f, __ifCondition ? [props] : void 0);
+	}
+	_b.k = bindSignalChild(__s, _b.k, 2, _b.h, props.children, "b:cd506c3e", null, void 0, void 0, void 0, true);
+	{
+		const __ifCondition$ = props.footer != null;
+		ifBlock(__s, 3, _b.a, __ifCondition$, __then$4, null, _b.g, __ifCondition$ ? [props] : void 0);
+	}
+});
+//#endregion
+export { Card };

package/dist/web/Checkbox.web.tsrx.js

@@ -0,0 +1,89 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { __s, bag0, bag13, bag3, child, clone, delegateEvents, evt2e, evt2u, ifBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Checkbox.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click", "keydown"]);
+var _t$0 = /* @__PURE__ */ template("<span class=\"vx-checkbox-check\">✓</span>");
+var _t$1 = /* @__PURE__ */ template("<span class=\"vx-checkbox-label\"></span>");
+var _t$2 = /* @__PURE__ */ template("<div role=\"checkbox\"><div class=\"vx-checkbox\" aria-hidden=\"true\"><!></div><!></div>");
+var __event = (e, props, toggle) => {
+	if (props.disabled) return;
+	if (e.key === " " || e.key === "Enter") {
+		e.preventDefault();
+		toggle();
+	}
+};
+function __then$0(__props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		const _root = clone(_t$0);
+		_b = bag0(__s, _root);
+	}
+}
+function __then$2(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$1);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.label, "b:c9ae9d41", null, void 0, void 0, void 0, true);
+}
+var _rm$5 = [
+	"r",
+	"b",
+	"a"
+];
+var Checkbox = /* @__PURE__ */ __s(function Checkbox(props, __s, __extra) {
+	const toggle = () => props.onCheckedChange?.(!(props.checked ?? false));
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m9, _m10, _m11, _m12;
+		const _root = clone(_t$2);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$click", props.disabled ? void 0 : toggle);
+		_m9 = evt2e(_root, "$$keydown", __event, props, toggle);
+		const _el0 = child(_root);
+		_m10 = _el0;
+		_m11 = child(_el0);
+		_m12 = sibling(_el0, 1);
+		_b = bag13(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, void 0, void 0, _m9, _m10, _m11, _m12);
+		__s.refFields = _rm$5;
+	} else {
+		{
+			const _r = (e) => applyEscapeProps(e, props);
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.a, "$$click", props.disabled ? void 0 : toggle);
+		evt2u(_b.j, __event, props, toggle);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:e9b2a3c8", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-checked", props.checked ?? false, "b:a0baac3c", setAriaAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.a, "aria-disabled", props.disabled ?? void 0, "b:80966cea", setAriaAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-label", props.accessibilityLabel, "b:98f88ce1", setAriaAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "tabindex", props.disabled ? void 0 : 0, "b:7049bb49", setPlainAttribute);
+	_b.h = updateFreshClassName([
+		"vx-checkbox-row",
+		props.checked ? "vx-checkbox--on" : void 0,
+		props.disabled ? "vx-checkbox--disabled" : void 0,
+		props.className
+	], _b.h, _b.a);
+	{
+		const _v = props.style;
+		if (_b.i !== _v) {
+			setStyle(_b.a, _v, _b.i);
+			_b.i = _v;
+		}
+	}
+	ifBlock(__s, 1, _b.k, props.checked, __then$0, null, _b.l);
+	{
+		const __ifCondition = props.label != null;
+		ifBlock(__s, 2, _b.a, __ifCondition, __then$2, null, _b.m, __ifCondition ? [props] : void 0);
+	}
+});
+//#endregion
+export { Checkbox };

package/dist/web/CheckboxGroup.web.tsrx.js

@@ -0,0 +1,79 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { Checkbox } from "./Checkbox.web.tsrx.js";
+import { __s, bag7, child, clone, componentSlotVoid, hookSlots, mapSlot, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, template, useState } from "octane";
+import { bindSignalAttribute, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/CheckboxGroup.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div role=\"group\"><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _key$0 = (opt) => opt.value;
+function __item$1(opt, __s, __extra) {
+	const __block = __s.block;
+	const selected = __extra[0];
+	const props = __extra[1];
+	const toggle = __extra[2];
+	componentSlotVoid(__s, 0, __block.parentNode, Checkbox, {
+		"checked": selected.includes(opt.value),
+		"disabled": props.disabled || opt.disabled,
+		"label": opt.label,
+		"onCheckedChange": (on) => toggle(opt.value, on)
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:30848cec");
+}
+var _rm$4 = [
+	"r",
+	"b",
+	"a"
+];
+var CheckboxGroup = /* @__PURE__ */ __s(function CheckboxGroup(props, __s, __extra) {
+	let __mapItems;
+	let __mapMethod;
+	const [internal, setInternal] = useState(props.defaultValue ?? [], _hs$ + 0);
+	const controlled = props.value !== void 0;
+	const selected = controlled ? props.value : internal;
+	const setSelected = (next) => {
+		if (!controlled) setInternal(next);
+		props.onValueChange?.(next);
+	};
+	const toggle = (v, on) => setSelected(on ? [...selected, v] : selected.filter((x) => x !== v));
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m6;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m6 = child(_root);
+		_b = bag7(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, _m6);
+		__s.refFields = _rm$4;
+	} else {
+		const _r = (e) => applyEscapeProps(e, props);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:8d588be2", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-label", props.accessibilityLabel, "b:4442735b", setAriaAttribute);
+	_b.e = updateFreshClassName([
+		"vx-checkbox-group",
+		props.horizontal ? "vx-checkbox-group--row" : void 0,
+		props.className
+	], _b.e, _b.a);
+	{
+		const _v = props.style;
+		if (_b.f !== _v) {
+			setStyle(_b.a, _v, _b.f);
+			_b.f = _v;
+		}
+	}
+	mapSlot(__s, 1, _b.a, (__mapItems = props.options, __mapMethod = __mapItems.map, __mapItems), __mapMethod, (opt) => createElementFromConfig("c:a63f71ef", Checkbox, {
+		key: opt.value,
+		checked: selected.includes(opt.value),
+		disabled: props.disabled || opt.disabled,
+		label: opt.label,
+		onCheckedChange: (on) => toggle(opt.value, on)
+	}), _key$0, __item$1, 8 | (Checkbox.$$singleRoot === true ? 2 : 0), [
+		selected,
+		props,
+		toggle
+	], _b.g, 1);
+});
+//#endregion
+export { CheckboxGroup };

package/dist/web/Chip.web.tsrx.js

@@ -0,0 +1,64 @@
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { bag7, child, clone, componentSlotVoid, createElement, drainFrag, markChildrenBlock, sibling, template } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/Chip.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!><!>", 0, 1);
+var __childrenBody = {};
+var Chip = function Chip(props, __s, __extra) {
+	const __block = __s.block;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1, _m4;
+			const _root = clone(_t$0);
+			_m0 = __block.parentNode;
+			const _el0 = child(_root);
+			_m1 = _el0;
+			_m4 = sibling(_el0, 1);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag7(__s, null, _m0, _m1, null, void 0, _m4, null, void 0);
+		}
+		{
+			const _v = props.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true);
+			_b.d = _v;
+		}
+		{
+			const _v = props.onRemove ? createElement("span", {
+				className: "vx-chip-remove",
+				role: "button",
+				"aria-label": "Remove",
+				onClick: (e) => {
+					e.stopPropagation();
+					if (!props.disabled) props.onRemove?.();
+				}
+			}, "✕") : null;
+			_b.f = textHoleUpdate(__s, 2, _b.a, _v, _b.f, _b.g, _b.e, true);
+			_b.g = _v;
+		}
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+		"id": props.id,
+		"className": [
+			"vx-chip",
+			props.selected ? "vx-chip--on" : void 0,
+			props.disabled ? "vx-chip--disabled" : void 0,
+			props.className
+		],
+		"style": props.style,
+		"disabled": props.disabled,
+		"onPress": props.onSelect,
+		"accessibilityLabel": props.accessibilityLabel,
+		"accessibilityState": {
+			selected: props.selected,
+			disabled: props.disabled
+		},
+		"ios": props.ios,
+		"android": props.android,
+		"web": props.web,
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:2d23d603");
+};
+//#endregion
+export { Chip };