@octane-xplat/ui 0.6.0 → 0.7.1

package/src/PinInput.macos.tsrx

@@ -0,0 +1,46 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { PinInputProps, TextInputHandle } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './text-controls.macos.tsrx';
+
+/** PinInput — a row of single-character cells that auto-advance on entry.
+ *  `onComplete` fires when every cell is filled. `secure` masks each cell. */
+export function PinInput(props: PinInputProps) @{
+	const length = props.length ?? 4;
+	const [internal, setInternal] = useState('');
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+	const handles: (TextInputHandle | null)[] = [];
+
+	const setValue = (next: string) => {
+		const clipped = next.slice(0, length);
+		if (!controlled) setInternal(clipped);
+		props.onValueChange?.(clipped);
+		if (clipped.length === length) props.onComplete?.(clipped);
+	};
+
+	const cellValue = (i: number) => value[i] ?? '';
+
+	const enter = (i: number, text: string) => {
+		const ch = text.slice(-1);
+		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		setValue(next);
+		if (ch && i < length - 1) handles[i + 1]?.focus();
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} flexDirection="row" className={cx('vx-pininput', props.disabled && 'vx-pininput--disabled', props.className)} style={props.style}>
+		@for (const i of Array.from({ length }, (_, k) => k); key i) {
+			<TextInput
+				className="vx-pininput-cell"
+				keyboardType="number"
+				secure={props.secure}
+				editable={!props.disabled}
+				value={cellValue(i)}
+				onChange={(text: string) => enter(i, text)}
+				bind={(h: TextInputHandle) => { handles[i] = h; }}
+			/>
+		}
+	</flexboxlayout>
+}

package/src/PinInput.tsrx

@@ -0,0 +1,46 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { PinInputProps, TextInputHandle } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.tsrx';
+
+/** PinInput — a row of single-character cells that auto-advance on entry.
+ *  `onComplete` fires when every cell is filled. `secure` masks each cell. */
+export function PinInput(props: PinInputProps) @{
+	const length = props.length ?? 4;
+	const [internal, setInternal] = useState('');
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+	const handles: (TextInputHandle | null)[] = [];
+
+	const setValue = (next: string) => {
+		const clipped = next.slice(0, length);
+		if (!controlled) setInternal(clipped);
+		props.onValueChange?.(clipped);
+		if (clipped.length === length) props.onComplete?.(clipped);
+	};
+
+	const cellValue = (i: number) => value[i] ?? '';
+
+	const enter = (i: number, text: string) => {
+		const ch = text.slice(-1);
+		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		setValue(next);
+		if (ch && i < length - 1) handles[i + 1]?.focus();
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} flexDirection="row" className={cx('vx-pininput', props.disabled && 'vx-pininput--disabled', props.className)} style={props.style}>
+		@for (const i of Array.from({ length }, (_, k) => k); key i) {
+			<TextInput
+				className="vx-pininput-cell"
+				keyboardType="number"
+				secure={props.secure}
+				editable={!props.disabled}
+				value={cellValue(i)}
+				onChange={(text: string) => enter(i, text)}
+				bind={(h: TextInputHandle) => { handles[i] = h; }}
+			/>
+		}
+	</flexboxlayout>
+}

package/src/PinInput.web.tsrx

@@ -0,0 +1,45 @@
+import { useState } from 'octane';
+import type { PinInputProps, TextInputHandle } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.web.tsrx';
+
+/** PinInput — a row of single-character cells that auto-advance on entry.
+ *  `onComplete` fires when every cell is filled. `secure` masks each cell. */
+export function PinInput(props: PinInputProps) @{
+	const length = props.length ?? 4;
+	const [internal, setInternal] = useState('');
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+	const handles: (TextInputHandle | null)[] = [];
+
+	const setValue = (next: string) => {
+		const clipped = next.slice(0, length);
+		if (!controlled) setInternal(clipped);
+		props.onValueChange?.(clipped);
+		if (clipped.length === length) props.onComplete?.(clipped);
+	};
+
+	const cellValue = (i: number) => value[i] ?? '';
+
+	const enter = (i: number, text: string) => {
+		const ch = text.slice(-1);
+		const next = (value.slice(0, i) + ch + value.slice(i + 1)).slice(0, length);
+		setValue(next);
+		if (ch && i < length - 1) handles[i + 1]?.focus();
+	};
+
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-pininput', props.disabled ? 'vx-pininput--disabled' : undefined, props.className]} style={props.style} role="group">
+		{Array.from({ length }, (_, i) => (
+			<TextInput
+				key={i}
+				className="vx-pininput-cell"
+				keyboardType="number"
+				secure={props.secure}
+				editable={!props.disabled}
+				value={cellValue(i)}
+				onChange={(text: string) => enter(i, text)}
+				bind={(h: TextInputHandle) => { handles[i] = h; }}
+			/>
+		))}
+	</div>
+}

