@octane-xplat/ui 0.6.0 → 0.7.1

package/src/Separator.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { SeparatorProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Separator — hairline rule. `orientation` picks which axis it spans;
+ *  thickness/color come from the app's `vx-separator` styling. */
+export function Separator(props: SeparatorProps) @{
+	const vertical = props.orientation === 'vertical';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-separator', vertical ? 'vx-separator--v' : 'vx-separator--h', props.className)}
+		style={props.style}
+	/>
+}

package/src/Separator.web.tsrx

@@ -0,0 +1,17 @@
+import type { SeparatorProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Separator — hairline rule. `orientation` picks which axis it spans;
+ *  thickness/color come from the app's `vx-separator` styling. */
+export function Separator(props: SeparatorProps) @{
+	const vertical = props.orientation === 'vertical';
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		role="separator"
+		aria-orientation={vertical ? 'vertical' : 'horizontal'}
+		className={['vx-separator', vertical ? 'vx-separator--v' : 'vx-separator--h', props.className]}
+		style={props.style}
+	/>
+}

package/src/Sheet.macos.tsrx

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

package/src/Sheet.tsrx

@@ -0,0 +1,122 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef } from 'octane';
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { SheetProps } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+import { rootLayoutFor } from './root-layout.mobile';
+import { attachSheetDetents } from './sheet-detents';
+import { bindBottomInsetToKeyboard } from './keyboard-inset.mobile';
+import { attachTapToBlur } from './tap-to-blur.mobile';
+
+function SheetBody(props: { children?: any }) @{
+	<>{props.children}</>
+}
+
+/** In-window bottom sheet — a GridLayout host opened on the RootLayout
+ *  enclosing the declaring component (rootLayoutFor sentinel walk), with a
+ *  dedicated Octane root. Slide-in/out via RootLayout open animations. */
+export function Sheet(props: SheetProps) @{
+	const sentinel = useRef<any>(null);
+	const shown = useRef<{
+		host: GridLayout;
+		root: any;
+		unbindTheme?: () => void;
+		unbindKeyboard?: () => void;
+		programmatic?: boolean;
+		detach?: () => void;
+	} | null>(null);
+
+	useEffect(() => {
+		const cur = shown.current;
+		if (!props.open) {
+			if (!cur) return;
+			shown.current = null;
+			cur.programmatic = true;
+			cur.unbindTheme?.();
+			cur.unbindKeyboard?.();
+			cur.root.unmount?.();
+			const owner = cur.host.parent as any;
+			if (owner?.hasChild?.(cur.host)) {
+				owner.close(cur.host).catch((error: unknown) => {
+					console.error('[Sheet] close failed', error);
+				});
+			}
+
+			return;
+		}
+
+		const rl = rootLayoutFor(sentinel.current);
+		if (!rl) return;
+
+		if (cur) {
+			cur.root.render(SheetBody as unknown as UniversalComponent, { children: props.children });
+			return;
+		}
+
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, cx('vx-sheet-host', props.className));
+		host.horizontalAlignment = 'stretch';
+		host.verticalAlignment = 'bottom';
+		if (props.style) Object.assign(host.style, props.style);
+		Object.assign(host, isIOS ? props.ios : isAndroid ? props.android : undefined);
+		const root = createNativeScriptRoot(host);
+		// Detents: the controller owns enter/slide-out — RootLayout's open
+		// animation always lands translateY at 0, which would fight the
+		// detent offsets, so it's skipped while detents are attached.
+		const detents = props.detents?.length
+			? attachSheetDetents(host, props.detents, () => {
+					const owner = host.parent as any;
+					owner?.close?.(host)?.catch?.((error: unknown) => {
+						console.error('[Sheet] close failed', error);
+					});
+				})
+			: null;
+
+		// Lift the host above the software keyboard (todo 'Add' row inside a
+		// demo sheet is bottom-anchored and was covered on iOS).
+		const unbindKeyboard = bindBottomInsetToKeyboard(host);
+		attachTapToBlur(host);
+		const opened = { host, root, unbindTheme, unbindKeyboard, programmatic: false, detach: detents?.detach };
+		shown.current = opened;
+		root.render(SheetBody as unknown as UniversalComponent, { children: props.children });
+		host.on('closed', () => {
+			if (shown.current === opened) shown.current = null;
+			opened.detach?.();
+			opened.unbindKeyboard?.();
+			opened.unbindTheme?.();
+			opened.root.unmount?.();
+			// 'closed' fires for programmatic closes too — onDismiss only when
+			// the platform dismissed it (shade tap or detent drag-out).
+			if (!opened.programmatic) props.onDismiss?.();
+		});
+
+		rl.open(host, {
+			...(props.shadeCover ?? true)
+				? { shadeCover: { opacity: 0.4, tapToClose: true } }
+				: {},
+			...(detents
+				? {}
+				: {
+						animation: {
+							enterFrom: { translateY: 400, duration: 250 },
+							exitTo: { translateY: 400, duration: 200 },
+						},
+					}),
+		})
+			.then(() => detents?.enter())
+			.catch((error: unknown) => {
+				if (shown.current === opened) shown.current = null;
+				opened.unbindKeyboard?.();
+				opened.unbindTheme?.();
+				opened.root.unmount?.();
+				console.error('[Sheet] open failed', error);
+			});
+	}, [props.open, props.children, props.className, props.style, props.shadeCover, props.ios, props.android]);
+
+	// Zero-size sentinel — the sheet resolves its owning RootLayout from the
+	// declaring component's ancestry, not getRootLayout() (first-mounted shell).
+	<stacklayout ref={(v: any) => { sentinel.current = v; }} style={{ width: 0, height: 0 }} />
+}

