@octane-xplat/ui 0.6.0 → 0.7.1

package/src/SearchInput.tsrx

@@ -0,0 +1,60 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef, useState } from 'octane';
+import type { SearchInputProps } from './props';
+import { Icon } from './Icon.tsrx';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+import { writeText } from './text-write';
+
+/** Chrome-reset search field — a styled TextField (not UISearchBar) with a
+ *  leading glyph and a self-drawn clear button, matching the web leaf.
+ *  Controlled `value` writes go through `writeText` so Android keeps its
+ *  selection (same path as TextInput); `defaultValue` seeds uncontrolled
+ *  use. `returnKeyType` is fixed 'search' — the normalized chrome. */
+export function SearchInput(props: SearchInputProps) @{
+	const el = useRef<any>(null);
+	const [internal, setInternal] = useState(props.defaultValue ?? '');
+	const value = props.value ?? internal;
+	useEffect(() => writeText(el.current, value), [value]);
+
+	const setValue = (next: string) => {
+		if (props.value === undefined) setInternal(next);
+		props.onChange?.(next);
+	};
+
+	const clear = () => {
+		setValue('');
+		props.onClear?.();
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-search', props.editable === false && 'vx-search--disabled', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		{props.icon !== false ? <Icon name={props.icon ?? 'xplat-search'} size={16} className="vx-search-icon" /> : null}
+		<textfield
+			ref={(v: any) => {
+				el.current = v;
+				if (!v) return;
+				props.bind?.({ focus: () => v.focus(), blur: () => v.dismissSoftInput?.() ?? v.blur(), native: v });
+			}}
+			className="vx-search-field"
+			hint={props.placeholder}
+			returnKeyType="search"
+			editable={props.editable ?? true}
+			onTextChange={(e: any) => setValue(e.value)}
+			onReturnPress={props.onSubmit}
+			onFocus={props.onFocus}
+			onBlur={props.onBlur}
+		/>
+		{value !== '' && props.editable !== false ? (
+			<flexboxlayout className="vx-search-clear" accessibilityLabel="Clear search" onTap={clear}>
+				<Icon name="xplat-clear" size={12} />
+			</flexboxlayout>
+		) : null}
+	</flexboxlayout>
+}

package/src/SearchInput.web.test.tsrx

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from 'vitest';
+import { act, createRoot } from 'octane';
+import { SearchInput } from './SearchInput.web.tsrx';
+
+describe('SearchInput (web leaf)', () => {
+	it('renders the shell, default glyph, and a clear button once text is present', () => {
+		const el = document.createElement('div');
+		document.body.appendChild(el);
+		const root = createRoot(el);
+		act(() => root.render(<SearchInput defaultValue="abc" onChange={() => {}} />));
+		expect(el.querySelector('.vx-search-icon')?.tagName).toBe('svg');
+		expect((el.querySelector('.vx-search-field') as HTMLInputElement).type).toBe('search');
+		expect((el.querySelector('.vx-search-field') as HTMLInputElement).value).toBe('abc');
+		expect(el.querySelector('.vx-search-clear')).not.toBeNull();
+		root.unmount();
+		el.remove();
+	});
+
+	it('typing fires onChange; the clear button empties the field and fires onChange + onClear', () => {
+		const onChange = vi.fn();
+		const onClear = vi.fn();
+		const el = document.createElement('div');
+		document.body.appendChild(el);
+		const root = createRoot(el);
+		act(() => root.render(<SearchInput onChange={onChange} onClear={onClear} />));
+		const field = el.querySelector('.vx-search-field') as HTMLInputElement;
+
+		act(() => {
+			field.value = 'xy';
+			field.dispatchEvent(new Event('input', { bubbles: true }));
+		});
+
+		expect(onChange).toHaveBeenCalledWith('xy');
+		expect(field.value).toBe('xy');
+
+		act(() => (el.querySelector('.vx-search-clear') as HTMLElement).click());
+		expect(onChange).toHaveBeenCalledWith('');
+		expect(onClear).toHaveBeenCalledTimes(1);
+		expect(el.querySelector('.vx-search-clear')).toBeNull();
+		root.unmount();
+		el.remove();
+	});
+
+	it('Enter fires onSubmit; icon={false} hides the glyph', () => {
+		const onSubmit = vi.fn();
+		const el = document.createElement('div');
+		document.body.appendChild(el);
+		const root = createRoot(el);
+		act(() => root.render(<SearchInput icon={false} onSubmit={onSubmit} />));
+		expect(el.querySelector('.vx-search-icon')).toBeNull();
+		const field = el.querySelector('.vx-search-field') as HTMLInputElement;
+		act(() => field.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })));
+		expect(onSubmit).toHaveBeenCalledTimes(1);
+		root.unmount();
+		el.remove();
+	});
+});

