@octane-xplat/picker 0.0.0 → 0.7.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alec Larson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# `@octane-xplat/picker`
+
+An install boundary for platform-specific selection controls: a SwiftUI `Picker`
+on iOS, a Material 3 dropdown built with Jetpack Compose on Android, and an
+HTML `<select>` on web.
+
+Install the package in the app that renders a control. Import `SwiftUIPicker`
+from `@octane-xplat/picker/ios`, `MaterialDropdown` from
+`@octane-xplat/picker/android`, or `Select` from `@octane-xplat/picker/web` in
+the matching platform-suffixed file. Each entry exports its own component and
+types; there is no shared picker API at the package root.
+
+The platform APIs use their own selection vocabulary and option shapes. The iOS
+entry uses SwiftUI selection IDs, the Android entry uses Material dropdown keys
+and enabled states, and the web entry follows browser select values. See the
+framework guide for details and maintained examples:
+[`docs/native-picker.md`](../../docs/native-picker.md).

package/dist/native/MaterialDropdown.android.tsrx.js

@@ -0,0 +1,49 @@
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useState } from "@nativescript-community/octane";
+import { ComposeDataDriver, JetpackCompose, registerJetpackCompose } from "@nativescript/jetpack-compose";
+//#region src/MaterialDropdown.android.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatandroidpicker",
+	"props": { "composeId": "xplat-material-dropdown" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["data", 3],
+		["onComposeEvent", 4]
+	]
+});
+registerElement("xplatandroidpicker", JetpackCompose);
+registerJetpackCompose("xplat-material-dropdown", (owner) => new ComposeDataDriver(new com.octanexplat.nativepicker.XplatPickerProvider(), owner));
+var MaterialDropdown = defineUniversalComponent("nativescript", function MaterialDropdown(props) {
+	const controlled = props.selectedKey !== void 0;
+	const [internalKey, setInternalKey] = useState(props.defaultSelectedKey ?? props.items[0]?.key ?? "", _h$0);
+	const selectedKey = controlled ? props.selectedKey : internalKey;
+	const data = {
+		label: props.label,
+		accessibilityLabel: props.accessibilityLabel ?? props.label,
+		options: props.items.map((item) => ({
+			value: item.key,
+			label: item.text,
+			disabled: item.enabled === false ? 1 : 0
+		})),
+		value: selectedKey,
+		disabled: props.enabled === false ? 1 : 0
+	};
+	const update = (nextKey) => {
+		if (!controlled) setInternalKey(nextKey);
+		props.onSelectedKeyChange?.(nextKey);
+	};
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		props.className,
+		props.style,
+		data,
+		(event) => {
+			if (typeof event.data === "string") update(event.data);
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { MaterialDropdown };

package/dist/native/SwiftUIPicker.ios.tsrx.js

@@ -0,0 +1,49 @@
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useState } from "@nativescript-community/octane";
+import { SwiftUI, UIDataDriver, registerSwiftUI } from "@nativescript/swift-ui";
+//#region src/SwiftUIPicker.ios.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatiospicker",
+	"props": { "swiftId": "xplat-swiftui-picker" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["data", 3],
+		["onSwiftUIEvent", 4]
+	]
+});
+registerElement("xplatiospicker", SwiftUI);
+registerSwiftUI("xplat-swiftui-picker", (owner) => new UIDataDriver(new XplatPickerProvider(), owner));
+var SwiftUIPicker = defineUniversalComponent("nativescript", function SwiftUIPicker(props) {
+	const controlled = props.selection !== void 0;
+	const [internalSelection, setInternalSelection] = useState(props.defaultSelection ?? props.options[0]?.id ?? "", _h$0);
+	const selection = controlled ? props.selection : internalSelection;
+	const update = (nextSelection) => {
+		if (!controlled) setInternalSelection(nextSelection);
+		props.onSelectionChange?.(nextSelection);
+	};
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		props.className,
+		props.style,
+		{
+			label: props.label,
+			accessibilityLabel: props.accessibilityLabel ?? props.label,
+			options: props.options.map((option) => ({
+				value: option.id,
+				label: option.title,
+				disabled: option.disabled ?? false
+			})),
+			value: selection,
+			disabled: props.disabled ?? false
+		},
+		(event) => {
+			const nextSelection = event.data?.value;
+			if (typeof nextSelection === "string") update(nextSelection);
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SwiftUIPicker };

package/dist/native/android/index.js

@@ -0,0 +1,2 @@
+import { MaterialDropdown } from "../MaterialDropdown.android.tsrx.js";
+export { MaterialDropdown };

package/dist/native/ios/index.js

@@ -0,0 +1,2 @@
+import { SwiftUIPicker } from "../SwiftUIPicker.ios.tsrx.js";
+export { SwiftUIPicker };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "f937562f-881c-4401-8db3-32b875678ba8",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/Select.web.tsrx.js

@@ -0,0 +1,92 @@
+import { __s, bag14, bag5, child, clone, createScopedElement, delegateEvents, hookSlots, mapSlot, setAriaAttribute, setAttribute, setBooleanAttribute, setEventHandler, setStyle, sibling, template, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalValue, compilerMemoRegion, enableSignalBindings, hookMemoEqual, setPlainAttribute } from "octane/internal/client";
+//#region src/Select.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["change"]);
+var _t$0 = /* @__PURE__ */ template("<option></option>");
+var _t$1 = /* @__PURE__ */ template("<label><span></span><select data-octane-input=\"i:d2ddab07\"><!></select></label>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _key$1 = (option) => option.value;
+function __item$2(option, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag5(__s, _root, void 0, _m1, void 0, null, void 0);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "value", option.value, "b:f8ba3234", setAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "disabled", option.disabled, "b:97cc1a6e", setBooleanAttribute);
+	_b.f = bindSignalChild(__s, _b.f, 1, _b.b, option.label, "b:f207a308", null, void 0, void 0, void 0, true);
+}
+var Select = /* @__PURE__ */ __s(function Select(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	const __memoCommitted = __memoRegion.auto;
+	let __memoCache = __memoCommitted === void 0 ? [] : __memoCommitted;
+	let __mapItems;
+	let __mapMethod;
+	const controlled = props.value !== void 0;
+	const [internalValue, setInternalValue] = useState(props.defaultValue ?? props.options[0]?.value ?? "", _hs$ + 0);
+	const value = controlled ? props.value : internalValue;
+	const labelId = props.id ? `${props.id}-label` : void 0;
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4, _m6, _m9, _m11;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		const _el0 = child(_root);
+		_m4 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m6 = _el1;
+		_m9 = bindSignalValue(__s, void 0, _el1, value, "i:d2ddab07");
+		setEventHandler(_el1, "$$change", (event) => {
+			const nextValue = event.target.value;
+			if (!controlled) setInternalValue(nextValue);
+			props.onChange?.(nextValue);
+		});
+		_m11 = child(_el1);
+		_b = bag14(__s, _root, void 0, _m1, void 0, void 0, _m4, void 0, _m6, void 0, void 0, _m9, void 0, _m11, null, void 0);
+	} else {
+		_b.j = bindSignalValue(__s, _b.j, _b.g, value, "i:d2ddab07");
+		setEventHandler(_b.g, "$$change", (event) => {
+			const nextValue = event.target.value;
+			if (!controlled) setInternalValue(nextValue);
+			props.onChange?.(nextValue);
+		});
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:1fc7f020", "class");
+	{
+		const _v = props.style;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
+		}
+	}
+	_b.d = bindSignalAttribute(__s, _b.d, _b.e, "id", labelId, "b:9b7dc37e", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.g, "id", props.id, "b:0291033d", setPlainAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.g, "aria-label", props.accessibilityLabel ?? props.label, "b:fc00c409", setAriaAttribute);
+	_b.i = bindSignalAttribute(__s, _b.i, _b.g, "aria-labelledby", labelId, "b:adebc444", setAriaAttribute);
+	_b.k = bindSignalAttribute(__s, _b.k, _b.g, "disabled", props.disabled, "b:1f344a18", setBooleanAttribute);
+	_b.o = bindSignalChild(__s, _b.o, 1, _b.e, props.label, "b:7206b4a3", null, void 0, void 0, void 0, true);
+	{
+		const _v = (__mapItems = props.options, __mapMethod = __mapItems.map, __mapItems);
+		const __mapNative = mapSlot(_v, __mapMethod);
+		{
+			const __memoDep = _v;
+			if (__s.slots[2] === void 0 || !__mapNative || __memoCache[1] !== true || !hookMemoEqual(__memoCache[0], __memoDep)) {
+				mapSlot(__s, 2, _b.g, _v, __mapMethod, __mapNative, (option) => createScopedElement("option", {
+					key: option.value,
+					value: option.value,
+					disabled: option.disabled
+				}, () => option.label), _key$1, __item$2, 27, void 0, _b.l, 1);
+				if (__memoCache === __memoCommitted) __memoCache = __memoCache.slice();
+				__memoCache[0] = __memoDep;
+				__memoCache[1] = __mapNative;
+			}
+		}
+	}
+	if (__memoCache !== __memoCommitted) __memoRegion.auto = __memoCache;
+});
+//#endregion
+export { Select };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "8f629934-c34b-456d-8880-cba539bf4f5f",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/web/index.js

@@ -0,0 +1,2 @@
+import { Select } from "../Select.web.tsrx.js";
+export { Select };

package/package.json

@@ -1,6 +1,86 @@
 {
-	"name": "@octane-xplat/picker",
-	"version": "0.0.0",
-	"description": "Stub reserving the name; real releases publish from CI via trusted publishing.",
-	"publishConfig": {"access": "public"}
-}
+  "name": "@octane-xplat/picker",
+  "version": "0.7.1",
+  "description": "Select control for Octane xplat — web select + SwiftUI picker (iOS) / Material dropdown (Android)",
+  "keywords": [
+    "octane",
+    "xplat",
+    "cross-platform",
+    "picker",
+    "select",
+    "dropdown",
+    "combobox",
+    "nativescript",
+    "ios",
+    "android",
+    "web"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/picker",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "directory": "packages/picker"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src",
+    "platforms"
+  ],
+  "type": "module",
+  "exports": {
+    "./ios": {
+      "types": "./types/ios/index.d.ts",
+      "native": "./dist/native/ios/index.js"
+    },
+    "./android": {
+      "types": "./types/android/index.d.ts",
+      "native": "./dist/native/android/index.js"
+    },
+    "./web": {
+      "types": "./types/web/index.d.ts",
+      "web": "./dist/web/web/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nativescript/jetpack-compose": "1.0.0-beta.0",
+    "@nativescript/swift-ui": "4.0.2"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.1",
+    "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.61",
+    "octane": "0.6.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    },
+    "octane": {
+      "optional": true
+    }
+  },
+  "nativescript": {
+    "platforms": {
+      "android": "9.1.0",
+      "ios": "9.1.0"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs"
+  }
+}

package/platforms/android/include.gradle

@@ -0,0 +1,15 @@
+apply plugin: 'org.jetbrains.kotlin.plugin.compose'
+
+android {
+	buildFeatures {
+		compose true
+	}
+	kotlinOptions {
+		jvmTarget = '17'
+	}
+}
+
+dependencies {
+	implementation platform('androidx.compose:compose-bom:2024.12.01')
+	implementation 'androidx.compose.material3:material3'
+}

package/platforms/android/java/com/octanexplat/nativepicker/XplatPickerProvider.kt

@@ -0,0 +1,112 @@
+package com.octanexplat.nativepicker
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.unit.dp
+
+private data class PickerOption(
+	val value: String,
+	val label: String,
+	val disabled: Boolean,
+)
+
+private data class PickerState(
+	val label: String = "",
+	val accessibilityLabel: String = "",
+	val value: String = "",
+	val disabled: Boolean = false,
+	val options: List<PickerOption> = emptyList(),
+)
+
+private fun Any?.asBoolean(): Boolean = when (this) {
+	is Boolean -> this
+	is Number -> toInt() != 0
+	else -> false
+}
+
+class XplatPickerProvider {
+	private var state by mutableStateOf(PickerState())
+	var onEvent: ((String) -> Unit)? = null
+
+	fun generateComposeView(view: ComposeView) {
+		view.setContent {
+			MaterialTheme {
+				PickerContent(
+					state = state,
+					onValueChange = { value -> onEvent?.invoke(value) },
+				)
+			}
+		}
+	}
+
+	fun updateData(input: Map<Any, Any>) {
+		val data = input["data"] as? Map<*, *> ?: input
+		val options = (data["options"] as? List<*>)			.orEmpty()
+			.mapNotNull { raw ->
+				val option = raw as? Map<*, *> ?: return@mapNotNull null
+				val value = option["value"] as? String ?: return@mapNotNull null
+				val label = option["label"] as? String ?: return@mapNotNull null
+				PickerOption(value, label, option["disabled"].asBoolean())
+			}
+
+		state = PickerState(
+			label = data["label"] as? String ?: "",
+			accessibilityLabel = data["accessibilityLabel"] as? String ?: "",
+			value = data["value"] as? String ?: options.firstOrNull()?.value.orEmpty(),
+			disabled = data["disabled"].asBoolean(),
+			options = options,
+		)
+	}
+}
+
+@Composable
+private fun PickerContent(state: PickerState, onValueChange: (String) -> Unit) {
+	var expanded by remember { mutableStateOf(false) }
+	val selectedLabel = state.options.firstOrNull { it.value == state.value }?.label.orEmpty()
+
+	Row(
+		modifier = Modifier
+			.fillMaxWidth()
+			.padding(horizontal = 12.dp, vertical = 4.dp)
+			.semantics { contentDescription = state.accessibilityLabel },
+		horizontalArrangement = Arrangement.SpaceBetween,
+		verticalAlignment = Alignment.CenterVertically,
+	) {
+		Text(state.label)
+		Box {
+			Button(onClick = { expanded = !expanded }, enabled = !state.disabled) {
+				Text(selectedLabel)
+			}
+			DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
+				state.options.forEach { option ->
+					DropdownMenuItem(
+						text = { Text(option.label) },
+						enabled = !option.disabled,
+						onClick = {
+							expanded = false
+							onValueChange(option.value)
+						},
+					)
+				}
+			}
+		}
+	}
+}

package/platforms/ios/src/XplatPickerProvider.swift

@@ -0,0 +1,90 @@
+import SwiftUI
+
+private struct PickerOption: Identifiable {
+	let value: String
+	let label: String
+	let disabled: Bool
+
+	var id: String { value }
+}
+
+private final class PickerModel: ObservableObject {
+	@Published var label = ""
+	@Published var accessibilityLabel = ""
+	@Published var value = ""
+	@Published var disabled = false
+	@Published var options: [PickerOption] = []
+	var onValueChange: ((String) -> Void)?
+}
+
+private struct PickerContent: View {
+	@ObservedObject var model: PickerModel
+
+	var body: some View {
+		Picker(model.label, selection: Binding(
+			get: { model.value },
+			set: { nextValue in
+				model.value = nextValue
+				model.onValueChange?(nextValue)
+			},
+		)) {
+			ForEach(model.options) { option in
+				Text(option.label)
+					.tag(option.value)
+					.disabled(option.disabled)
+			}
+		}
+		.pickerStyle(.menu)
+		.disabled(model.disabled)
+		.accessibilityLabel(model.accessibilityLabel)
+		.background(Color.clear)
+	}
+}
+
+@objc(XplatPickerProvider)
+public final class XplatPickerProvider: UIViewController, SwiftUIProvider {
+	private let model = PickerModel()
+
+	public required init() {
+		super.init(nibName: nil, bundle: nil)
+		model.onValueChange = { [weak self] value in
+			self?.onEvent?(["value": value])
+		}
+	}
+
+	public required init?(coder: NSCoder) {
+		super.init(coder: coder)
+		model.onValueChange = { [weak self] value in
+			self?.onEvent?(["value": value])
+		}
+	}
+
+	public override func viewDidLoad() {
+		super.viewDidLoad()
+		setupSwiftUIView(content: PickerContent(model: model))
+	}
+
+	public func updateData(data: NSDictionary) {
+		if let label = data["label"] as? String { model.label = label }
+		if let accessibilityLabel = data["accessibilityLabel"] as? String {
+			model.accessibilityLabel = accessibilityLabel
+		}
+		if let value = data["value"] as? String { model.value = value }
+		if let disabled = data["disabled"] as? NSNumber { model.disabled = disabled.boolValue }
+		if let options = data["options"] as? [[String: Any]] {
+			model.options = options.compactMap { option in
+				guard let value = option["value"] as? String,
+					let label = option["label"] as? String
+				else { return nil }
+
+				return PickerOption(
+					value: value,
+					label: label,
+					disabled: (option["disabled"] as? NSNumber)?.boolValue ?? false,
+				)
+			}
+		}
+	}
+
+	public var onEvent: ((NSDictionary) -> Void)?
+}

package/src/MaterialDropdown.android.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import { ComposeDataDriver, JetpackCompose, registerJetpackCompose } from '@nativescript/jetpack-compose'
+import { useState } from 'octane'
+import type { MaterialDropdownProps } from './android/types'
+
+declare const com: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatandroidpicker: Attributes<typeof JetpackCompose>
+	}
+}
+
+registerElement('xplatandroidpicker', JetpackCompose)
+registerJetpackCompose('xplat-material-dropdown', (owner: any) =>
+	new ComposeDataDriver(new com.octanexplat.nativepicker.XplatPickerProvider(), owner),
+)
+
+/** Renders a Material 3 dropdown through the NativeScript Jetpack Compose bridge. */
+export function MaterialDropdown(props: MaterialDropdownProps) @{
+	const controlled = props.selectedKey !== undefined
+	const [internalKey, setInternalKey] = useState(props.defaultSelectedKey ?? props.items[0]?.key ?? '')
+	const selectedKey = controlled ? props.selectedKey! : internalKey
+	const data = {
+		label: props.label,
+		accessibilityLabel: props.accessibilityLabel ?? props.label,
+		options: props.items.map((item) => ({
+			value: item.key,
+			label: item.text,
+			disabled: item.enabled === false ? 1 : 0,
+		})),
+		value: selectedKey,
+		disabled: props.enabled === false ? 1 : 0,
+	}
+	const update = (nextKey: string) => {
+		if (!controlled) setInternalKey(nextKey)
+		props.onSelectedKeyChange?.(nextKey)
+	}
+
+	<xplatandroidpicker
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		composeId="xplat-material-dropdown"
+		data={data}
+		onComposeEvent={(event: any) => {
+			if (typeof event.data === 'string') update(event.data)
+		}}
+	/>;
+}