package/src/Popover.macos.tsrx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { PopoverProps } from './props'
+import { cx } from './cx'
+
+export function Popover(props: PopoverProps) @{
+	@if (props.open) {
+		<flexboxlayout flexDirection="column" className={cx('vx-popover', props.className)} style={props.style}>
+			{props.children}
+		</flexboxlayout>
+	}
+}

package/src/Popover.tsrx

@@ -0,0 +1,157 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef, useState } from 'octane';
+import { GridLayout } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { PopoverProps } from './props';
+import { applyNativeProps } from './platformProps';
+import { cx } from './cx';
+import { positionPopover, type PopoverPosition } from './popover-position';
+import { applyThemeClasses, useThemeScheme } from './theme/theme-scheme';
+import { rootLayoutFor } from './root-layout.mobile';
+
+function PopoverLayer(props: PopoverProps & { anchorView: any }) @{
+	const panelRef = useRef<any>(null);
+	const [position, setPosition] = useState<PopoverPosition | null>(null);
+	const [settled, setSettled] = useState(false);
+	const update = () => {
+		const anchor = props.anchorView;
+		const coordinateRoot = anchor?.page?.content;
+		if (!anchor?.getLocationRelativeTo || !coordinateRoot?.getActualSize) return;
+		const point = anchor.getLocationRelativeTo(coordinateRoot);
+		const anchorSize = anchor.getActualSize();
+		const panelSize = panelRef.current?.getActualSize?.();
+		if (!point || !anchorSize) return;
+		const next = positionPopover(
+			{
+				left: point.x,
+				top: point.y,
+				width: anchorSize.width,
+				height: anchorSize.height,
+			},
+			{ width: panelSize?.width ?? 0, height: panelSize?.height ?? 0 },
+			{
+				left: 0,
+				top: 0,
+				width: coordinateRoot.getActualSize().width,
+				height: coordinateRoot.getActualSize().height,
+			},
+			props.placement ?? 'bottom',
+		);
+
+		setPosition((current) =>
+			current?.left === next.left &&
+			current?.top === next.top &&
+			current?.placement === next.placement
+				? current
+				: next,
+		);
+
+		if (panelSize?.width > 0 && panelSize?.height > 0) setSettled(true);
+	};
+
+	useEffect(() => {
+		const anchor = props.anchorView;
+		if (!props.open || !anchor) return;
+		const listeners: { view: any; event: string; handler: () => void }[] = [];
+		let view = anchor;
+		while (view) {
+			for (const event of ['layoutChanged', 'scroll']) {
+				const handler = () => update();
+				view.on?.(event, handler);
+				listeners.push({ view, event, handler });
+			}
+
+			view = view.parent;
+		}
+
+		update();
+		return () => {
+			for (const listener of listeners) {
+				listener.view.off?.(listener.event, listener.handler);
+			}
+		};
+	}, [props.open, props.anchorView, props.placement, props.children, props.style]);
+
+	useEffect(() => {
+		applyNativeProps(panelRef.current, props);
+	}, [props.ios, props.android, settled]);
+
+	const dismiss = () => props.onDismiss?.();
+
+	<absolutelayout
+		width="100%"
+		height="100%"
+		className={cx('vx-popover-layer', useThemeScheme() === 'dark' && 'ns-dark')}
+	>
+		{(props.dismissOnOutsideTap ?? true) && <gridlayout
+			width="100%"
+			height="100%"
+			backgroundColor={"transparent" as any}
+			className="vx-popover-backdrop"
+			onTap={dismiss}
+		/>}
+		<gridlayout
+			ref={panelRef}
+			left={position?.left ?? 0}
+			top={position?.top ?? 0}
+			opacity={settled ? 1 : 0}
+			className={cx('vx-popover', props.className)}
+			style={props.style}
+			onLoaded={update}
+			onLayoutChanged={update}
+		>
+			{props.children}
+		</gridlayout>
+	</absolutelayout>
+}
+
+/** Positions popover content in a layer on the current page's RootLayout —
+ *  the universal driver has no createPortal, so this is imperative like
+ *  Overlay: a transparent host opened on the RootLayout enclosing the
+ *  anchor, with PopoverLayer positioning itself over the anchor's rect. */
+export function Popover(props: PopoverProps) @{
+	const shown = useRef<{ host: any; root: any; unbindTheme?: () => void } | null>(null);
+
+	useEffect(() => {
+		const cur = shown.current;
+		if (!props.open) {
+			if (!cur) return;
+			shown.current = null;
+			cur.unbindTheme?.();
+			const owner = cur.host.parent as any;
+			if (owner?.hasChild?.(cur.host)) {
+				owner.close(cur.host).then(
+					() => cur.root.unmount?.(),
+					(error: any) => { console.error('[Popover] close failed', error); cur.root.unmount?.(); },
+				);
+			} else cur.root.unmount?.();
+
+			return;
+		}
+
+		const anchor = props.anchor?.current;
+		const rl = rootLayoutFor(anchor);
+		if (!anchor || !rl) return;
+
+		if (cur) {
+			cur.root.render(PopoverLayer as unknown as UniversalComponent, { ...props, anchorView: anchor });
+			return;
+		}
+
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, 'vx-popover-host');
+		host.horizontalAlignment = 'stretch';
+		host.verticalAlignment = 'stretch';
+		const root = createNativeScriptRoot(host);
+		shown.current = { host, root, unbindTheme };
+		root.render(PopoverLayer as unknown as UniversalComponent, { ...props, anchorView: anchor });
+		rl.open(host).catch((error: unknown) => {
+			if (shown.current?.host === host) shown.current = null;
+			console.error('[Popover] open failed', error);
+			root.unmount?.();
+		});
+	}, [props.open, props.children, props.placement, props.className, props.style, props.dismissOnOutsideTap]);
+
+	<></>
+}