package/src/SearchInput.web.tsrx

@@ -0,0 +1,55 @@
+import { useState } from 'octane';
+import type { SearchInputProps } from './props';
+import { Icon } from './Icon.web.tsrx';
+import { applyWebProps } from './platformProps.web';
+import { normStyle } from './layout-child.web';
+
+/** Chrome-reset search field — an `<input type="search">` in a bordered
+ *  shell with a leading glyph and a self-drawn clear button (the engine's
+ *  own ::-webkit-search-cancel-button is hidden — same pixels as native).
+ *  `value`/`onChange` for controlled, `defaultValue` for uncontrolled. */
+export function SearchInput(props: SearchInputProps) @{
+	const [internal, setInternal] = useState(props.defaultValue ?? '');
+	const value = props.value ?? internal;
+	const setValue = (next: string) => {
+		if (props.value === undefined) setInternal(next);
+		props.onChange?.(next);
+	};
+
+	const clear = () => {
+		setValue('');
+		props.onClear?.();
+	};
+
+	<div
+		ref={(el: any) => applyWebProps(el, props.web)}
+		id={props.id}
+		className={['vx-search', props.editable === false ? 'vx-search--disabled' : undefined, props.className]}
+		style={normStyle(props.style)}
+	>
+		{props.icon !== false ? <Icon name={props.icon ?? 'xplat-search'} size={16} className="vx-search-icon" /> : null}
+		<input
+			ref={(el: any) => {
+				if (el) props.bind?.({ focus: () => el.focus(), blur: () => el.blur(), native: el });
+			}}
+			type="search"
+			className="vx-search-field"
+			value={value}
+			placeholder={props.placeholder}
+			aria-label={props.accessibilityLabel ?? props.placeholder}
+			readOnly={props.editable === false}
+			enterKeyHint="search"
+			onInput={(e: any) => setValue(e.target.value)}
+			onKeyDown={(e: any) => {
+				if (e.key === 'Enter' && !e.shiftKey) props.onSubmit?.();
+			}}
+			onFocus={props.onFocus}
+			onBlur={props.onBlur}
+		/>
+		{value !== '' && props.editable !== false ? (
+			<button type="button" className="vx-search-clear" aria-label="Clear search" onClick={clear}>
+				<Icon name="xplat-clear" size={12} />
+			</button>
+		) : null}
+	</div>
+}

package/src/SegmentedControl.tsrx

@@ -0,0 +1,43 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { SegmentedControlProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps, nativeAccessibilityState } from './escape-props';
+
+/** Self-drawn segmented control — equal-width segments in a track, one
+ *  selected (`--on`). `value`/`onValueChange` for controlled,
+ *  `defaultValue` for uncontrolled. Same classes + geometry as the web
+ *  leaf (the platform-authentic widget would be UISegmentedControl /
+ *  Material segmented buttons — neither is shared). */
+export function SegmentedControl(props: SegmentedControlProps) @{
+	const [internal, setInternal] = useState(props.defaultValue);
+	const current = props.value ?? internal;
+	const select = (value: string) => {
+		if (props.value === undefined) setInternal(value);
+		props.onValueChange?.(value);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-segmented', props.disabled && 'vx-segmented--disabled', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		{props.options.map((opt: any) => {
+			const selected = current === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<flexboxlayout
+					key={opt.value}
+					className={cx('vx-segment', selected && 'vx-segment--on', disabled && 'vx-segment--disabled')}
+					accessibilityState={nativeAccessibilityState({ selected }) as any}
+					onTap={disabled ? undefined : () => select(opt.value)}
+				>
+					<label className="vx-segment-label" text={opt.label ?? opt.value} />
+				</flexboxlayout>
+			);
+		})}
+	</flexboxlayout>
+}