package/src/Sheet.web.tsrx

@@ -0,0 +1,56 @@
+import { createPortal, useEffect, useRef } from 'octane';
+import type { SheetProps } from './props';
+import { cx } from './cx';
+import { useThemeScheme } from './theme/theme-scheme';
+import { normalizeDetents } from './sheet-snap';
+import { attachSheetDetents } from './sheet-detents.web';
+
+/** In-window bottom sheet — portal layer with a backdrop and a bottom-
+ *  anchored panel. Same vocabulary as the native RootLayout sheet.
+ *  `detents` adds a self-drawn grabber + drag-to-snap via
+ *  sheet-detents.web; the drag-dismiss path reports through `onDismiss`
+ *  like a shade tap. */
+export function Sheet(props: SheetProps) @{
+	const dark = useThemeScheme() === 'dark';
+	const panel = useRef<HTMLElement | null>(null);
+	const dismiss = useRef(props.onDismiss);
+	dismiss.current = props.onDismiss;
+
+	const detents = normalizeDetents(props.detents);
+	const maxDetent = detents.length ? detents[detents.length - 1] : 0;
+	// Inline arrays re-identify every render — dep on the normalized value.
+	const detentsKey = detents.join(',');
+
+	useEffect(() => {
+		const el = panel.current;
+		if (!props.open || !el || !detents.length) return;
+
+		const ctl = attachSheetDetents(el, detents, () => dismiss.current?.());
+		return () => ctl.detach();
+	}, [props.open, detentsKey]);
+
+	@if (props.open) {
+		<>{createPortal(
+			<div className={cx('vx-sheet-layer', dark && 'dark')}>
+				{(props.shadeCover ?? true) && <div className="vx-sheet-backdrop" onClick={props.onDismiss} />}
+				<div
+					ref={(el: any) => { panel.current = el; }}
+					className={cx('vx-sheet', detents.length && 'vx-sheet-detents', props.className)}
+					style={{
+						...props.style,
+						...(detents.length
+							// Size to the largest detent up front; the controller
+							// parks translateY per detent. transform hides the panel
+							// below the edge until attach slides it in.
+							? { height: `${maxDetent * 100}%`, transform: 'translateY(100%)' }
+							: {}),
+					}}
+					{...props.web}
+				>
+					{props.children}
+				</div>
+			</div>,
+			document.body,
+		)}</>
+	}
+}