package/src/Popover.web.tsrx

@@ -0,0 +1,109 @@
+import { createPortal, useEffect, useRef, useState } from 'octane';
+import { useThemeScheme } from './theme/theme-scheme';
+import type { PopoverProps } from './props';
+import { cx } from './cx';
+import { positionPopover } from './popover-position';
+
+type Position = { left: number; top: number };
+
+function PopoverLayer(props: PopoverProps & { anchorElement: any }) @{
+	const dark = useThemeScheme() === 'dark';
+	const panelRef = useRef<any>(null);
+	const [position, setPosition] = useState<Position | null>(null);
+	const update = () => {
+		const anchor = props.anchorElement;
+		if (!anchor?.getBoundingClientRect) return;
+		const anchorRect = anchor.getBoundingClientRect();
+		const panelRect = panelRef.current?.getBoundingClientRect?.();
+		const placed = positionPopover(
+			{
+				left: anchorRect.left,
+				top: anchorRect.top,
+				width: anchorRect.width,
+				height: anchorRect.height,
+			},
+			{ width: panelRect?.width ?? 0, height: panelRect?.height ?? 0 },
+			{ left: 0, top: 0, width: window.innerWidth, height: window.innerHeight },
+			props.placement ?? 'bottom',
+		);
+
+		setPosition((current) =>
+			current?.left === placed.left && current?.top === placed.top
+				? current
+				: placed,
+		);
+	};
+
+	useEffect(() => {
+		if (!props.open || !props.anchorElement?.getBoundingClientRect) {
+			setPosition(null);
+			return;
+		}
+
+		update();
+		window.addEventListener('resize', update);
+		window.addEventListener('scroll', update, true);
+		const observer = typeof ResizeObserver === 'undefined' || !panelRef.current
+			? null
+			: new ResizeObserver(update);
+
+		if (observer && panelRef.current) observer.observe(panelRef.current);
+		return () => {
+			window.removeEventListener('resize', update);
+			window.removeEventListener('scroll', update, true);
+			observer?.disconnect();
+		};
+	}, [props.open, props.anchorElement, props.placement, props.children, position === null]);
+
+	const stopPointer = (event: PointerEvent) => event.stopPropagation();
+	const dismiss = (event: MouseEvent) => {
+		event.preventDefault();
+		event.stopPropagation();
+		props.onDismiss?.();
+	};
+
+	@if (props.open && position) {
+		<>{createPortal(
+		<div
+			className={cx('vx-popover-layer', dark && 'dark')}
+			style={{ position: 'fixed', inset: 0, zIndex: 1000, pointerEvents: 'none' }}
+		>
+			{(props.dismissOnOutsideTap ?? true) && <div
+				className="vx-popover-backdrop"
+				style={{ position: 'fixed', inset: 0, zIndex: 0, pointerEvents: 'auto' }}
+				onPointerDown={stopPointer}
+				onClick={dismiss}
+			/>}
+			<div
+				ref={panelRef}
+				className={cx('vx-popover', props.className)}
+				style={{
+					...props.style,
+					position: 'fixed',
+					top: position.top,
+					left: position.left,
+					zIndex: 1,
+					pointerEvents: 'auto',
+				}}
+				{...props.web}
+			>
+				{props.children}
+			</div>
+			</div>,
+			document.body,
+		)}</>
+	}
+}
+
+/** Positions a body portal from its anchor and dismisses on outside taps. */
+export function Popover(props: PopoverProps) @{
+	const [anchorElement, setAnchorElement] = useState<any>(null);
+	useEffect(() => {
+		const next = props.anchor?.current ?? null;
+		if (next !== anchorElement) setAnchorElement(next);
+	}, [props.anchor, props.open, anchorElement]);
+
+	@if (props.open && anchorElement) {
+		<PopoverLayer {...props} anchorElement={anchorElement} />
+	}
+}