package/src/SegmentedControl.web.test.tsrx

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { describe, expect, it, vi } from 'vitest';
+import { act, createRoot } from 'octane';
+import { SegmentedControl } from './SegmentedControl.web.tsrx';
+
+const options = [
+	{ value: 'day', label: 'Day' },
+	{ value: 'week', label: 'Week' },
+	{ value: 'month', label: 'Month', disabled: true },
+];
+
+describe('SegmentedControl (web leaf)', () => {
+	it('renders radiogroup semantics, marks the selected segment', () => {
+		const el = document.createElement('div');
+		document.body.appendChild(el);
+		const root = createRoot(el);
+		act(() => root.render(<SegmentedControl options={options} value="week" onValueChange={() => {}} />));
+		const group = el.querySelector('.vx-segmented')!;
+		expect(group.getAttribute('role')).toBe('radiogroup');
+		const segs = el.querySelectorAll('.vx-segment');
+		expect(segs).toHaveLength(3);
+		expect(segs[1].classList.contains('vx-segment--on')).toBe(true);
+		expect(segs[2].classList.contains('vx-segment--disabled')).toBe(true);
+		root.unmount();
+		el.remove();
+	});
+
+	it('uncontrolled defaultValue selects on mount; clicks switch + fire onValueChange', () => {
+		const onValueChange = vi.fn();
+		const el = document.createElement('div');
+		document.body.appendChild(el);
+		const root = createRoot(el);
+		act(() => root.render(<SegmentedControl options={options} defaultValue="day" onValueChange={onValueChange} />));
+		expect(el.querySelectorAll('.vx-segment')[0].classList.contains('vx-segment--on')).toBe(true);
+
+		act(() => (el.querySelectorAll('.vx-segment')[1] as HTMLElement).click());
+		expect(onValueChange).toHaveBeenCalledWith('week');
+		expect(el.querySelectorAll('.vx-segment')[1].classList.contains('vx-segment--on')).toBe(true);
+
+		// Disabled option does not select.
+		act(() => (el.querySelectorAll('.vx-segment')[2] as HTMLElement).click());
+		expect(onValueChange).toHaveBeenCalledTimes(1);
+		root.unmount();
+		el.remove();
+	});
+});

package/src/SegmentedControl.web.tsrx

@@ -0,0 +1,51 @@
+import { useState } from 'octane';
+import type { SegmentedControlProps } from './props';
+import { applyWebProps } from './platformProps.web';
+
+/** Self-drawn segmented control — equal-width segments in a track, one
+ *  selected (`--on`). Radiogroup semantics like RadioGroup: Space/Enter
+ *  selects. `value`/`onValueChange` for controlled, `defaultValue` for
+ *  uncontrolled. Same classes + geometry as the native leaf. */
+export function SegmentedControl(props: SegmentedControlProps) @{
+	const [internal, setInternal] = useState(props.defaultValue);
+	const current = props.value ?? internal;
+	const select = (value: string) => {
+		if (props.value === undefined) setInternal(value);
+		props.onValueChange?.(value);
+	};
+
+	<div
+		ref={(e: any) => applyWebProps(e, props.web)}
+		id={props.id}
+		role="radiogroup"
+		aria-label={props.accessibilityLabel}
+		aria-disabled={props.disabled || undefined}
+		className={['vx-segmented', props.disabled ? 'vx-segmented--disabled' : undefined, props.className]}
+		style={props.style}
+	>
+		{props.options.map((opt: any) => {
+			const selected = current === opt.value;
+			const disabled = props.disabled || opt.disabled;
+			return (
+				<div
+					key={opt.value}
+					role="radio"
+					aria-checked={selected}
+					aria-disabled={disabled || undefined}
+					tabIndex={disabled ? undefined : 0}
+					className={['vx-segment', selected ? 'vx-segment--on' : undefined, disabled ? 'vx-segment--disabled' : undefined]}
+					onClick={disabled ? undefined : () => select(opt.value)}
+					onKeyDown={(e: any) => {
+						if (disabled) return;
+						if (e.key === ' ' || e.key === 'Enter') {
+							e.preventDefault();
+							select(opt.value);
+						}
+					}}
+				>
+					<span className="vx-segment-label">{opt.label ?? opt.value}</span>
+				</div>
+			);
+		})}
+	</div>
+}