package/src/Select.web.tsrx

@@ -0,0 +1,33 @@
+/** @jsxImportSource octane */
+import { useState } from 'octane'
+import type { SelectProps } from './web/types'
+
+/** Renders a labeled browser select. */
+export function Select(props: SelectProps) @{
+	const controlled = props.value !== undefined
+	const [internalValue, setInternalValue] = useState(props.defaultValue ?? props.options[0]?.value ?? '')
+	const value = controlled ? props.value! : internalValue
+	const labelId = props.id ? `${props.id}-label` : undefined
+
+	<label className={props.className} style={props.style}>
+		<span id={labelId}>{props.label}</span>
+		<select
+			id={props.id}
+			aria-label={props.accessibilityLabel ?? props.label}
+			aria-labelledby={labelId}
+			value={value}
+			disabled={props.disabled}
+			onChange={(event: any) => {
+				const nextValue = event.target.value as string
+				if (!controlled) setInternalValue(nextValue)
+				props.onChange?.(nextValue)
+			}}
+		>
+			{props.options.map((option) => (
+				<option key={option.value} value={option.value} disabled={option.disabled}>
+					{option.label}
+				</option>
+			))}
+		</select>
+	</label>
+}

package/src/SwiftUIPicker.ios.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import { SwiftUI, UIDataDriver, registerSwiftUI } from '@nativescript/swift-ui'
+import { useState } from 'octane'
+import type { SwiftUIPickerProps } from './ios/types'
+
+declare const XplatPickerProvider: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatiospicker: Attributes<typeof SwiftUI>
+	}
+}
+
+registerElement('xplatiospicker', SwiftUI)
+registerSwiftUI('xplat-swiftui-picker', (owner: any) =>
+	new UIDataDriver(new XplatPickerProvider(), owner),
+)
+
+/** Renders a menu-style SwiftUI Picker through NativeScript's SwiftUI bridge. */
+export function SwiftUIPicker(props: SwiftUIPickerProps) @{
+	const controlled = props.selection !== undefined
+	const [internalSelection, setInternalSelection] = useState(props.defaultSelection ?? props.options[0]?.id ?? '')
+	const selection = controlled ? props.selection! : internalSelection
+	const update = (nextSelection: string) => {
+		if (!controlled) setInternalSelection(nextSelection)
+		props.onSelectionChange?.(nextSelection)
+	}
+
+	<xplatiospicker
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		swiftId="xplat-swiftui-picker"
+		data={{
+			label: props.label,
+			accessibilityLabel: props.accessibilityLabel ?? props.label,
+			options: props.options.map((option) => ({
+				value: option.id,
+				label: option.title,
+				disabled: option.disabled ?? false,
+			})),
+			value: selection,
+			disabled: props.disabled ?? false,
+		}}
+		onSwiftUIEvent={(event: any) => {
+			const nextSelection = event.data?.value
+			if (typeof nextSelection === 'string') update(nextSelection)
+		}}
+	/>;
+}

