@octane-xplat/ui 0.6.0 → 0.7.1

package/src/InputNumber.macos.tsrx

@@ -0,0 +1,49 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { InputNumberProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './text-controls.macos.tsrx';
+import { Pressable } from './Pressable.macos.tsrx';
+
+/** InputNumber — normalized number field with −/+ steppers. Controlled via
+ *  `value`/`onValueChange`, uncontrolled via `defaultValue`. Steppers clamp
+ *  to `min`/`max`. */
+export function InputNumber(props: InputNumberProps) @{
+	const [internal, setInternal] = useState(props.defaultValue);
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value : internal;
+
+	const clamp = (n: number) =>
+		Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, n));
+
+	const setValue = (n: number) => {
+		if (!controlled) setInternal(n);
+		props.onValueChange?.(n);
+	};
+
+	const stepBy = (dir: number) => {
+		if (props.disabled) return;
+		setValue(clamp((value ?? 0) + dir * (props.step ?? 1)));
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputnumber', props.disabled && 'vx-inputnumber--disabled', props.className)} style={props.style}>
+		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(-1)} accessibilityLabel="Decrement">
+			<label text="−" />
+		</Pressable>
+		<TextInput
+			className="vx-inputnumber-field"
+			keyboardType="decimal"
+			editable={!props.disabled}
+			placeholder={props.placeholder}
+			value={value == null ? '' : String(value)}
+			onChange={(text: string) => {
+				const n = parseFloat(text);
+				if (text === '' || !isNaN(n)) setValue(clamp(text === '' ? 0 : n));
+			}}
+		/>
+		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(1)} accessibilityLabel="Increment">
+			<label text="+" />
+		</Pressable>
+	</flexboxlayout>
+}

package/src/InputNumber.tsrx

@@ -0,0 +1,49 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { InputNumberProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.tsrx';
+import { Pressable } from './Pressable.tsrx';
+
+/** InputNumber — normalized number field with −/+ steppers. Controlled via
+ *  `value`/`onValueChange`, uncontrolled via `defaultValue`. Steppers clamp
+ *  to `min`/`max`. */
+export function InputNumber(props: InputNumberProps) @{
+	const [internal, setInternal] = useState(props.defaultValue);
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value : internal;
+
+	const clamp = (n: number) =>
+		Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, n));
+
+	const setValue = (n: number) => {
+		if (!controlled) setInternal(n);
+		props.onValueChange?.(n);
+	};
+
+	const stepBy = (dir: number) => {
+		if (props.disabled) return;
+		setValue(clamp((value ?? 0) + dir * (props.step ?? 1)));
+	};
+
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-inputnumber', props.disabled && 'vx-inputnumber--disabled', props.className)} style={props.style}>
+		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(-1)} accessibilityLabel="Decrement">
+			<label text="−" />
+		</Pressable>
+		<TextInput
+			className="vx-inputnumber-field"
+			keyboardType="decimal"
+			editable={!props.disabled}
+			placeholder={props.placeholder}
+			value={value == null ? '' : String(value)}
+			onChange={(text: string) => {
+				const n = parseFloat(text);
+				if (text === '' || !isNaN(n)) setValue(clamp(text === '' ? 0 : n));
+			}}
+		/>
+		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(1)} accessibilityLabel="Increment">
+			<label text="+" />
+		</Pressable>
+	</flexboxlayout>
+}

package/src/InputNumber.web.tsrx

@@ -0,0 +1,47 @@
+import { useState } from 'octane';
+import type { InputNumberProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { TextInput } from './TextInput.web.tsrx';
+import { Pressable } from './Pressable.web.tsrx';
+
+/** InputNumber — normalized number field with −/+ steppers. Controlled via
+ *  `value`/`onValueChange`, uncontrolled via `defaultValue`. Steppers clamp
+ *  to `min`/`max`. */
+export function InputNumber(props: InputNumberProps) @{
+	const [internal, setInternal] = useState(props.defaultValue);
+	const controlled = props.value !== undefined;
+	const value = controlled ? props.value : internal;
+
+	const clamp = (n: number) =>
+		Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, n));
+
+	const setValue = (n: number) => {
+		if (!controlled) setInternal(n);
+		props.onValueChange?.(n);
+	};
+
+	const stepBy = (dir: number) => {
+		if (props.disabled) return;
+		setValue(clamp((value ?? 0) + dir * (props.step ?? 1)));
+	};
+
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-inputnumber', props.disabled ? 'vx-inputnumber--disabled' : undefined, props.className]} style={props.style}>
+		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(-1)} accessibilityLabel="Decrement">
+			<span>−</span>
+		</Pressable>
+		<TextInput
+			className="vx-inputnumber-field"
+			keyboardType="decimal"
+			editable={!props.disabled}
+			placeholder={props.placeholder}
+			value={value == null ? '' : String(value)}
+			onChange={(text: string) => {
+				const n = parseFloat(text);
+				if (text === '' || !isNaN(n)) setValue(clamp(text === '' ? 0 : n));
+			}}
+		/>
+		<Pressable className="vx-inputnumber-step" disabled={props.disabled} onPress={() => stepBy(1)} accessibilityLabel="Increment">
+			<span>+</span>
+		</Pressable>
+	</div>
+}

package/src/InputRating.macos.tsrx

@@ -0,0 +1,42 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { InputRatingProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Icon } from './Icon.macos.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')}
+				style={{ width: 24, padding: 2 }}
+				onTap={props.disabled ? undefined : () => setValue(score)}
+			>
+				{props.icon
+					? <Icon name={props.icon} />
+					: <label className="vx-rating-glyph" style={{ fontSize: 20, color: score <= value ? '#171717' : '#eaeaea' }} text="★" />}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

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