package/src/Select.macos.tsrx

@@ -0,0 +1,104 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useRef, useState } from 'octane';
+import type { SelectProps, SelectOption } from "./props";
+import { cx } from "./cx";
+import { Pressable } from './Pressable.macos.tsrx';
+import { Popover } from './Popover.macos.tsrx';
+import { TextInput } from './text-controls.macos.tsrx';
+
+/** Select — anchored self-drawn listbox on every target (decision #48).
+ *  `multiple` toggles options without closing and reports string[];
+ *  `searchable` filters the list through a normalized TextInput — that
+ *  combination is what Nuxt calls Combobox/InputMenu/SelectMenu. */
+export function Select(props: SelectProps) @{
+	const anchor = useRef<any>(null);
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
+	const openControlled = props.open !== undefined;
+	const open = openControlled ? props.open : internalOpen;
+
+	const norm = (v: string | string[] | undefined) =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v];
+
+	const [internalValue, setInternalValue] = useState<string[]>(norm(props.defaultValue));
+	const valueControlled = props.value !== undefined;
+	const selected = valueControlled ? norm(props.value) : internalValue;
+
+	const [query, setQuery] = useState('');
+
+	const setOpen = (next: boolean) => {
+		if (props.disabled && next) return;
+		if (!openControlled) setInternalOpen(next);
+		if (!next) setQuery('');
+		props.onOpenChange?.(next);
+	};
+
+	const report = (keys: string[]) => {
+		if (!valueControlled) setInternalValue(keys);
+		props.onValueChange?.(props.multiple ? keys : keys[0]);
+	};
+
+	const pick = (opt: SelectOption) => {
+		if (opt.disabled) return;
+		if (props.multiple) {
+			report(selected.includes(opt.value)
+				? selected.filter((v) => v !== opt.value)
+				: [...selected, opt.value]);
+		} else {
+			report([opt.value]);
+			setOpen(false);
+		}
+	};
+
+	const labelFor = (v: string) =>
+		props.options.find((o) => o.value === v)?.label ?? v;
+
+	const triggerText = selected.length
+		? selected.map(labelFor).join(', ')
+		: props.placeholder ?? '';
+
+	const shown = props.searchable && query
+		? props.options.filter((o) => (o.label ?? o.value).toLowerCase().includes(query.toLowerCase()))
+		: props.options;
+
+	<>
+		<Pressable
+			bind={(v: any) => { anchor.current = v; }}
+			id={props.id}
+			className={cx('vx-select-trigger', props.disabled && 'vx-select--disabled', props.className)}
+			style={props.style}
+			disabled={props.disabled}
+			onPress={() => setOpen(!open)}
+			accessibilityLabel={props.accessibilityLabel}
+		>
+			<label className={cx('vx-select-value', !selected.length && 'vx-select-placeholder')} text={triggerText} />
+			<label className="vx-select-caret" text="▾" />
+		</Pressable>
+		<Popover
+			anchor={anchor}
+			open={open}
+			placement={props.placement ?? 'bottom'}
+			onDismiss={() => setOpen(false)}
+			className="vx-menu"
+		>
+			{props.searchable
+				? <TextInput
+					className="vx-select-search"
+					placeholder="Search…"
+					value={query}
+					onChange={setQuery}
+				/>
+				: null}
+			<flexboxlayout className="vx-menu-list vx-select-list">
+				@for (const opt of shown; key opt.value) {
+					<flexboxlayout
+						className={cx('vx-menu-item', 'vx-select-option', selected.includes(opt.value) && 'vx-select-option--on', opt.disabled && 'vx-menu-item--disabled')}
+						onTap={opt.disabled ? undefined : () => pick(opt)}
+					>
+						<label className="vx-select-check" text={selected.includes(opt.value) ? '✓' : ''} />
+						<label className="vx-menu-item-label" text={opt.label ?? opt.value} />
+					</flexboxlayout>
+				}
+			</flexboxlayout>
+		</Popover>
+	</>
+}

package/src/Select.tsrx