package/src/Skeleton.macos.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { SkeletonProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Skeleton — placeholder block while content loads. Sizing via
+ *  `width`/`height` or the app's `vx-skeleton` styling. */
+export function Skeleton(props: SkeletonProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-skeleton', props.className)}
+		style={{ ...props.style, width: props.width, height: props.height }}
+	/>
+}

package/src/Skeleton.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { SkeletonProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Skeleton — placeholder block while content loads. Sizing via
+ *  `width`/`height` or the app's `vx-skeleton` styling. */
+export function Skeleton(props: SkeletonProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-skeleton', props.className)}
+		style={{ ...props.style, width: props.width, height: props.height }}
+	/>
+}

package/src/Skeleton.web.tsrx

@@ -0,0 +1,15 @@
+import type { SkeletonProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Skeleton — placeholder block while content loads. Sizing via
+ *  `width`/`height` or the app's `vx-skeleton` styling; pulse animation is
+ *  an app-level choice (no shared keyframes — unstyled contract). */
+export function Skeleton(props: SkeletonProps) @{
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		aria-busy="true"
+		className={['vx-skeleton', props.className]}
+		style={{ ...props.style, width: props.width, height: props.height }}
+	/>
+}

package/src/Slider.tsrx

@@ -0,0 +1,71 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useCallback, useEffect, useRef, useState } from 'octane';
+import type { PanEvent, SliderProps } from './props';
+import { cx } from './cx';
+import { useMeasure } from './useMeasure.tsrx';
+import { usePan } from './pan.tsrx';
+import { applyNativeProps } from './platformProps';
+import { nativeAccessibilityRole } from './escape-props';
+
+/** Self-drawn slider — grid host with track + fill + thumb, identical
+ *  pixels across targets. Drag anywhere on the widget adjusts value by
+ *  delta (no jump-to-tap v1). The platform widget (UISlider/SeekBar)
+ *  lives in `ui/ios` + `ui/android`. */
+export function Slider(props: SliderProps) @{
+	const measure = useMeasure();
+	const drag = useRef<{ value0: number } | null>(null);
+	const [dragValue, setDragValue] = useState<number | null>(null);
+
+	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;
+
+	// Stable ref identity — an inline ref closure re-fires ref(null)/ref(el)
+	// per render, which bounces useMeasure's setView and loops forever.
+	const host = useRef<any>(null);
+	const bindHost = useCallback((el: any) => {
+		host.current = el;
+		measure.bind(el);
+	}, []);
+
+	useEffect(() => {
+		applyNativeProps(host.current, props);
+	});
+
+	const onPan = usePan((e: PanEvent) => {
+		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);
+		}
+	});
+
+	<gridlayout
+		id={props.id}
+		className={cx('vx-slider', props.className)}
+		style={props.style}
+		accessibilityRole={nativeAccessibilityRole('adjustable') as any}
+		onPan={onPan}
+		ref={bindHost}
+	>
+		<flexboxlayout className="vx-slider-track" />
+		<flexboxlayout className="vx-slider-fill" horizontalAlignment="left" style={{ width: ratio * width }} />
+		<flexboxlayout
+			className="vx-slider-thumb"
+			horizontalAlignment="left"
+			style={{ marginLeft: Math.min(Math.max(ratio * width - 10, 0), Math.max(width - 20, 0)) }}
+		/>
+	</gridlayout>
+}

package/src/Slider.web.tsrx

@@ -0,0 +1,60 @@
+import { useRef, useState } from 'octane';
+import type { PanEvent, SliderProps } from './props';
+import { useMeasure } from './useMeasure.web.tsrx';
+import { usePan } from './pan.web.tsrx';
+import { applyWebProps } from './platformProps.web';
+
+/** Self-drawn slider — track + fill + thumb in a relative host, identical
+ *  pixels across targets. Drag anywhere on the widget adjusts value by
+ *  delta (no jump-to-tap v1). The platform widget (UISlider/SeekBar)
+ *  lives in `ui/ios` + `ui/android`. */
+export function Slider(props: SliderProps) @{
+	const host = useRef<HTMLElement | null>(null);
+	const measure = useMeasure();
+	const drag = useRef<{ value0: number } | null>(null);
+	const [dragValue, setDragValue] = useState<number | null>(null);
+
+	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;
+
+	usePan(host, (e: PanEvent) => {
+		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);
+		}
+	});
+
+	<div
+		id={props.id}
+		role="slider"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value}
+		aria-disabled={props.disabled ? true : undefined}
+		className={['vx-slider', props.className]}
+		style={props.style}
+		ref={(el: any) => {
+			host.current = el;
+			measure.bind(el);
+			applyWebProps(el, props.web);
+		}}
+	>
+		<div className="vx-slider-track" aria-hidden="true" />
+		<div className="vx-slider-fill" style={{ width: ratio * width }} aria-hidden="true" />
+		<div className="vx-slider-thumb" style={{ left: ratio * width }} aria-hidden="true" />
+	</div>
+}