package/src/android/index.ts

@@ -0,0 +1,2 @@
+export { MaterialDropdown } from '../MaterialDropdown.android.tsrx'
+export type { MaterialDropdownItem, MaterialDropdownProps } from './types'

package/src/android/types.ts

@@ -0,0 +1,18 @@
+export interface MaterialDropdownItem {
+	key: string
+	text: string
+	enabled?: boolean
+}
+
+export interface MaterialDropdownProps {
+	id?: string
+	className?: any
+	style?: any
+	label: string
+	items: readonly MaterialDropdownItem[]
+	selectedKey?: string
+	defaultSelectedKey?: string
+	onSelectedKeyChange?: (key: string) => void
+	enabled?: boolean
+	accessibilityLabel?: string
+}

package/src/ios/index.ts

@@ -0,0 +1,2 @@
+export { SwiftUIPicker } from '../SwiftUIPicker.ios.tsrx'
+export type { SwiftUIPickerOption, SwiftUIPickerProps } from './types'

package/src/ios/types.ts

@@ -0,0 +1,18 @@
+export interface SwiftUIPickerOption {
+	id: string
+	title: string
+	disabled?: boolean
+}
+
+export interface SwiftUIPickerProps {
+	id?: string
+	className?: any
+	style?: any
+	label: string
+	options: readonly SwiftUIPickerOption[]
+	selection?: string
+	defaultSelection?: string
+	onSelectionChange?: (selection: string) => void
+	disabled?: boolean
+	accessibilityLabel?: string
+}