@@ -0,0 +1,104 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useRef, useState } from 'octane';
+import type { SelectProps, SelectOption } from "./props";
+import { cx } from "./cx";
+import { Pressable } from './Pressable.tsrx';
+import { Popover } from './Popover.tsrx';
+import { TextInput } from './TextInput.tsrx';
+
+/** Select — anchored self-drawn listbox on every target (decision #48).
+ *  `multiple` toggles options without closing and reports string[];
+ *  `searchable` filters the list through a normalized TextInput — that
+ *  combination is what Nuxt calls Combobox/InputMenu/SelectMenu. */
+export function Select(props: SelectProps) @{
+	const anchor = useRef<any>(null);
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
+	const openControlled = props.open !== undefined;
+	const open = openControlled ? props.open : internalOpen;
+
+	const norm = (v: string | string[] | undefined) =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v];
+
+	const [internalValue, setInternalValue] = useState<string[]>(norm(props.defaultValue));
+	const valueControlled = props.value !== undefined;
+	const selected = valueControlled ? norm(props.value) : internalValue;
+
+	const [query, setQuery] = useState('');
+
+	const setOpen = (next: boolean) => {
+		if (props.disabled && next) return;
+		if (!openControlled) setInternalOpen(next);
+		if (!next) setQuery('');
+		props.onOpenChange?.(next);
+	};
+
+	const report = (keys: string[]) => {
+		if (!valueControlled) setInternalValue(keys);
+		props.onValueChange?.(props.multiple ? keys : keys[0]);
+	};
+
+	const pick = (opt: SelectOption) => {
+		if (opt.disabled) return;
+		if (props.multiple) {
+			report(selected.includes(opt.value)
+				? selected.filter((v) => v !== opt.value)
+				: [...selected, opt.value]);
+		} else {
+			report([opt.value]);
+			setOpen(false);
+		}
+	};
+
+	const labelFor = (v: string) =>
+		props.options.find((o) => o.value === v)?.label ?? v;
+
+	const triggerText = selected.length
+		? selected.map(labelFor).join(', ')
+		: props.placeholder ?? '';
+
+	const shown = props.searchable && query
+		? props.options.filter((o) => (o.label ?? o.value).toLowerCase().includes(query.toLowerCase()))
+		: props.options;
+
+	<>
+		<Pressable
+			bind={(v: any) => { anchor.current = v; }}
+			id={props.id}
+			className={cx('vx-select-trigger', props.disabled && 'vx-select--disabled', props.className)}
+			style={props.style}
+			disabled={props.disabled}
+			onPress={() => setOpen(!open)}
+			accessibilityLabel={props.accessibilityLabel}
+		>
+			<label className={cx('vx-select-value', !selected.length && 'vx-select-placeholder')} text={triggerText} />
+			<label className="vx-select-caret" text="▾" />
+		</Pressable>
+		<Popover
+			anchor={anchor}
+			open={open}
+			placement={props.placement ?? 'bottom'}
+			onDismiss={() => setOpen(false)}
+			className="vx-menu"
+		>
+			{props.searchable
+				? <TextInput
+					className="vx-select-search"
+					placeholder="Search…"
+					value={query}
+					onChange={setQuery}
+				/>
+				: null}
+			<flexboxlayout className="vx-menu-list vx-select-list">
+				@for (const opt of shown; key opt.value) {
+					<flexboxlayout
+						className={cx('vx-menu-item', 'vx-select-option', selected.includes(opt.value) && 'vx-select-option--on', opt.disabled && 'vx-menu-item--disabled')}
+						onTap={opt.disabled ? undefined : () => pick(opt)}
+					>
+						<label className="vx-select-check" text={selected.includes(opt.value) ? '✓' : ''} />
+						<label className="vx-menu-item-label" text={opt.label ?? opt.value} />
+					</flexboxlayout>
+				}
+			</flexboxlayout>
+		</Popover>
+	</>
+}

