@octane-xplat/ui 0.5.0 → 0.7.0

package/src/InputRating.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { InputRatingProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.tsrx';
+
+/** InputRating — row of tappable glyphs reporting a 1..max score. `icon`
+ *  names a registered glyph; the default is a ★ text glyph. */
+export function InputRating(props: InputRatingProps) @{
+	const max = props.max ?? 5;
+	const [internal, setInternal] = useState(props.defaultValue ?? 0);
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+
+	const setValue = (n: number) => {
+		if (props.disabled) return;
+		if (!controlled) setInternal(n);
+		props.onValueChange?.(n);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-rating', props.disabled && 'vx-rating--disabled', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@for (const score of Array.from({ length: max }, (_, i) => i + 1); key score) {
+			<flexboxlayout
+				className={cx('vx-rating-cell', score <= value && 'vx-rating-cell--on')}
+				onTap={props.disabled ? undefined : () => setValue(score)}
+			>
+				{props.icon ? <Icon name={props.icon} /> : <label className="vx-rating-glyph" text="★" />}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/InputRating.web.tsrx

@@ -0,0 +1,52 @@
+import { useState } from 'octane';
+import type { InputRatingProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.web.tsrx';
+
+/** InputRating — row of tappable glyphs reporting a 1..max score. `icon`
+ *  names a registered glyph; the default is a ★ text glyph. */
+export function InputRating(props: InputRatingProps) @{
+	const max = props.max ?? 5;
+	const [internal, setInternal] = useState(props.defaultValue ?? 0);
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value! : internal;
+
+	const setValue = (n: number) => {
+		if (props.disabled) return;
+		if (!controlled) setInternal(n);
+		props.onValueChange?.(n);
+	};
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-rating', props.disabled ? 'vx-rating--disabled' : undefined, props.className]}
+		style={props.style}
+		role="radiogroup"
+		aria-label={props.accessibilityLabel}
+	>
+		{Array.from({ length: max }, (_, i) => {
+			const score = i + 1;
+			const on = score <= value;
+			return (
+				<span
+					key={i}
+					role="radio"
+					aria-checked={on}
+					tabIndex={props.disabled ? undefined : 0}
+					className={['vx-rating-cell', on ? 'vx-rating-cell--on' : undefined]}
+					onClick={props.disabled ? undefined : () => setValue(score)}
+					onKeyDown={(e: any) => {
+						if (props.disabled) return;
+						if (e.key === ' ' || e.key === 'Enter') {
+							e.preventDefault();
+							setValue(score);
+						}
+					}}
+				>
+					{props.icon ? <Icon name={props.icon} /> : <span className="vx-rating-glyph">★</span>}
+				</span>
+			);
+		})}
+	</div>
+}

package/src/InputTags.macos.tsrx

@@ -0,0 +1,49 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { InputTagsProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './text-controls.macos.tsrx';
+import { Pressable } from './Pressable.macos.tsrx';
+
+/** InputTags — committed chips + a trailing normalized TextInput. Enter
+ *  commits the field as a tag; each chip carries an ✕ remove affordance. */
+export function InputTags(props: InputTagsProps) @{
+	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
+	const controlled = props.value !== undefined;
+	const tags = controlled ? props.value! : internal;
+	const [text, setText] = useState('');
+
+	const setTags = (next: string[]) => {
+		if (!controlled) setInternal(next);
+		props.onValueChange?.(next);
+	};
+
+	const commit = () => {
+		const tag = text.trim();
+		if (!tag || (props.max != null && tags.length >= props.max)) return;
+		setTags([...tags, tag]);
+		setText('');
+	};
+
+	const removeAt = (i: number) => setTags(tags.filter((_, k) => k !== i));
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputtags', props.disabled && 'vx-inputtags--disabled', props.className)} style={props.style}>
+		@for (const e of tags.map((tag, i) => ({ tag, i })); key e.tag + e.i) {
+			<flexboxlayout className="vx-inputtags-tag">
+				<label className="vx-inputtags-tag-label" text={e.tag} />
+				<Pressable className="vx-inputtags-remove" disabled={props.disabled} onPress={() => removeAt(e.i)} accessibilityLabel={'Remove ' + e.tag}>
+					<label text="✕" />
+				</Pressable>
+			</flexboxlayout>
+		}
+		<TextInput
+			className="vx-inputtags-field"
+			placeholder={props.placeholder}
+			editable={!props.disabled}
+			value={text}
+			onChange={setText}
+			onSubmit={commit}
+		/>
+	</flexboxlayout>
+}

package/src/InputTags.tsrx

@@ -0,0 +1,49 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { InputTagsProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.tsrx';
+import { Pressable } from './Pressable.tsrx';
+
+/** InputTags — committed chips + a trailing normalized TextInput. Enter
+ *  commits the field as a tag; each chip carries an ✕ remove affordance. */
+export function InputTags(props: InputTagsProps) @{
+	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
+	const controlled = props.value !== undefined;
+	const tags = controlled ? props.value! : internal;
+	const [text, setText] = useState('');
+
+	const setTags = (next: string[]) => {
+		if (!controlled) setInternal(next);
+		props.onValueChange?.(next);
+	};
+
+	const commit = () => {
+		const tag = text.trim();
+		if (!tag || (props.max != null && tags.length >= props.max)) return;
+		setTags([...tags, tag]);
+		setText('');
+	};
+
+	const removeAt = (i: number) => setTags(tags.filter((_, k) => k !== i));
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputtags', props.disabled && 'vx-inputtags--disabled', props.className)} style={props.style}>
+		@for (const e of tags.map((tag, i) => ({ tag, i })); key e.tag + e.i) {
+			<flexboxlayout className="vx-inputtags-tag">
+				<label className="vx-inputtags-tag-label" text={e.tag} />
+				<Pressable className="vx-inputtags-remove" disabled={props.disabled} onPress={() => removeAt(e.i)} accessibilityLabel={'Remove ' + e.tag}>
+					<label text="✕" />
+				</Pressable>
+			</flexboxlayout>
+		}
+		<TextInput
+			className="vx-inputtags-field"
+			placeholder={props.placeholder}
+			editable={!props.disabled}
+			value={text}
+			onChange={setText}
+			onSubmit={commit}
+		/>
+	</flexboxlayout>
+}

package/src/InputTags.web.tsrx

@@ -0,0 +1,49 @@
+import { useState } from 'octane';
+import type { InputTagsProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.web.tsrx';
+import { Pressable } from './Pressable.web.tsrx';
+
+/** InputTags — committed chips + a trailing normalized TextInput. Enter
+ *  commits the field as a tag; each chip carries an ✕ remove affordance;
+ *  Backspace on an empty field removes the last tag (web). */
+export function InputTags(props: InputTagsProps) @{
+	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
+	const controlled = props.value !== undefined;
+	const tags = controlled ? props.value! : internal;
+	const [text, setText] = useState('');
+
+	const setTags = (next: string[]) => {
+		if (!controlled) setInternal(next);
+		props.onValueChange?.(next);
+	};
+
+	const commit = () => {
+		const tag = text.trim();
+		if (!tag || (props.max != null && tags.length >= props.max)) return;
+		setTags([...tags, tag]);
+		setText('');
+	};
+
+	const removeAt = (i: number) => setTags(tags.filter((_, k) => k !== i));
+
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-inputtags', props.disabled ? 'vx-inputtags--disabled' : undefined, props.className]} style={props.style}>
+		{tags.map((tag: string, i: number) => (
+			<span key={tag + i} className="vx-inputtags-tag">
+				<span className="vx-inputtags-tag-label">{tag}</span>
+				<Pressable className="vx-inputtags-remove" disabled={props.disabled} onPress={() => removeAt(i)} accessibilityLabel={'Remove ' + tag}>
+					<span aria-hidden="true">✕</span>
+				</Pressable>
+			</span>
+		))}
+		<TextInput
+			className="vx-inputtags-field"
+			placeholder={props.placeholder}
+			editable={!props.disabled}
+			value={text}
+			onChange={setText}
+			onSubmit={commit}
+			web={{ onkeydown: (e: any) => { if (e.key === 'Backspace' && text === '') removeAt(tags.length - 1); } }}
+		/>
+	</div>
+}

package/src/Kbd.macos.tsrx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { KbdProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Kbd — keyboard key glyph. */
+export function Kbd(props: KbdProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-kbd', props.className)} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Kbd.tsrx

@@ -0,0 +1,11 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { KbdProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Kbd — keyboard key glyph. */
+export function Kbd(props: KbdProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-kbd', props.className)} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/Kbd.web.tsrx

@@ -0,0 +1,9 @@
+import type { KbdProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Kbd — keyboard key glyph. */
+export function Kbd(props: KbdProps) @{
+	<kbd ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-kbd', props.className]} style={props.style}>
+		{props.children}
+	</kbd>
+}

package/src/KeyboardAvoiding.macos.tsrx

@@ -0,0 +1,8 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { KeyboardAvoidingProps } from './props'
+
+export function KeyboardAvoiding(props: KeyboardAvoidingProps) @{
+	<flexboxlayout flexDirection="column" className={props.className} style={props.style}>
+		{props.children}
+	</flexboxlayout>
+}

package/src/KeyboardAvoiding.mobile.tsrx

@@ -0,0 +1,63 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useState } from 'octane';
+import { Application } from '@nativescript/core';
+import type { KeyboardAvoidingProps } from './props';
+import { cx } from './cx';
+
+function useKeyboardInset() {
+	const [inset, setInset] = useState(0);
+	useEffect(() => {
+		if (!Application.ios) return;
+		const center = NSNotificationCenter.defaultCenter;
+		const token = center.addObserverForNameObjectQueueUsingBlock(
+			UIKeyboardWillChangeFrameNotification,
+			null,
+			NSOperationQueue.mainQueue,
+			(note: any) => {
+				// NSValue-boxed CGRect — `CGRectValue` marshals to a plain
+				// object property on this runtime, not a callable.
+				const raw = note.userInfo.objectForKey(UIKeyboardFrameEndUserInfoKey);
+				const boxed = raw?.CGRectValue;
+				const frame = typeof boxed === 'function' ? raw.CGRectValue() : (boxed ?? raw);
+				const screenHeight = UIScreen.mainScreen.bounds.size.height;
+				setInset(Math.max(0, screenHeight - (frame?.origin?.y ?? screenHeight)));
+			},
+		);
+
+		return () => center.removeObserver(token);
+	}, []);
+
+	return inset;
+}
+
+function useAndroidResize() {
+	useEffect(() => {
+		const nativeWindow = Application.android?.foregroundActivity?.window;
+		if (!nativeWindow) return;
+		const params = android.view.WindowManager.LayoutParams;
+		const previous = nativeWindow.attributes.softInputMode;
+		const adjusted = (previous & ~params.SOFT_INPUT_MASK_ADJUST) | params.SOFT_INPUT_ADJUST_RESIZE;
+		nativeWindow.setSoftInputMode(adjusted);
+		return () => nativeWindow.setSoftInputMode(previous);
+	}, []);
+}
+
+export function KeyboardAvoiding(props: KeyboardAvoidingProps) @{
+	const keyboardInset = useKeyboardInset();
+	useAndroidResize();
+	const platformProps = Application.ios != null ? props.ios : props.android;
+
+	<scrollview
+		id={props.id}
+		className={cx('vx-keyboard-avoiding', props.className)}
+		style={props.style}
+		ref={(host: any) => { if (host && platformProps) Object.assign(host, platformProps); }}
+	>
+		<flexboxlayout
+			flexDirection="column"
+			style={keyboardInset ? { paddingBottom: keyboardInset } : undefined}
+		>
+			{props.children}
+		</flexboxlayout>
+	</scrollview>
+}

package/src/Link.macos.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { LinkProps } from './props'
+import { Pressable } from './Pressable.macos.tsrx'
+import { pushDeepLink } from './route.macos'
+
+export function Link(props: LinkProps) @{
+	<Pressable
+		className={props.className}
+		style={props.style}
+		accessibilityRole="link"
+		onPress={() => pushDeepLink(props.href)}
+	>
+		{props.children}
+	</Pressable>
+}

package/src/Link.tsrx

@@ -0,0 +1,10 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { Utils } from '@nativescript/core';
+import type { LinkProps } from './props';
+import { Pressable } from './Pressable.tsrx';
+
+export function Link(props: LinkProps) @{
+	<Pressable className={props.className} onPress={() => { Utils.openUrl(props.href); }}>
+		<flexboxlayout flexDirection="row">{props.children}</flexboxlayout>
+	</Pressable>
+}

package/src/Link.web.tsrx

@@ -0,0 +1,12 @@
+import type { LinkProps } from './props';
+
+export function Link(props: LinkProps) @{
+	<a
+		href={props.href}
+		target={props.target ?? '_blank'}
+		rel="noreferrer"
+		className={props.className}
+	>
+		{props.children}
+	</a>
+}

package/src/ListItem.macos.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { ListItemComponent, ListItemProps, ListItemSlotProps } from './props'
+import { Pressable } from './Pressable.macos.tsrx'
+import { Text } from './Text.macos.tsrx'
+import { cx } from './cx'
+
+function Leading(props: ListItemSlotProps) @{
+	<flexboxlayout className={cx('vx-listitem-leading', props.className)}>{props.children}</flexboxlayout>
+}
+
+function Content(props: ListItemSlotProps) @{
+	<flexboxlayout flexDirection="column" className={cx('vx-listitem-content', props.className)}>{props.children}</flexboxlayout>
+}
+
+function Supporting(props: ListItemSlotProps) @{
+	<Text className={cx('vx-listitem-supporting', props.className)}>{props.children}</Text>
+}
+
+function Trailing(props: ListItemSlotProps) @{
+	<flexboxlayout className={cx('vx-listitem-trailing', props.className)}>{props.children}</flexboxlayout>
+}
+
+function ListItemView(props: ListItemProps) @{
+	<Pressable
+		id={props.id}
+		className={cx('vx-listitem', props.className)}
+		style={props.style}
+		onPress={props.onPress}
+		disabled={props.disabled}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : 'text')}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={props.accessibilityState}
+	>
+		{props.leading != null ? <Leading>{props.leading}</Leading> : null}
+		{props.title != null || props.supportingText != null ? (
+			<Content>
+				{props.title != null ? <Text className="vx-listitem-title">{props.title}</Text> : null}
+				{props.supportingText != null ? <Supporting>{props.supportingText}</Supporting> : null}
+			</Content>
+		) : null}
+		{props.children}
+		{props.trailing != null ? <Trailing>{props.trailing}</Trailing> : null}
+	</Pressable>
+}
+
+export const ListItem = Object.assign(ListItemView, {
+	Leading,
+	Content,
+	Supporting,
+	Trailing,
+}) as ListItemComponent

package/src/ListItem.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ListItemComponent, ListItemProps, ListItemSlotProps } from './props'
+import { Pressable } from './Pressable.tsrx'
+import { Text } from './Text.tsrx'
+import { cx } from './cx'
+
+function Leading(props: ListItemSlotProps) @{
+	<flexboxlayout className={cx('vx-listitem-leading', props.className)}>{props.children}</flexboxlayout>
+}
+
+function Content(props: ListItemSlotProps) @{
+	<flexboxlayout flexDirection="column" className={cx('vx-listitem-content', props.className)}>{props.children}</flexboxlayout>
+}
+
+function Supporting(props: ListItemSlotProps) @{
+	<Text className={cx('vx-listitem-supporting', props.className)}>{props.children}</Text>
+}
+
+function Trailing(props: ListItemSlotProps) @{
+	<flexboxlayout className={cx('vx-listitem-trailing', props.className)}>{props.children}</flexboxlayout>
+}
+
+function ListItemView(props: ListItemProps) @{
+	<Pressable
+		id={props.id}
+		className={cx('vx-listitem', props.className)}
+		style={props.style}
+		onPress={props.onPress}
+		disabled={props.disabled}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : 'text')}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={props.accessibilityState}
+	>
+		{props.leading != null ? <Leading>{props.leading}</Leading> : null}
+		{props.title != null || props.supportingText != null ? (
+			<Content>
+				{props.title != null ? <Text className="vx-listitem-title">{props.title}</Text> : null}
+				{props.supportingText != null ? <Supporting>{props.supportingText}</Supporting> : null}
+			</Content>
+		) : null}
+		{props.children}
+		{props.trailing != null ? <Trailing>{props.trailing}</Trailing> : null}
+	</Pressable>
+}
+
+export const ListItem = Object.assign(ListItemView, {
+	Leading,
+	Content,
+	Supporting,
+	Trailing,
+}) as ListItemComponent

package/src/ListItem.web.tsrx

@@ -0,0 +1,50 @@
+import type { ListItemComponent, ListItemProps, ListItemSlotProps } from './props'
+import { Pressable } from './Pressable.web.tsrx'
+import { Text } from './Text.web.tsrx'
+
+function Leading(props: ListItemSlotProps) @{
+	<div className={['vx-listitem-leading', props.className]}>{props.children}</div>
+}
+
+function Content(props: ListItemSlotProps) @{
+	<div className={['vx-listitem-content', props.className]}>{props.children}</div>
+}
+
+function Supporting(props: ListItemSlotProps) @{
+	<Text className={['vx-listitem-supporting', props.className]}>{props.children}</Text>
+}
+
+function Trailing(props: ListItemSlotProps) @{
+	<div className={['vx-listitem-trailing', props.className]}>{props.children}</div>
+}
+
+function ListItemView(props: ListItemProps) @{
+	<Pressable
+		id={props.id}
+		className={['vx-listitem', props.className]}
+		style={props.style}
+		onPress={props.onPress}
+		disabled={props.disabled}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={props.accessibilityRole ?? (props.onPress ? 'button' : 'text')}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={props.accessibilityState}
+	>
+		{props.leading != null ? <Leading>{props.leading}</Leading> : null}
+		{props.title != null || props.supportingText != null ? (
+			<Content>
+				{props.title != null ? <Text className="vx-listitem-title">{props.title}</Text> : null}
+				{props.supportingText != null ? <Supporting>{props.supportingText}</Supporting> : null}
+			</Content>
+		) : null}
+		{props.children}
+		{props.trailing != null ? <Trailing>{props.trailing}</Trailing> : null}
+	</Pressable>
+}
+
+export const ListItem = Object.assign(ListItemView, {
+	Leading,
+	Content,
+	Supporting,
+	Trailing,
+}) as ListItemComponent

package/src/Meter.macos.tsrx

@@ -0,0 +1,8 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { MeterProps } from './props'
+
+export function Meter(props: MeterProps) @{
+	<label id={props.id} className={props.className} accessibilityRole="progressbar">
+		{String(props.value ?? 0) + ' / ' + String(props.max ?? 100)}
+	</label>
+}

package/src/Meter.tsrx

@@ -0,0 +1,45 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { AccessibilityRole } from '@nativescript/core';
+import type { MeterProps } from './props';
+import { cx } from './cx';
+import { meterRange } from './meter-math';
+import './svg.mobile';
+
+/** Ring markup matching the web leaf's conic-gradient: a track circle plus a
+ *  dash-array arc rotated to start at 12 o'clock, drawn by `svgview`
+ *  (androidsvg on Android, SVGKit on iOS). The module-level import above is
+ *  the side effect that registers the element. */
+function ringSvg(size: number, strokeWidth: number, ratio: number, color: string, trackColor: string): string {
+	const c = size / 2;
+	const r = Math.max(0, (size - strokeWidth) / 2);
+	const circumference = 2 * Math.PI * r;
+	const track = `<circle cx="${c}" cy="${c}" r="${r}" fill="none" stroke="${trackColor}" stroke-width="${strokeWidth}"/>`;
+	const arc = ratio > 0 && r > 0
+		? `<circle cx="${c}" cy="${c}" r="${r}" fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-dasharray="${ratio * circumference} ${circumference}" transform="rotate(-90 ${c} ${c})"/>`
+		: '';
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}">${track}${arc}</svg>`;
+}
+
+export function Meter(props: MeterProps) @{
+	const max = props.max ?? 100;
+	const { max: rangeMax, value, ratio } = meterRange(props.value, max);
+	const size = props.size ?? 24;
+	const strokeWidth = Math.max(0, Math.min(props.strokeWidth ?? 3, size));
+	const color = props.color ?? '#3376cc';
+	const trackColor = props.trackColor ?? '#e1ecf7';
+
+	<gridlayout
+		id={props.id}
+		className={cx('vx-meter', props.className)}
+		style={{ width: size, height: size, ...props.style }}
+		accessible={true}
+		accessibilityRole={AccessibilityRole.ProgressBar}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityValue={`${value} of ${rangeMax}`}
+	>
+		<svgview src={ringSvg(size, strokeWidth, ratio, color, trackColor)} stretch="aspectFit" style={{ width: size, height: size }} />
+		<gridlayout horizontalAlignment="center" verticalAlignment="middle">
+			{props.children}
+		</gridlayout>
+	</gridlayout>
+}

package/src/Meter.web.tsrx

@@ -0,0 +1,32 @@
+import type { MeterProps } from './props';
+import { meterRange } from './meter-math';
+
+export function Meter(props: MeterProps) @{
+	const max = props.max ?? 100;
+	const { max: rangeMax, value, ratio } = meterRange(props.value, max);
+	const size = props.size ?? 24;
+	const strokeWidth = Math.max(0, Math.min(props.strokeWidth ?? 3, size));
+	const color = props.color ?? '#3376cc';
+	const trackColor = props.trackColor ?? '#e1ecf7';
+	const sweep = ratio * 360;
+	const ringStyle = {
+		position: 'absolute' as const, inset: 0, borderRadius: '50%',
+		backgroundImage: `conic-gradient(${color} 0deg ${sweep}deg, ${trackColor} ${sweep}deg 360deg)`,
+		mask: `radial-gradient(circle, transparent calc(50% - ${strokeWidth}px), #000 calc(50% - ${strokeWidth}px + 0.5px))`,
+		WebkitMask: `radial-gradient(circle, transparent calc(50% - ${strokeWidth}px), #000 calc(50% - ${strokeWidth}px + 0.5px))`,
+	};
+
+	<div
+		id={props.id}
+		className={['vx-meter', props.className]}
+		style={{ display: 'grid', placeItems: 'center', position: 'relative', width: size, height: size, ...props.style }}
+		role="progressbar"
+		aria-label={props.accessibilityLabel}
+		aria-valuemin={0}
+		aria-valuemax={rangeMax}
+		aria-valuenow={value}
+	>
+		<div aria-hidden="true" style={ringStyle} />
+		<div style={{ position: 'relative' }}>{props.children}</div>
+	</div>
+}

package/src/NavLink.macos.tsrx

@@ -0,0 +1,24 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { NavLinkProps } from './props';
+import { Pressable } from './Pressable.macos.tsrx';
+import { pushRoute, useRoute } from './route.macos';
+import { cx } from './cx';
+
+export function NavLink(props: NavLinkProps) @{
+	const current = useRoute(props.route.stack);
+	const active = !!current
+		&& current.name === props.route.name
+		&& Object.keys(current.params).length === Object.keys(props.route.params).length
+		&& Object.entries(props.route.params).every(
+			([key, value]) => String(current.params[key]) === String(value),
+		);
+
+	<Pressable
+		className={cx(props.className, active ? props.activeClassName : undefined)}
+		style={props.style}
+		accessibilityRole="link"
+		onPress={() => pushRoute(props.route)}
+	>
+		<flexboxlayout flexDirection="row">{props.children}</flexboxlayout>
+	</Pressable>
+}