package/src/Spacer.tsrx

@@ -0,0 +1,8 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { SpacerProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+
+export function Spacer(props: SpacerProps) @{
+	<stacklayout id={props.id} ref={(view: any) => applyEscapeProps(view, props)} flexGrow={1} className={cx('vx-spacer', props.className)} style={props.style} />
+}

package/src/Spacer.web.tsrx

@@ -0,0 +1,6 @@
+import type { SpacerProps } from './props';
+import { applyEscapeProps } from './escape-props';
+
+export function Spacer(props: SpacerProps) @{
+	<div id={props.id} className={['vx-spacer', props.className]} style={props.style} ref={(el: any) => applyEscapeProps(el, props)} />
+}

package/src/Stack.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { StackProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+
+export function Stack(props: StackProps) @{
+	<gridlayout
+		id={props.id}
+		ref={(view: any) => applyEscapeProps(view, props)}
+		rows="*"
+		columns="*"
+		className={cx('vx-stack', props.className)}
+		style={props.style}
+		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}
+	>
+		{props.children}
+	</gridlayout>
+}

package/src/Stack.web.tsrx

@@ -0,0 +1,22 @@
+import type { StackProps } from './props';
+import { applyEscapeProps } from './escape-props';
+
+export function Stack(props: StackProps) @{
+	<div
+		id={props.id}
+		className={['vx-stack', props.className]}
+		style={props.style}
+		ref={(el: any) => applyEscapeProps(el, props)}
+		role={props.accessibilityRole}
+		aria-label={props.accessibilityLabel}
+		aria-hidden={props.accessible === false ? true : undefined}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+	>
+		{props.children}
+	</div>
+}

package/src/Stepper.macos.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { StepperProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Stepper — numbered step row with connectors. Steps before `current`
+ *  show a done mark; tapping a non-disabled step calls `onStepChange`. */
+export function Stepper(props: StepperProps) @{
+	const current = props.current ?? 0;
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-stepper', props.className)}
+		style={props.style}
+	>
+		@for (const e of props.steps.map((step, i) => ({ step, i })); key e.step.key) {
+			<flexboxlayout className="vx-stepper-cell" flexDirection="row" alignItems="center">
+				{e.i > 0
+					? <flexboxlayout
+						className={cx('vx-stepper-line', (e.i <= current) && 'vx-stepper-line--done')}
+						style={{ width: 24, height: 1, backgroundColor: e.i <= current ? '#171717' : '#eaeaea' }}
+					/>
+					: null}
+				<flexboxlayout
+					flexDirection="row"
+					alignItems="center"
+					className={cx('vx-step', e.i < current && 'vx-step--done', e.i === current && 'vx-step--on', e.step.disabled && 'vx-step--disabled')}
+					onTap={e.step.disabled ? undefined : () => props.onStepChange?.(e.i)}
+				>
+					<label
+						className="vx-step-dot"
+						style={{
+							width: 24,
+							height: 24,
+							fontSize: 12,
+							textAlign: 'center',
+							borderWidth: 1,
+							borderRadius: 12,
+							...(e.i < current
+								? { backgroundColor: '#171717', borderColor: '#171717', color: '#fafafa' }
+								: { borderColor: e.i === current ? '#171717' : '#eaeaea', color: e.i === current ? '#171717' : '#666666' }),
+						}}
+						text={e.i < current ? '✓' : String(e.i + 1)}
+					/>
+					{e.step.label != null ? <label className="vx-step-label" style={{ marginLeft: 6 }} text={e.step.label} /> : null}
+				</flexboxlayout>
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Stepper.tsrx

@@ -0,0 +1,31 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { StepperProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Stepper — numbered step row with connectors. Steps before `current`
+ *  show a done mark; tapping a non-disabled step calls `onStepChange`. */
+export function Stepper(props: StepperProps) @{
+	const current = props.current ?? 0;
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-stepper', props.className)}
+		style={props.style}
+	>
+		@for (const e of props.steps.map((step, i) => ({ step, i })); key e.step.key) {
+			<flexboxlayout className="vx-stepper-cell">
+				{e.i > 0 ? <flexboxlayout className={cx('vx-stepper-line', (e.i <= current) && 'vx-stepper-line--done')} /> : null}
+				<flexboxlayout
+					className={cx('vx-step', e.i < current && 'vx-step--done', e.i === current && 'vx-step--on', e.step.disabled && 'vx-step--disabled')}
+					onTap={e.step.disabled ? undefined : () => props.onStepChange?.(e.i)}
+				>
+					<label className="vx-step-dot" text={e.i < current ? '✓' : String(e.i + 1)} />
+					{e.step.label != null ? <label className="vx-step-label" text={e.step.label} /> : null}
+				</flexboxlayout>
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Stepper.web.tsrx

@@ -0,0 +1,37 @@
+import type { StepperProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Stepper — numbered step row with connectors. Steps before `current`
+ *  show a done mark; tapping a non-disabled step calls `onStepChange`. */
+export function Stepper(props: StepperProps) @{
+	const current = props.current ?? 0;
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-stepper', props.className]}
+		style={props.style}
+		role="list"
+		aria-label={props.accessibilityLabel}
+	>
+		{props.steps.map((step: any, i: number) => {
+			const done = i < current;
+			const active = i === current;
+			return (
+				<div key={step.key} className="vx-stepper-cell" role="listitem" aria-current={active ? 'step' : undefined}>
+					{i > 0 ? <div className={['vx-stepper-line', done || active ? 'vx-stepper-line--done' : undefined]} aria-hidden="true" /> : null}
+					<div
+						className={['vx-step', done ? 'vx-step--done' : undefined, active ? 'vx-step--on' : undefined, step.disabled ? 'vx-step--disabled' : undefined]}
+						role="button"
+						tabIndex={step.disabled ? undefined : 0}
+						onClick={step.disabled ? undefined : () => props.onStepChange?.(i)}
+						onKeyDown={(e: any) => { if (!step.disabled && e.key === 'Enter') props.onStepChange?.(i); }}
+					>
+						<span className="vx-step-dot">{done ? '✓' : i + 1}</span>
+						{step.label != null ? <span className="vx-step-label">{step.label}</span> : null}
+					</div>
+				</div>
+			);
+		})}
+	</div>
+}

package/src/Switch.tsrx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { SwitchProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props";
+
+/** Self-drawn switch — flexbox track + thumb view, identical pixels across
+ *  targets. The `.vx-switch--on` state class flips justify-content, which
+ *  slides the thumb. The platform widget (UISwitch/MaterialSwitch) lives
+ *  in `ui/ios` + `ui/android`. */
+export function Switch(props: SwitchProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-switch', props.checked ? 'vx-switch--on' : undefined, props.className)}
+		style={props.style}
+		accessibilityRole={nativeAccessibilityRole('switch') as any}
+		onTap={() => props.onCheckedChange?.(!(props.checked ?? false))}
+	>
+		<flexboxlayout className="vx-switch-thumb" />
+	</flexboxlayout>
+}

package/src/Switch.web.tsrx

@@ -0,0 +1,28 @@
+import type { SwitchProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn switch — track + thumb, identical pixels across targets.
+ *  The platform widget (UISwitch/MaterialSwitch) lives in `ui/ios` +
+ *  `ui/android`. Toggles on click, Space, and Enter. */
+export function Switch(props: SwitchProps) @{
+	const toggle = () => props.onCheckedChange?.(!(props.checked ?? false));
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		role="switch"
+		aria-checked={props.checked ?? false}
+		tabIndex={0}
+		className={['vx-switch', props.checked ? 'vx-switch--on' : undefined, props.className]}
+		style={props.style}
+		onClick={toggle}
+		onKeyDown={(e: any) => {
+			if (e.key === ' ' || e.key === 'Enter') {
+				e.preventDefault();
+				toggle();
+			}
+		}}
+	>
+		<div className="vx-switch-thumb" aria-hidden="true" />
+	</div>
+}