package/src/Select.web.tsrx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'octane';
+import type { SelectProps, SelectOption } from "./props";
+import { Pressable } from './Pressable.web.tsrx';
+import { Popover } from './Popover.web.tsrx';
+import { TextInput } from './TextInput.web.tsrx';
+
+/** Select — anchored self-drawn listbox on every target (decision #48).
+ *  `multiple` toggles options without closing and reports string[];
+ *  `searchable` filters the list through a normalized TextInput — that
+ *  combination is what Nuxt calls Combobox/InputMenu/SelectMenu. */
+export function Select(props: SelectProps) @{
+	const anchor = useRef<any>(null);
+	const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
+	const openControlled = props.open !== undefined;
+	const open = openControlled ? props.open : internalOpen;
+
+	const norm = (v: string | string[] | undefined) =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v];
+
+	const [internalValue, setInternalValue] = useState<string[]>(norm(props.defaultValue));
+	const valueControlled = props.value !== undefined;
+	const selected = valueControlled ? norm(props.value) : internalValue;
+
+	const [query, setQuery] = useState('');
+
+	const setOpen = (next: boolean) => {
+		if (props.disabled && next) return;
+		if (!openControlled) setInternalOpen(next);
+		if (!next) setQuery('');
+		props.onOpenChange?.(next);
+	};
+
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e: any) => { if (e.key === 'Escape') setOpen(false); };
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	}, [open]);
+
+	const report = (keys: string[]) => {
+		if (!valueControlled) setInternalValue(keys);
+		props.onValueChange?.(props.multiple ? keys : keys[0]);
+	};
+
+	const pick = (opt: SelectOption) => {
+		if (opt.disabled) return;
+		if (props.multiple) {
+			report(selected.includes(opt.value)
+				? selected.filter((v) => v !== opt.value)
+				: [...selected, opt.value]);
+		} else {
+			report([opt.value]);
+			setOpen(false);
+		}
+	};
+
+	const labelFor = (v: string) =>
+		props.options.find((o) => o.value === v)?.label ?? v;
+
+	const triggerText = selected.length
+		? selected.map(labelFor).join(', ')
+		: props.placeholder ?? '';
+
+	const shown = props.searchable && query
+		? props.options.filter((o) => (o.label ?? o.value).toLowerCase().includes(query.toLowerCase()))
+		: props.options;
+
+	<>
+		<Pressable
+			bind={(e: any) => { anchor.current = e; }}
+			id={props.id}
+			className={['vx-select-trigger', props.disabled ? 'vx-select--disabled' : undefined, props.className]}
+			style={props.style}
+			disabled={props.disabled}
+			onPress={() => setOpen(!open)}
+			accessibilityLabel={props.accessibilityLabel}
+			accessibilityState={{ disabled: props.disabled }}
+		>
+			<span className={['vx-select-value', selected.length ? undefined : 'vx-select-placeholder']}>{triggerText}</span>
+			<span className="vx-select-caret" aria-hidden="true">▾</span>
+		</Pressable>
+		<Popover
+			anchor={anchor}
+			open={open}
+			placement={props.placement ?? 'bottom'}
+			onDismiss={() => setOpen(false)}
+			className="vx-menu"
+		>
+			{props.searchable
+				? <TextInput
+					className="vx-select-search"
+					placeholder="Search…"
+					value={query}
+					onChange={setQuery}
+				/>
+				: null}
+			<div role="listbox" aria-multiselectable={props.multiple || undefined} className="vx-menu-list vx-select-list">
+				{shown.map((opt: SelectOption) => {
+					const isSelected = selected.includes(opt.value);
+					return (
+						<div
+							key={opt.value}
+							role="option"
+							aria-selected={isSelected}
+							aria-disabled={opt.disabled || undefined}
+							tabIndex={opt.disabled ? undefined : 0}
+							className={['vx-menu-item', 'vx-select-option', isSelected ? 'vx-select-option--on' : undefined, opt.disabled ? 'vx-menu-item--disabled' : undefined]}
+							onClick={opt.disabled ? undefined : () => pick(opt)}
+							onKeyDown={(e: any) => {
+								if (!opt.disabled && (e.key === ' ' || e.key === 'Enter')) {
+									e.preventDefault();
+									pick(opt);
+								}
+							}}
+						>
+							<span className="vx-select-check" aria-hidden="true">{isSelected ? '✓' : ''}</span>
+							<span className="vx-menu-item-label">{opt.label ?? opt.value}</span>
+						</div>
+					);
+				})}
+			</div>
+		</Popover>
+	</>
+}

package/src/Separator.macos.tsrx

@@ -0,0 +1,17 @@
+/** @jsxImportSource @xplat/macos/renderer */
+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}
+	/>
+}