@octane-xplat/ui 0.6.0 → 0.7.1

package/src/Breadcrumb.tsrx

@@ -0,0 +1,27 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { BreadcrumbProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Breadcrumb — ancestor trail. Every item with `onSelect` renders as a
+ *  tappable link; the last item is conventionally the current page. */
+export function Breadcrumb(props: BreadcrumbProps) @{
+	const sep = props.separator ?? '/';
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection="row"
+		className={cx('vx-breadcrumb', props.className)}
+		style={props.style}
+	>
+		@for (const e of props.items.map((item, i) => ({ item, i })); key e.i) {
+			<flexboxlayout className="vx-breadcrumb-item">
+				{e.i > 0 ? <label className="vx-breadcrumb-sep" text={sep} /> : null}
+				{e.item.onSelect
+					? <label className="vx-breadcrumb-link" text={e.item.label} onTap={e.item.onSelect} />
+					: <label className="vx-breadcrumb-text" text={e.item.label} />}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Breadcrumb.web.tsrx

@@ -0,0 +1,25 @@
+import type { BreadcrumbProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Breadcrumb — ancestor trail. Every item with `onSelect` renders as a
+ *  pressable link; the last item is conventionally the current page. */
+export function Breadcrumb(props: BreadcrumbProps) @{
+	const sep = props.separator ?? '/';
+
+	<nav
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		className={['vx-breadcrumb', props.className]}
+		style={props.style}
+		aria-label={props.accessibilityLabel ?? 'Breadcrumb'}
+	>
+		{props.items.map((item: any, i: number) => (
+			<span key={i} className="vx-breadcrumb-item">
+				{i > 0 ? <span className="vx-breadcrumb-sep" aria-hidden="true">{sep}</span> : null}
+				{item.onSelect
+					? <span className="vx-breadcrumb-link" role="link" tabIndex={0} onClick={item.onSelect} onKeyDown={(e: any) => { if (e.key === 'Enter') item.onSelect?.(); }}>{item.label}</span>
+					: <span className="vx-breadcrumb-text" aria-current={i === props.items.length - 1 ? 'page' : undefined}>{item.label}</span>}
+			</span>
+		))}
+	</nav>
+}

package/src/Button.tsrx

@@ -0,0 +1,23 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ButtonProps } from "./props";
+import { cx } from "./cx";
+import { Pressable } from './Pressable.tsrx';
+import { ActivityIndicator } from './ActivityIndicator.tsrx';
+
+/** Self-drawn button — Pressable row with optional leading/trailing content
+ *  and a `loading` state that swaps children for the spinner and blocks
+ *  presses. `vx-button` makes the row direction; styling is the app's. */
+export function Button(props: ButtonProps) @{
+	const disabled = props.disabled || props.loading;
+
+	<Pressable
+		{...props}
+		disabled={disabled}
+		className={cx('vx-button', props.loading && 'vx-button--loading', props.className)}
+		accessibilityRole={props.accessibilityRole ?? 'button'}
+	>
+		{props.loading
+			? <ActivityIndicator />
+			: <>{props.leading}{props.children}{props.trailing}</>}
+	</Pressable>
+}

package/src/Button.web.tsrx

@@ -0,0 +1,21 @@
+import type { ButtonProps } from "./props";
+import { Pressable } from './Pressable.web.tsrx';
+import { ActivityIndicator } from './ActivityIndicator.web.tsrx';
+
+/** Self-drawn button — Pressable row with optional leading/trailing content
+ *  and a `loading` state that swaps children for the spinner and blocks
+ *  presses. `vx-button` makes the row direction; styling is the app's. */
+export function Button(props: ButtonProps) @{
+	const disabled = props.disabled || props.loading;
+
+	<Pressable
+		{...props}
+		disabled={disabled}
+		className={['vx-button', props.loading ? 'vx-button--loading' : undefined, props.className]}
+		accessibilityRole={props.accessibilityRole ?? 'button'}
+	>
+		{props.loading
+			? <ActivityIndicator />
+			: <>{props.leading}{props.children}{props.trailing}</>}
+	</Pressable>
+}

package/src/CameraView.macos.tsrx

@@ -0,0 +1,6 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { CameraViewProps } from './props'
+
+export function CameraView(_props: CameraViewProps) @{
+	<label className="vx-unsupported">Camera capture is unsupported by the AppKit host</label>
+}

package/src/Card.macos.tsrx

@@ -0,0 +1,13 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { CardProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Card — container with optional header/footer slots. */
+export function Card(props: CardProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-card', props.className)} style={props.style}>
+		{props.header != null ? <flexboxlayout className="vx-card-header">{props.header}</flexboxlayout> : null}
+		<flexboxlayout className="vx-card-body">{props.children}</flexboxlayout>
+		{props.footer != null ? <flexboxlayout className="vx-card-footer">{props.footer}</flexboxlayout> : null}
+	</flexboxlayout>
+}

package/src/Card.tsrx

@@ -0,0 +1,13 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { CardProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+
+/** Card — container with optional header/footer slots. */
+export function Card(props: CardProps) @{
+	<flexboxlayout ref={(v: any) => applyEscapeProps(v, props)} id={props.id} className={cx('vx-card', props.className)} style={props.style}>
+		{props.header != null ? <flexboxlayout className="vx-card-header">{props.header}</flexboxlayout> : null}
+		<flexboxlayout className="vx-card-body">{props.children}</flexboxlayout>
+		{props.footer != null ? <flexboxlayout className="vx-card-footer">{props.footer}</flexboxlayout> : null}
+	</flexboxlayout>
+}

package/src/Card.web.tsrx

@@ -0,0 +1,11 @@
+import type { CardProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Card — container with optional header/footer slots. */
+export function Card(props: CardProps) @{
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-card', props.className]} style={props.style}>
+		{props.header != null ? <div className="vx-card-header">{props.header}</div> : null}
+		<div className="vx-card-body">{props.children}</div>
+		{props.footer != null ? <div className="vx-card-footer">{props.footer}</div> : null}
+	</div>
+}

package/src/Checkbox.tsrx

@@ -0,0 +1,23 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { CheckboxProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props";
+
+/** Self-drawn checkbox — box + ✓ glyph, identical layout across targets.
+ *  Toggles on tap. */
+export function Checkbox(props: CheckboxProps) @{
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-checkbox-row', props.checked && 'vx-checkbox--on', props.disabled && 'vx-checkbox--disabled', props.className)}
+		style={props.style}
+		accessibilityRole={nativeAccessibilityRole('checkbox') as any}
+		accessibilityLabel={props.accessibilityLabel}
+		onTap={props.disabled ? undefined : () => props.onCheckedChange?.(!(props.checked ?? false))}
+	>
+		<flexboxlayout className="vx-checkbox">
+			{props.checked ? <label className="vx-checkbox-check" text="✓" /> : null}
+		</flexboxlayout>
+		{props.label != null ? <label className="vx-checkbox-label" text={props.label} /> : null}
+	</flexboxlayout>
+}

package/src/Checkbox.web.tsrx

@@ -0,0 +1,34 @@
+import type { CheckboxProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+
+/** Self-drawn checkbox — box + ✓ glyph, identical layout across targets.
+ *  Toggles on click, Space, and Enter. The platform look (if wanted) is an
+ *  app's own choice — there is no OS checkbox widget in the subpaths. */
+export function Checkbox(props: CheckboxProps) @{
+	const toggle = () => props.onCheckedChange?.(!(props.checked ?? false));
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		role="checkbox"
+		aria-checked={props.checked ?? false}
+		aria-disabled={props.disabled ?? undefined}
+		aria-label={props.accessibilityLabel}
+		tabIndex={props.disabled ? undefined : 0}
+		className={['vx-checkbox-row', props.checked ? 'vx-checkbox--on' : undefined, props.disabled ? 'vx-checkbox--disabled' : undefined, props.className]}
+		style={props.style}
+		onClick={props.disabled ? undefined : toggle}
+		onKeyDown={(e: any) => {
+			if (props.disabled) return;
+			if (e.key === ' ' || e.key === 'Enter') {
+				e.preventDefault();
+				toggle();
+			}
+		}}
+	>
+		<div className="vx-checkbox" aria-hidden="true">
+			{props.checked ? <span className="vx-checkbox-check">✓</span> : null}
+		</div>
+		{props.label != null ? <span className="vx-checkbox-label">{props.label}</span> : null}
+	</div>
+}

package/src/CheckboxGroup.macos.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { CheckboxGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Checkbox } from './controls.macos.tsrx';
+
+/** CheckboxGroup — multi-select list of self-drawn checkboxes. */
+export function CheckboxGroup(props: CheckboxGroupProps) @{
+	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
+	const controlled = props.value !== undefined;
+	const selected = controlled ? props.value! : internal;
+
+	const setSelected = (next: string[]) => {
+		if (!controlled) setInternal(next);
+		props.onValueChange?.(next);
+	};
+
+	const toggle = (v: string, on: boolean) =>
+		setSelected(on ? [...selected, v] : selected.filter((x) => x !== v));
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal ? 'row' : 'column'}
+		className={cx('vx-checkbox-group', props.horizontal && 'vx-checkbox-group--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@for (const opt of props.options; key opt.value) {
+			<Checkbox
+				checked={selected.includes(opt.value)}
+				disabled={props.disabled || opt.disabled}
+				label={opt.label}
+				onCheckedChange={(on: boolean) => toggle(opt.value, on)}
+			/>
+		}
+	</flexboxlayout>
+}

package/src/CheckboxGroup.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { CheckboxGroupProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Checkbox } from './Checkbox.tsrx';
+
+/** CheckboxGroup — multi-select list of self-drawn checkboxes. */
+export function CheckboxGroup(props: CheckboxGroupProps) @{
+	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
+	const controlled = props.value !== undefined;
+	const selected = controlled ? props.value! : internal;
+
+	const setSelected = (next: string[]) => {
+		if (!controlled) setInternal(next);
+		props.onValueChange?.(next);
+	};
+
+	const toggle = (v: string, on: boolean) =>
+		setSelected(on ? [...selected, v] : selected.filter((x) => x !== v));
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		flexDirection={props.horizontal ? 'row' : 'column'}
+		className={cx('vx-checkbox-group', props.horizontal && 'vx-checkbox-group--row', props.className)}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@for (const opt of props.options; key opt.value) {
+			<Checkbox
+				checked={selected.includes(opt.value)}
+				disabled={props.disabled || opt.disabled}
+				label={opt.label}
+				onCheckedChange={(on: boolean) => toggle(opt.value, on)}
+			/>
+		}
+	</flexboxlayout>
+}

package/src/CheckboxGroup.web.tsrx

@@ -0,0 +1,38 @@
+import { useState } from 'octane';
+import type { CheckboxGroupProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Checkbox } from './Checkbox.web.tsrx';
+
+/** CheckboxGroup — multi-select list of self-drawn checkboxes. */
+export function CheckboxGroup(props: CheckboxGroupProps) @{
+	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
+	const controlled = props.value !== undefined;
+	const selected = controlled ? props.value! : internal;
+
+	const setSelected = (next: string[]) => {
+		if (!controlled) setInternal(next);
+		props.onValueChange?.(next);
+	};
+
+	const toggle = (v: string, on: boolean) =>
+		setSelected(on ? [...selected, v] : selected.filter((x) => x !== v));
+
+	<div
+		ref={(e: any) => applyEscapeProps(e, props)}
+		id={props.id}
+		role="group"
+		aria-label={props.accessibilityLabel}
+		className={['vx-checkbox-group', props.horizontal ? 'vx-checkbox-group--row' : undefined, props.className]}
+		style={props.style}
+	>
+		{props.options.map((opt: any) => (
+			<Checkbox
+				key={opt.value}
+				checked={selected.includes(opt.value)}
+				disabled={props.disabled || opt.disabled}
+				label={opt.label}
+				onCheckedChange={(on: boolean) => toggle(opt.value, on)}
+			/>
+		))}
+	</div>
+}

package/src/Chip.macos.tsrx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import type { ChipProps } from "./props";
+import { cx } from "./cx";
+import { Pressable } from './Pressable.macos.tsrx';
+
+/** Chip — small action/filter element with a selected state and an
+ *  optional ✕ remove affordance. */
+export function Chip(props: ChipProps) @{
+	<Pressable
+		id={props.id}
+		className={cx('vx-chip', props.selected && 'vx-chip--on', props.disabled && 'vx-chip--disabled', props.className)}
+		// `--on` chrome is a CSS modifier on web — inline the same values
+		// (AppKit has no style layer; keep in step with .vx-chip--on).
+		style={{ ...(props.selected ? { backgroundColor: '#171717', color: '#fafafa' } : {}), ...props.style }}
+		disabled={props.disabled}
+		onPress={props.onSelect}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityState={{ selected: props.selected, disabled: props.disabled }}
+	>
+		{props.children}
+		{props.onRemove
+			? <label className="vx-chip-remove" text="✕" style={{ marginLeft: 6, width: 12, height: 16, textAlign: 'center' }} onTap={props.disabled ? undefined : props.onRemove} />
+			: null}
+	</Pressable>
+}

package/src/Chip.tsrx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { ChipProps } from "./props";
+import { cx } from "./cx";
+import { Pressable } from './Pressable.tsrx';
+
+/** Chip — small action/filter element with a selected state and an
+ *  optional ✕ remove affordance. */
+export function Chip(props: ChipProps) @{
+	<Pressable
+		id={props.id}
+		className={cx('vx-chip', props.selected && 'vx-chip--on', props.disabled && 'vx-chip--disabled', props.className)}
+		style={props.style}
+		disabled={props.disabled}
+		onPress={props.onSelect}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityState={{ selected: props.selected, disabled: props.disabled }}
+		ios={props.ios}
+		android={props.android}
+	>
+		{props.children}
+		{props.onRemove
+			? <label className="vx-chip-remove" text="✕" onTap={props.disabled ? undefined : props.onRemove} />
+			: null}
+	</Pressable>
+}

package/src/Chip.web.tsrx

@@ -0,0 +1,25 @@
+import type { ChipProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Pressable } from './Pressable.web.tsrx';
+
+/** Chip — small action/filter element with a selected state and an
+ *  optional ✕ remove affordance. */
+export function Chip(props: ChipProps) @{
+	<Pressable
+		id={props.id}
+		className={['vx-chip', props.selected ? 'vx-chip--on' : undefined, props.disabled ? 'vx-chip--disabled' : undefined, props.className]}
+		style={props.style}
+		disabled={props.disabled}
+		onPress={props.onSelect}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityState={{ selected: props.selected, disabled: props.disabled }}
+		ios={props.ios}
+		android={props.android}
+		web={props.web}
+	>
+		{props.children}
+		{props.onRemove
+			? <span className="vx-chip-remove" role="button" aria-label="Remove" onClick={(e: any) => { e.stopPropagation(); if (!props.disabled) props.onRemove?.(); }}>✕</span>
+			: null}
+	</Pressable>
+}

package/src/Collapsible.macos.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { CollapsibleProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Pressable } from './Pressable.macos.tsrx';
+
+/** Self-drawn collapsible — `trigger` toggles `children` between shown and
+ *  hidden (unmounted). Controlled via `open`/`onOpenChange`, uncontrolled
+ *  via `defaultOpen`. */
+export function Collapsible(props: CollapsibleProps) @{
+	const [internal, setInternal] = useState(props.defaultOpen ?? false);
+	const controlled = props.open !== undefined;
+	const open = controlled ? props.open : internal;
+
+	const toggle = () => {
+		if (props.disabled) return;
+		const next = !open;
+		if (!controlled) setInternal(next);
+		props.onOpenChange?.(next);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-collapsible', open && 'vx-collapsible--open', props.className)}
+		style={props.style}
+	>
+		<Pressable
+			className="vx-collapsible-trigger"
+			disabled={props.disabled}
+			onPress={toggle}
+			accessibilityLabel={props.accessibilityLabel}
+		>
+			{props.trigger}
+		</Pressable>
+		{open ? <flexboxlayout className="vx-collapsible-content">{props.children}</flexboxlayout> : null}
+	</flexboxlayout>
+}

package/src/Collapsible.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { CollapsibleProps } from "./props";
+import { cx } from "./cx";
+import { applyEscapeProps } from "./escape-props";
+import { Pressable } from './Pressable.tsrx';
+
+/** Self-drawn collapsible — `trigger` toggles `children` between shown and
+ *  hidden (unmounted). Controlled via `open`/`onOpenChange`, uncontrolled
+ *  via `defaultOpen`. */
+export function Collapsible(props: CollapsibleProps) @{
+	const [internal, setInternal] = useState(props.defaultOpen ?? false);
+	const controlled = props.open !== undefined;
+	const open = controlled ? props.open : internal;
+
+	const toggle = () => {
+		if (props.disabled) return;
+		const next = !open;
+		if (!controlled) setInternal(next);
+		props.onOpenChange?.(next);
+	};
+
+	<flexboxlayout
+		ref={(v: any) => applyEscapeProps(v, props)}
+		id={props.id}
+		className={cx('vx-collapsible', open && 'vx-collapsible--open', props.className)}
+		style={props.style}
+	>
+		<Pressable
+			className="vx-collapsible-trigger"
+			disabled={props.disabled}
+			onPress={toggle}
+			accessibilityLabel={props.accessibilityLabel}
+		>
+			{props.trigger}
+		</Pressable>
+		{open ? <flexboxlayout className="vx-collapsible-content">{props.children}</flexboxlayout> : null}
+	</flexboxlayout>
+}

package/src/Collapsible.web.tsrx

@@ -0,0 +1,33 @@
+import { useState } from 'octane';
+import type { CollapsibleProps } from "./props";
+import { applyEscapeProps } from "./escape-props";
+import { Pressable } from './Pressable.web.tsrx';
+
+/** Self-drawn collapsible — `trigger` toggles `children` between shown and
+ *  hidden (unmounted). Controlled via `open`/`onOpenChange`, uncontrolled
+ *  via `defaultOpen`. The trigger reports aria-expanded. */
+export function Collapsible(props: CollapsibleProps) @{
+	const [internal, setInternal] = useState(props.defaultOpen ?? false);
+	const controlled = props.open !== undefined;
+	const open = controlled ? props.open : internal;
+
+	const toggle = () => {
+		if (props.disabled) return;
+		const next = !open;
+		if (!controlled) setInternal(next);
+		props.onOpenChange?.(next);
+	};
+
+	<div ref={(e: any) => applyEscapeProps(e, props)} id={props.id} className={['vx-collapsible', open ? 'vx-collapsible--open' : undefined, props.className]} style={props.style}>
+		<Pressable
+			className="vx-collapsible-trigger"
+			disabled={props.disabled}
+			onPress={toggle}
+			accessibilityLabel={props.accessibilityLabel}
+			accessibilityState={{ disabled: props.disabled }}
+		>
+			{props.trigger}
+		</Pressable>
+		{open ? <div className="vx-collapsible-content">{props.children}</div> : null}
+	</div>
+}

package/src/CommandPalette.macos.tsrx

@@ -0,0 +1,58 @@
+/** @jsxImportSource @xplat/macos/renderer */
+import { useState } from 'octane';
+import type { CommandPaletteProps, MenuItem } from "./props";
+import { cx } from "./cx";
+import { Overlay } from './surfaces.macos.tsrx';
+import { TextInput } from './text-controls.macos.tsrx';
+import { Icon } from './Icon.macos.tsrx';
+
+/** CommandPalette — in-window overlay: search field + filtered action
+ *  list. Shade dismisses; Enter selects the first match. */
+export function CommandPalette(props: CommandPaletteProps) @{
+	const [query, setQuery] = useState('');
+
+	const setOpen = (next: boolean) => {
+		if (!next) setQuery('');
+		props.onOpenChange?.(next);
+	};
+
+	const shown = query
+		? props.items.filter((i) => (i.label ?? i.key).toLowerCase().includes(query.toLowerCase()))
+		: props.items;
+
+	const select = (item: MenuItem) => {
+		if (item.disabled) return;
+		setOpen(false);
+		item.onSelect?.();
+	};
+
+	<Overlay open={props.open} shadeCover={true} onDismiss={() => setOpen(false)} className="vx-cmdk-layer">
+		<flexboxlayout
+			className={cx('vx-commandpalette', props.className)}
+			style={props.style}
+			id={props.id}
+			horizontalAlignment="center"
+			verticalAlignment="top"
+			marginTop={80}
+		>
+			<TextInput
+				className="vx-cmdk-search"
+				placeholder={props.placeholder ?? 'Type a command…'}
+				value={query}
+				onChange={setQuery}
+				onSubmit={() => { if (shown.length && !shown[0].disabled) select(shown[0]); }}
+			/>
+			<flexboxlayout className="vx-menu-list vx-cmdk-list">
+				@for (const item of shown; key item.key) {
+					<flexboxlayout
+						className={cx('vx-menu-item', item.disabled && 'vx-menu-item--disabled')}
+						onTap={item.disabled ? undefined : () => select(item)}
+					>
+						{item.icon ? <Icon name={item.icon} /> : null}
+						{item.label != null ? <label className="vx-menu-item-label" text={item.label} /> : null}
+					</flexboxlayout>
+				}
+			</flexboxlayout>
+		</flexboxlayout>
+	</Overlay>
+}

package/src/CommandPalette.tsrx

@@ -0,0 +1,58 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useState } from 'octane';
+import type { CommandPaletteProps, MenuItem } from "./props";
+import { cx } from "./cx";
+import { Overlay } from './Overlay.tsrx';
+import { TextInput } from './TextInput.tsrx';
+import { Icon } from './Icon.tsrx';
+
+/** CommandPalette — in-window overlay: search field + filtered action
+ *  list. Shade dismisses; Enter selects the first match. */
+export function CommandPalette(props: CommandPaletteProps) @{
+	const [query, setQuery] = useState('');
+
+	const setOpen = (next: boolean) => {
+		if (!next) setQuery('');
+		props.onOpenChange?.(next);
+	};
+
+	const shown = query
+		? props.items.filter((i) => (i.label ?? i.key).toLowerCase().includes(query.toLowerCase()))
+		: props.items;
+
+	const select = (item: MenuItem) => {
+		if (item.disabled) return;
+		setOpen(false);
+		item.onSelect?.();
+	};
+
+	<Overlay open={props.open} shadeCover={true} onDismiss={() => setOpen(false)} className="vx-cmdk-layer">
+		<flexboxlayout
+			className={cx('vx-commandpalette', props.className)}
+			style={props.style}
+			id={props.id}
+			horizontalAlignment="center"
+			verticalAlignment="top"
+			marginTop={80}
+		>
+			<TextInput
+				className="vx-cmdk-search"
+				placeholder={props.placeholder ?? 'Type a command…'}
+				value={query}
+				onChange={setQuery}
+				onSubmit={() => { if (shown.length && !shown[0].disabled) select(shown[0]); }}
+			/>
+			<flexboxlayout className="vx-menu-list vx-cmdk-list">
+				@for (const item of shown; key item.key) {
+					<flexboxlayout
+						className={cx('vx-menu-item', item.disabled && 'vx-menu-item--disabled')}
+						onTap={item.disabled ? undefined : () => select(item)}
+					>
+						{item.icon ? <Icon name={item.icon} /> : null}
+						{item.label != null ? <label className="vx-menu-item-label" text={item.label} /> : null}
+					</flexboxlayout>
+				}
+			</flexboxlayout>
+		</flexboxlayout>
+	</Overlay>
+}