package/src/Pressable.macos.tsrx

@@ -0,0 +1,19 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { PressableProps } from './props'
+import { cx } from './cx'
+import { layoutChildProps } from './layout-child'
+
+export function Pressable(props: PressableProps) @{
+	<flexboxlayout
+		{...layoutChildProps(props)}
+		id={props.id}
+		flexDirection="column"
+		className={cx('vx-pressable', props.className)}
+		style={props.style}
+		onTap={props.disabled ? undefined : props.onPress}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : undefined)}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Pressable.tsrx

@@ -0,0 +1,37 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { PressableProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
+import { layoutChildProps } from './layout-child';
+import { usePan } from './pan.tsrx';
+/** flexboxlayout, not contentview — ContentView is single-child: the driver
+ *  assigns each child to `.content`, so every sibling but the last was
+ *  silently dropped. Column flex matches View's shape (and the web div);
+ *  tap/longPress are gesture events, they attach to any view. */
+export function Pressable(props: PressableProps) @{
+	<flexboxlayout
+		ref={(v: any) => { if (v) { applyEscapeProps(v, props); props.bind?.(v); } }}
+		id={props.id}
+		{...layoutChildProps(props)}
+		className={cx('vx-pressable', props.className)}
+		style={{ ...props.style, ...(props.hitSlop ? { margin: -props.hitSlop, padding: props.hitSlop } : {}) }}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+		onPan={usePan(props.disabled ? undefined : props.onPan)}
+		onSwipe={props.disabled ? undefined : props.onSwipe}
+		onTap={props.disabled ? undefined : props.onPress}
+		onLongPress={props.disabled ? undefined : props.onLongPress}
+		onDoubleTap={props.disabled ? undefined : props.onDoublePress}
+		onTouch={props.disabled ? undefined : (e: any) => {
+			if (e.action === 'down') props.onPressIn?.();
+			else if (e.action === 'up' || e.action === 'cancel') props.onPressOut?.();
+		}}
+	>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Pressable.web.tsrx

@@ -0,0 +1,45 @@
+import { useRef } from 'octane';
+import type { PressableProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { layoutChildProps } from './layout-child.web';
+import { usePan } from './pan.web.tsrx';
+
+export function Pressable(props: PressableProps) @{
+	const el = useRef<HTMLElement | null>(null);
+	let timer: ReturnType<typeof setTimeout> | null = null;
+
+	usePan(el, props.disabled ? undefined : props.onPan);
+
+	const cancel = () => { if (timer !== null) { clearTimeout(timer); timer = null; } };
+
+	// Long-press parity with native: ~500ms hold over pointerdown/up.
+	const down = () => {
+		if (props.disabled || !props.onLongPress) return;
+		cancel();
+		timer = setTimeout(() => { timer = null; props.onLongPress?.(); }, 500);
+	};
+
+	<div
+		ref={(e: any) => { el.current = e; if (e) { applyEscapeProps(e, props); props.bind?.(e); } }}
+		id={props.id}
+		className={['vx-pressable', props.className]}
+		{...layoutChildProps(props, { ...props.style, ...(props.hitSlop ? { margin: -props.hitSlop, padding: props.hitSlop } : {}) })}
+		role={props.accessibilityRole ?? 'button'}
+		aria-label={props.accessibilityLabel}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled ?? props.disabled ?? undefined}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+		aria-hidden={props.accessible === false ? true : undefined}
+		onClick={props.disabled ? undefined : props.onPress}
+		onDoubleClick={props.disabled ? undefined : props.onDoublePress}
+		onPointerDown={(e: any) => { if (!props.disabled) { props.onPressIn?.(); down(); } }}
+		onPointerUp={() => { if (!props.disabled) props.onPressOut?.(); cancel(); }}
+		onPointerLeave={() => { if (!props.disabled) props.onPressOut?.(); cancel(); }}
+		onPointerCancel={() => { if (!props.disabled) props.onPressOut?.(); cancel(); }}
+	>
+		{props.children}
+	</div>
+}

package/src/ProgressGroup.macos.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { ProgressGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Meter } from './macos-extras.macos.tsrx';
+
+/** ProgressGroup — stacked labeled Meter rows. */
+export function ProgressGroup(props: ProgressGroupProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-progressgroup', props.className)} style={props.style}>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout className="vx-progressgroup-row">
+				<Meter value={item.value} max={item.max} accessibilityLabel={item.label} />
+				{item.label != null ? <label className="vx-progressgroup-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/ProgressGroup.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ProgressGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Meter } from './Meter.tsrx';
+
+/** ProgressGroup — stacked labeled Meter rows. */
+export function ProgressGroup(props: ProgressGroupProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-progressgroup', props.className)} style={props.style}>
+		@for (const item of props.items; key item.key) {
+			<flexboxlayout className="vx-progressgroup-row">
+				<Meter value={item.value} max={item.max} accessibilityLabel={item.label} />
+				{item.label != null ? <label className="vx-progressgroup-label" text={item.label} /> : null}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/ProgressGroup.web.tsrx

@@ -0,0 +1,15 @@
+import type { ProgressGroupProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Meter } from './Meter.web.tsrx';
+
+/** ProgressGroup — stacked labeled Meter rows. */
+export function ProgressGroup(props: ProgressGroupProps) @{
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-progressgroup', props.className]} style={props.style} role="group">
+		{props.items.map((item: any) => (
+			<div key={item.key} className="vx-progressgroup-row">
+				<Meter value={item.value} max={item.max} accessibilityLabel={item.label} />
+				{item.label != null ? <span className="vx-progressgroup-label">{item.label}</span> : null}
+			</div>
+		))}
+	</div>
+}

package/src/RadioGroup.macos.tsrx

@@ -0,0 +1,50 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { RadioGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn radio group — dot options in a column (or row with
+ *  `horizontal`). Selecting an option calls `onValueChange`. */
+export function RadioGroup(props: RadioGroupProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal ? 'row' : 'column'}
+		className={cx('vx-radio-group', props.horizontal && 'vx-radio-group--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		{props.options.map((opt: any) => {
+			const selected = props.value === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<flexboxlayout
+					key={opt.value}
+					flexDirection="row"
+					alignItems="center"
+					gap={8}
+					className={cx('vx-radio-row', selected && 'vx-radio--on', disabled && 'vx-radio--disabled')}
+					onTap={disabled ? undefined : () => props.onValueChange?.(opt.value)}
+				>
+					{/* circle/dot metrics are CSS on web — inline them here
+					   (AppKit has no style layer); keep in step with .vx-radio */}
+					<flexboxlayout
+						className="vx-radio"
+						alignItems="center"
+						justifyContent="center"
+						style={{
+							width: 18,
+							height: 18,
+							borderWidth: 1,
+							borderColor: selected ? '#171717' : '#d4d4d4',
+							borderRadius: 9,
+						}}
+					>
+						{selected ? <flexboxlayout className="vx-radio-dot" style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: '#171717' }} /> : null}
+					</flexboxlayout>
+					{opt.label != null ? <label className="vx-radio-label" text={opt.label} /> : null}
+				</flexboxlayout>
+			);
+		})}
+	</flexboxlayout>
+}

package/src/RadioGroup.tsrx

@@ -0,0 +1,34 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { RadioGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn radio group — dot options in a column (or row with
+ *  `horizontal`). Selecting an option calls `onValueChange`. */
+export function RadioGroup(props: RadioGroupProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal ? 'row' : 'column'}
+		className={cx('vx-radio-group', props.horizontal && 'vx-radio-group--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		{props.options.map((opt: any) => {
+			const selected = props.value === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<flexboxlayout
+					key={opt.value}
+					className={cx('vx-radio-row', selected && 'vx-radio--on', disabled && 'vx-radio--disabled')}
+					onTap={disabled ? undefined : () => props.onValueChange?.(opt.value)}
+				>
+					<flexboxlayout className="vx-radio">
+						{selected ? <flexboxlayout className="vx-radio-dot" /> : null}
+					</flexboxlayout>
+					{opt.label != null ? <label className="vx-radio-label" text={opt.label} /> : null}
+				</flexboxlayout>
+			);
+		})}
+	</flexboxlayout>
+}