package/src/web/index.ts

@@ -0,0 +1,2 @@
+export { Select } from '../Select.web.tsrx'
+export type { SelectOption, SelectProps } from './types'

package/src/web/types.ts

@@ -0,0 +1,18 @@
+export interface SelectOption {
+	value: string
+	label: string
+	disabled?: boolean
+}
+
+export interface SelectProps {
+	id?: string
+	className?: any
+	style?: any
+	label: string
+	options: readonly SelectOption[]
+	value?: string
+	defaultValue?: string
+	onChange?: (value: string) => void
+	disabled?: boolean
+	accessibilityLabel?: string
+}

package/types/android/index.d.ts

@@ -0,0 +1,22 @@
+import type { UniversalComponent } from 'octane/universal'
+
+export interface MaterialDropdownItem {
+	key: string
+	text: string
+	enabled?: boolean
+}
+
+export interface MaterialDropdownProps {
+	id?: string
+	className?: any
+	style?: any
+	label: string
+	items: readonly MaterialDropdownItem[]
+	selectedKey?: string
+	defaultSelectedKey?: string
+	onSelectedKeyChange?: (key: string) => void
+	enabled?: boolean
+	accessibilityLabel?: string
+}
+
+export declare const MaterialDropdown: UniversalComponent<MaterialDropdownProps>

package/types/ios/index.d.ts

@@ -0,0 +1,22 @@
+import type { UniversalComponent } from 'octane/universal'
+
+export interface SwiftUIPickerOption {
+	id: string
+	title: string
+	disabled?: boolean
+}
+
+export interface SwiftUIPickerProps {
+	id?: string
+	className?: any
+	style?: any
+	label: string
+	options: readonly SwiftUIPickerOption[]
+	selection?: string
+	defaultSelection?: string
+	onSelectionChange?: (selection: string) => void
+	disabled?: boolean
+	accessibilityLabel?: string
+}
+
+export declare const SwiftUIPicker: UniversalComponent<SwiftUIPickerProps>

package/types/web/index.d.ts

@@ -0,0 +1,22 @@
+import type { UniversalComponent } from 'octane/universal'
+
+export interface SelectOption {
+	value: string
+	label: string
+	disabled?: boolean
+}
+
+export interface SelectProps {
+	id?: string
+	className?: any
+	style?: any
+	label: string
+	options: readonly SelectOption[]
+	value?: string
+	defaultValue?: string
+	onChange?: (value: string) => void
+	disabled?: boolean
+	accessibilityLabel?: string
+}
+
+export declare const Select: UniversalComponent<SelectProps>