@octane-xplat/date-picker 0.0.0-nightly.g14544fe

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,142 @@
+# `@octane-xplat/date-picker`
+
+Platform-specific date and time pickers for Octane xplat apps: a SwiftUI
+`DatePicker` on iOS, Material 3 `DatePicker`/`TimePicker` built with Jetpack
+Compose on Android, and a real `NSDatePicker` on macOS. For portable form
+controls that work on every target, use `Calendar`, `DateInput`,
+`TimeInput`, `DateTimeInput`, and `DateRangeInput` from `@octane-xplat/ui`.
+
+```tsx
+import { useState } from 'octane'
+import { DateInput } from '@octane-xplat/ui'
+
+export function DepartureDate() {
+	const [date, setDate] = useState<string | null>('2026-10-02')
+	return <DateInput value={date} onChange={setDate} label="Departure" />
+}
+```
+
+There is no shared picker component. Install the package in the app that
+renders a control, then import `SwiftUIDatePicker` from
+`@octane-xplat/date-picker/ios`, `MaterialDatePicker` from
+`@octane-xplat/date-picker/android`, or `AppKitDatePicker` from
+`@octane-xplat/date-picker/macos` in the matching platform-suffixed file.
+These native entries have platform-specific contracts.
+The old `@octane-xplat/date-picker/web` `DateInput` subpath was removed because
+its browser-only string contract conflicted with the shared `DateInput` API.
+
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// SwiftUIDatePickerExample.ios.tsx
+import { SwiftUIDatePicker } from '@octane-xplat/date-picker/ios'
+
+export function Picker() {
+	return (
+		<SwiftUIDatePicker
+			defaultSelection={new Date(2026, 9, 2)}
+			displayedComponents={['date']}
+			pickerStyle="graphical"
+			onSelectionChange={console.log}
+		/>
+	)
+}
+```
+
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// MaterialDatePickerExample.android.tsx
+import { MaterialDatePicker } from '@octane-xplat/date-picker/android'
+
+const initialDate = new Date(2026, 9, 2)
+const bounds = { start: new Date(2026, 0, 1), end: new Date(2026, 11, 31) }
+
+export function Picker() {
+	return (
+		<MaterialDatePicker
+			initialDate={initialDate}
+			selectableDates={bounds}
+			onDateSelected={console.log}
+		/>
+	)
+}
+```
+
+```tsx
+// AppKitDatePickerExample.macos.tsx
+import { AppKitDatePicker } from '@octane-xplat/date-picker/macos'
+
+export function Picker() {
+	return (
+		<AppKitDatePicker
+			components="date"
+			pickerStyle="graphical"
+			defaultSelection={new Date(2026, 9, 2)}
+			onSelectionChange={console.log}
+		/>
+	)
+}
+```
+
+The platform APIs use their own selection vocabulary: the iOS entry takes a
+controlled `selection`/`defaultSelection` `Date` with `displayedComponents`
+and `pickerStyle`; the Android entry follows the uncontrolled
+`initialDate`/`onDateSelected` model of the Material 3 pickers with
+`selectableDates` range bounds; the macOS entry takes
+`components`/`pickerStyle` (`'graphical'` embeds the
+inline calendar) with a controlled `selection` `Date`.
+
+```tsx
+// Departure.macos.tsx
+import { useState } from 'octane'
+import { AppKitDatePicker } from '@octane-xplat/date-picker/macos'
+
+export function Departure() {
+	const [selection, setSelection] = useState(new Date(2026, 9, 2))
+	return (
+		<AppKitDatePicker
+			components="date"
+			pickerStyle="graphical"
+			selection={selection}
+			onSelectionChange={setSelection}
+		/>
+	)
+}
+```
+
+Android notes: give `MaterialDatePicker` a bounded height (the M3 calendar's
+lazy grid collapses under unbounded height), and keep `initialDate` and
+`selectableDates` identity-stable — the provider keys its state `remember`
+on them, so a per-render `new Date()` resets the selection.
+See the framework guide for details and maintained examples:
+[`docs/platform/date-picker.md`](../../docs/platform/date-picker.md).
+
+```tsx
+/** @jsxImportSource @nativescript-community/octane */
+// Departure.android.tsx — reuse these objects while the picker is mounted.
+import { MaterialDatePicker } from '@octane-xplat/date-picker/android'
+
+const initialDate = new Date(2026, 9, 2)
+const selectableDates = { start: new Date(2026, 0, 1) }
+export function Departure() {
+	return (
+		<MaterialDatePicker
+			className="departure-calendar"
+			initialDate={initialDate}
+			selectableDates={selectableDates}
+			onDateSelected={console.log}
+		/>
+	)
+}
+```
+
+```css
+/* App stylesheet: give the Android calendar room for its grid. */
+.departure-calendar {
+	height: 480px;
+}
+```
+
+The native implementations are adapted from `@expo/ui` (MIT,
+`packages/expo-ui` sdk-57): `ios/DatePickerView.swift` and
+`android/.../ui/DatePickerView.kt`. Attribution headers sit on the ported
+files.

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@octane-xplat/date-picker",
+  "version": "0.0.0-nightly.g14544fe",
+  "description": "Platform-specific date and time selection controls for Octane xplat",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
+    "directory": "packages/date-picker"
+  },
+  "files": [
+    "types",
+    "src",
+    "platforms",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "web": "./src/index.ts",
+      "native": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./ios": {
+      "types": "./types/ios/index.d.ts",
+      "native": "./src/ios/index.ts"
+    },
+    "./android": {
+      "types": "./types/android/index.d.ts",
+      "native": "./src/android/index.ts"
+    },
+    "./macos": {
+      "types": "./types/macos/index.d.ts",
+      "macos": "./src/macos/index.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nativescript/jetpack-compose": "1.0.0-beta.0",
+    "@nativescript/swift-ui": "4.0.2"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.5",
+    "@nativescript/core": "9.1.3",
+    "@octane-xplat/macos-renderer": "0.0.0-nightly.g14544fe",
+    "@octanejs/vite-plugin": "0.1.61",
+    "octane": "0.11.0",
+    "tsrx-typegen": "0.3.0",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.1.51 <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": {
+    "test:packed": "node tests/packed-consumer.mjs",
+    "pack:check": "tsrx-typegen --pack-check",
+    "typegen": "tsc -p tsconfig.types.json"
+  }
+}

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/datepicker/XplatDatePickerProvider.kt

@@ -0,0 +1,348 @@
+// Adapted from @expo/ui (MIT) — Copyright 2025-present 650 Industries.
+// Upstream: expo/packages/expo-ui/android/.../ui/DatePickerView.kt (sdk-57).
+// The ExpoModules glue (@OptimizedRecord/@OptimizedComposeProps records,
+// ModifierRegistry, AsyncFunctionHandle) is replaced by the
+// @nativescript/jetpack-compose provider contract: updateData(Map) + onEvent.
+// Colors arrive as CSS hex strings instead of expo ColorValue ints. The
+// dialog wrappers (DatePickerDialog/TimePickerDialog) are not ported; the
+// inline DatePicker/TimePicker composables cover this leaf's contract.
+
+package com.octanexplat.datepicker
+
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDefaults
+import androidx.compose.material3.DatePickerState
+import androidx.compose.material3.DisplayMode
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SelectableDates
+import androidx.compose.material3.TimePicker
+import androidx.compose.material3.TimePickerDefaults
+import androidx.compose.material3.TimePickerLayoutType
+import androidx.compose.material3.TimePickerState
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.foundation.isSystemInDarkTheme
+import org.json.JSONObject
+import java.util.Calendar
+import java.util.Date
+
+private fun Any?.asBoolean(): Boolean = when (this) {
+	is Boolean -> this
+	is Number -> toInt() != 0
+	else -> false
+}
+
+private fun Any?.asLong(): Long? = when (this) {
+	is Number -> toLong()
+	else -> null
+}
+
+// android.graphics.Color.parseColor only accepts #RRGGBB/#AARRGGBB (and
+// named colors); the elementColors doc also advertises the CSS-style #rgb
+// shorthand — expand it so a documented value doesn't silently fall back.
+private fun expandShortHex(value: String): String =
+	if (value.length == 4 && value.startsWith('#')) {
+		"#" + value.substring(1).map { "$it$it" }.joinToString("")
+	} else {
+		value
+	}
+
+private fun Any?.asColor(): Color? = when (this) {
+	is String -> runCatching { Color(android.graphics.Color.parseColor(expandShortHex(this))) }.getOrNull()
+	else -> null
+}
+
+private data class SelectableRange(
+	val start: Long? = null,
+	val end: Long? = null,
+)
+
+private data class DatePickerUiState(
+	val initialDate: Long? = null,
+	val variant: String = "picker",
+	val displayedComponents: String = "date",
+	val showVariantToggle: Boolean = true,
+	val is24Hour: Boolean = true,
+	val color: Color? = null,
+	val elementColors: Map<*, *> = emptyMap<Any?, Any?>(),
+	val selectableDates: SelectableRange = SelectableRange(),
+)
+
+private fun toUtcDayMillis(localMillis: Long): Long {
+	val cal = Calendar.getInstance()
+	cal.timeInMillis = localMillis
+	val utcCal = Calendar.getInstance(java.util.TimeZone.getTimeZone("UTC"))
+	utcCal.set(cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DAY_OF_MONTH), 0, 0, 0)
+	utcCal.set(Calendar.MILLISECOND, 0)
+	return utcCal.timeInMillis
+}
+
+// Material3 stores selectedDateMillis as UTC-midnight epoch; emitting it raw
+// makes `new Date(ms)` resolve to the previous day in negative-UTC zones.
+// Convert back to local-midnight millis so the JS-side Date lands on the
+// calendar day the user picked.
+private fun toLocalDayMillis(utcMillis: Long): Long {
+	val utcCal = Calendar.getInstance(java.util.TimeZone.getTimeZone("UTC"))
+	utcCal.timeInMillis = utcMillis
+	val localCal = Calendar.getInstance()
+	localCal.clear()
+	localCal.set(utcCal.get(Calendar.YEAR), utcCal.get(Calendar.MONTH), utcCal.get(Calendar.DAY_OF_MONTH))
+	return localCal.timeInMillis
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun rememberSelectableDates(range: SelectableRange): SelectableDates {
+	val start = range.start
+	val end = range.end
+	return remember(start, end) {
+		if (start != null || end != null) {
+			val startUtcDayMillis = start?.let { toUtcDayMillis(it) }
+			val endUtcDayMillis = end?.let { toUtcDayMillis(it) }
+			val startYear = start?.let {
+				val cal = Calendar.getInstance()
+				cal.timeInMillis = it
+				cal.get(Calendar.YEAR)
+			}
+			val endYear = end?.let {
+				val cal = Calendar.getInstance()
+				cal.timeInMillis = it
+				cal.get(Calendar.YEAR)
+			}
+			object : SelectableDates {
+				override fun isSelectableDate(utcTimeMillis: Long): Boolean {
+					if (startUtcDayMillis != null && utcTimeMillis < startUtcDayMillis) return false
+					if (endUtcDayMillis != null && utcTimeMillis > endUtcDayMillis) return false
+					return true
+				}
+
+				override fun isSelectableYear(year: Int): Boolean {
+					if (startYear != null && year < startYear) return false
+					if (endYear != null && year > endYear) return false
+					return true
+				}
+			}
+		} else {
+			DatePickerDefaults.AllDates
+		}
+	}
+}
+
+// `selectableDates` only greys out unselectable cells; the calendar's actual
+// extent (months list, year grid, range content description) comes from
+// `yearRange`. Derive it from min/max so the picker reflects the constraints
+// instead of always spanning the 1900..2100 default.
+// https://github.com/expo/expo/issues/47206
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun rememberDatePickerYearRange(range: SelectableRange, initialDateMillis: Long): IntRange {
+	val start = range.start
+	val end = range.end
+	return remember(start, end, initialDateMillis) {
+		val defaults = DatePickerDefaults.YearRange
+		val yearOf = { millis: Long ->
+			Calendar.getInstance().apply { timeInMillis = millis }.get(Calendar.YEAR)
+		}
+		val startYear = start?.let(yearOf) ?: defaults.first
+		val endYear = end?.let(yearOf) ?: defaults.last
+		val initialYear = yearOf(initialDateMillis)
+		minOf(startYear, initialYear)..maxOf(endYear, initialYear)
+	}
+}
+
+private fun Map<*, *>.color(name: String): Color? = this[name].asColor()
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun buildDatePickerColors(
+	elementColors: Map<*, *>,
+	colorProp: Color?,
+): androidx.compose.material3.DatePickerColors {
+	val defaults = DatePickerDefaults.colors()
+	return defaults.copy(
+		containerColor = elementColors.color("containerColor") ?: defaults.containerColor,
+		titleContentColor = elementColors.color("titleContentColor") ?: colorProp ?: defaults.titleContentColor,
+		headlineContentColor = elementColors.color("headlineContentColor") ?: colorProp ?: defaults.headlineContentColor,
+		weekdayContentColor = elementColors.color("weekdayContentColor") ?: defaults.weekdayContentColor,
+		subheadContentColor = elementColors.color("subheadContentColor") ?: defaults.subheadContentColor,
+		navigationContentColor = elementColors.color("navigationContentColor") ?: defaults.navigationContentColor,
+		yearContentColor = elementColors.color("yearContentColor") ?: defaults.yearContentColor,
+		disabledYearContentColor = elementColors.color("disabledYearContentColor") ?: defaults.disabledYearContentColor,
+		currentYearContentColor = elementColors.color("currentYearContentColor") ?: defaults.currentYearContentColor,
+		selectedYearContentColor = elementColors.color("selectedYearContentColor") ?: defaults.selectedYearContentColor,
+		disabledSelectedYearContentColor = elementColors.color("disabledSelectedYearContentColor") ?: defaults.disabledSelectedYearContentColor,
+		selectedYearContainerColor = elementColors.color("selectedYearContainerColor") ?: defaults.selectedYearContainerColor,
+		disabledSelectedYearContainerColor = elementColors.color("disabledSelectedYearContainerColor") ?: defaults.disabledSelectedYearContainerColor,
+		dayContentColor = elementColors.color("dayContentColor") ?: defaults.dayContentColor,
+		disabledDayContentColor = elementColors.color("disabledDayContentColor") ?: defaults.disabledDayContentColor,
+		selectedDayContentColor = elementColors.color("selectedDayContentColor") ?: defaults.selectedDayContentColor,
+		disabledSelectedDayContentColor = elementColors.color("disabledSelectedDayContentColor") ?: defaults.disabledSelectedDayContentColor,
+		selectedDayContainerColor = elementColors.color("selectedDayContainerColor") ?: colorProp ?: defaults.selectedDayContainerColor,
+		disabledSelectedDayContainerColor = elementColors.color("disabledSelectedDayContainerColor") ?: defaults.disabledSelectedDayContainerColor,
+		todayContentColor = elementColors.color("todayContentColor") ?: defaults.todayContentColor,
+		todayDateBorderColor = elementColors.color("todayDateBorderColor") ?: colorProp ?: defaults.todayDateBorderColor,
+		dayInSelectionRangeContentColor = elementColors.color("dayInSelectionRangeContentColor") ?: defaults.dayInSelectionRangeContentColor,
+		dayInSelectionRangeContainerColor = elementColors.color("dayInSelectionRangeContainerColor") ?: defaults.dayInSelectionRangeContainerColor,
+		dividerColor = elementColors.color("dividerColor") ?: defaults.dividerColor,
+	)
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun buildTimePickerColors(
+	elementColors: Map<*, *>,
+	colorProp: Color?,
+): androidx.compose.material3.TimePickerColors {
+	val defaults = TimePickerDefaults.colors()
+	return defaults.copy(
+		containerColor = elementColors.color("containerColor") ?: defaults.containerColor,
+		clockDialColor = elementColors.color("clockDialColor") ?: colorProp?.copy(alpha = 0.3f) ?: defaults.clockDialColor,
+		clockDialSelectedContentColor = elementColors.color("clockDialSelectedContentColor") ?: defaults.clockDialSelectedContentColor,
+		clockDialUnselectedContentColor = elementColors.color("clockDialUnselectedContentColor") ?: defaults.clockDialUnselectedContentColor,
+		selectorColor = elementColors.color("selectorColor") ?: colorProp ?: defaults.selectorColor,
+		periodSelectorBorderColor = elementColors.color("periodSelectorBorderColor") ?: defaults.periodSelectorBorderColor,
+		periodSelectorSelectedContainerColor = elementColors.color("periodSelectorSelectedContainerColor") ?: defaults.periodSelectorSelectedContainerColor,
+		periodSelectorUnselectedContainerColor = elementColors.color("periodSelectorUnselectedContainerColor") ?: defaults.periodSelectorUnselectedContainerColor,
+		periodSelectorSelectedContentColor = elementColors.color("periodSelectorSelectedContentColor") ?: defaults.periodSelectorSelectedContentColor,
+		periodSelectorUnselectedContentColor = elementColors.color("periodSelectorUnselectedContentColor") ?: defaults.periodSelectorUnselectedContentColor,
+		timeSelectorSelectedContainerColor = elementColors.color("timeSelectorSelectedContainerColor") ?: colorProp ?: defaults.timeSelectorSelectedContainerColor,
+		timeSelectorUnselectedContainerColor = elementColors.color("timeSelectorUnselectedContainerColor") ?: defaults.timeSelectorUnselectedContainerColor,
+		timeSelectorSelectedContentColor = elementColors.color("timeSelectorSelectedContentColor") ?: defaults.timeSelectorSelectedContentColor,
+		timeSelectorUnselectedContentColor = elementColors.color("timeSelectorUnselectedContentColor") ?: defaults.timeSelectorUnselectedContentColor,
+	)
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun ExpoDatePicker(modifier: Modifier = Modifier, state: DatePickerUiState, onDateSelected: (Long?) -> Unit) {
+	val locale = LocalConfiguration.current.locales[0]
+	val displayMode = if (state.variant == "input") DisplayMode.Input else DisplayMode.Picker
+	val fallbackDate = remember { Date().time }
+	val initialDate = state.initialDate ?: fallbackDate
+	val selectableDates = rememberSelectableDates(state.selectableDates)
+	val yearRange = rememberDatePickerYearRange(state.selectableDates, initialDate)
+
+	val pickerState = remember(displayMode, initialDate, selectableDates, yearRange) {
+		DatePickerState(
+			initialDisplayMode = displayMode,
+			locale = locale,
+			initialSelectedDateMillis = state.initialDate,
+			initialDisplayedMonthMillis = initialDate,
+			yearRange = yearRange,
+			selectableDates = selectableDates,
+		)
+	}
+
+	LaunchedEffect(pickerState.selectedDateMillis) {
+		onDateSelected(pickerState.selectedDateMillis)
+	}
+
+	val colors = buildDatePickerColors(state.elementColors, state.color)
+
+	// Material3's year-selector chevron tints from the ambient
+	// LocalContentColor (which defaults to black), not
+	// `navigationContentColor`; bind the local so the chevron honors the
+	// navigation color.
+	CompositionLocalProvider(LocalContentColor provides colors.navigationContentColor) {
+		DatePicker(
+			modifier = modifier,
+			state = pickerState,
+			showModeToggle = state.showVariantToggle,
+			colors = colors,
+		)
+	}
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun ExpoTimePicker(modifier: Modifier = Modifier, state: DatePickerUiState, onDateSelected: (Long?) -> Unit) {
+	val initialDate = state.initialDate
+
+	val pickerState = remember(initialDate, state.is24Hour) {
+		val cal = Calendar.getInstance()
+		cal.isLenient = false
+		if (initialDate != null) {
+			cal.timeInMillis = initialDate
+		}
+		TimePickerState(
+			initialHour = cal.get(Calendar.HOUR_OF_DAY),
+			initialMinute = cal.get(Calendar.MINUTE),
+			is24Hour = state.is24Hour,
+		)
+	}
+
+	LaunchedEffect(pickerState.hour, pickerState.minute) {
+		val cal = Calendar.getInstance()
+		cal.isLenient = false
+		if (initialDate != null) {
+			cal.timeInMillis = initialDate
+		}
+		cal.set(Calendar.HOUR_OF_DAY, pickerState.hour)
+		cal.set(Calendar.MINUTE, pickerState.minute)
+		onDateSelected(cal.time.time)
+	}
+
+	TimePicker(
+		modifier = modifier,
+		state = pickerState,
+		layoutType = TimePickerLayoutType.Vertical,
+		colors = buildTimePickerColors(state.elementColors, state.color),
+	)
+}
+
+class XplatDatePickerProvider {
+	private var state by mutableStateOf(DatePickerUiState())
+	var onEvent: ((Any) -> Unit)? = null
+
+	fun generateComposeView(view: ComposeView) {
+		view.setContent {
+			MaterialTheme {
+				if (state.displayedComponents == "hourAndMinute") {
+					ExpoTimePicker(state = state) { millis ->
+						onEvent?.invoke(JSONObject().put("date", millis ?: JSONObject.NULL))
+					}
+				} else {
+					ExpoDatePicker(state = state) { millis ->
+						onEvent?.invoke(
+							JSONObject().put(
+								"date",
+								millis?.let { toLocalDayMillis(it) } ?: JSONObject.NULL,
+							),
+						)
+					}
+				}
+			}
+		}
+	}
+
+	fun updateData(input: Map<Any, Any>) {
+		val data = input["data"] as? Map<*, *> ?: input
+		val range = data["selectableDates"] as? Map<*, *>
+		state = DatePickerUiState(
+			initialDate = data["initialDate"].asLong(),
+			variant = data["variant"] as? String ?: "picker",
+			displayedComponents = data["displayedComponents"] as? String ?: "date",
+			showVariantToggle = data["showVariantToggle"]?.asBoolean() ?: true,
+			is24Hour = data["is24Hour"]?.asBoolean() ?: true,
+			color = data["color"].asColor(),
+			elementColors = data["elementColors"] as? Map<*, *> ?: emptyMap<Any?, Any?>(),
+			selectableDates = SelectableRange(
+				start = range?.get("start").asLong(),
+				end = range?.get("end").asLong(),
+			),
+		)
+	}
+}

package/platforms/ios/src/XplatDatePickerProvider.swift

@@ -0,0 +1,148 @@
+// Adapted from @expo/ui (MIT) — Copyright 2025-present 650 Industries.
+// Upstream: expo/packages/expo-ui/ios/DatePickerView.swift (sdk-57).
+// The ExpoModules glue (@Field props record, EventDispatcher, Children label
+// slot) is replaced by the @nativescript/swift-ui provider contract:
+// updateData(NSDictionary) + onEvent. Children-as-label is not ported; the
+// title string prop covers the label slot.
+
+import SwiftUI
+
+private final class DatePickerModel: ObservableObject {
+	@Published var title: String? = nil
+	@Published var selection: Date? = nil
+	@Published var rangeStart: Date? = nil
+	@Published var rangeEnd: Date? = nil
+	@Published var displayedComponents: DatePicker.Components = [.date]
+	@Published var pickerStyle: String = "automatic"
+	@Published var disabled = false
+	var onDateChange: ((Date) -> Void)?
+}
+
+private struct DatePickerContent: View {
+	@ObservedObject var model: DatePickerModel
+	@State private var date = Date()
+
+	// `.graphical` has an AutoLayout bug (it uses UICalendarView under the
+	// hood): it shrinks height when the user taps a date.
+	// https://github.com/expo/expo/issues/47062
+	// Fixed min width of 320 while the style is graphical.
+	private var isGraphicalStyle: Bool {
+		model.pickerStyle == "graphical"
+	}
+
+	var body: some View {
+		styledPicker()
+			.disabled(model.disabled)
+			.frame(minWidth: isGraphicalStyle ? 320 : nil)
+			.onChange(of: date) { newDate in
+				if model.selection == newDate { return }
+				model.onDateChange?(newDate)
+			}
+			.onChange(of: model.selection) { newValue in
+				date = newValue ?? Date()
+			}
+			.onAppear {
+				date = model.selection ?? Date()
+			}
+	}
+
+	@ViewBuilder
+	private func styledPicker() -> some View {
+		switch model.pickerStyle {
+		case "compact":
+			createDatePicker().datePickerStyle(.compact)
+		case "graphical":
+			createDatePicker().datePickerStyle(.graphical)
+		case "wheel":
+			createDatePicker().datePickerStyle(.wheel)
+		default:
+			createDatePicker().datePickerStyle(.automatic)
+		}
+	}
+
+	@ViewBuilder
+	private func createDatePicker() -> some View {
+		let components = model.displayedComponents
+		let start = model.rangeStart
+		let end = model.rangeEnd
+		let title = model.title ?? ""
+
+		let picker = Group {
+			if let start, let end {
+				DatePicker(title, selection: $date, in: start...end, displayedComponents: components)
+			} else if let start {
+				DatePicker(title, selection: $date, in: start..., displayedComponents: components)
+			} else if let end {
+				DatePicker(title, selection: $date, in: ...end, displayedComponents: components)
+			} else {
+				DatePicker(title, selection: $date, displayedComponents: components)
+			}
+		}
+
+		if model.title == nil {
+			picker.labelsHidden()
+		} else {
+			picker
+		}
+	}
+}
+
+@objc(XplatDatePickerProvider)
+public final class XplatDatePickerProvider: UIViewController, SwiftUIProvider {
+	private let model = DatePickerModel()
+
+	public required init() {
+		super.init(nibName: nil, bundle: nil)
+		model.onDateChange = { [weak self] date in
+			self?.onEvent?(["date": date.timeIntervalSince1970 * 1000])
+		}
+	}
+
+	public required init?(coder: NSCoder) {
+		super.init(coder: coder)
+		model.onDateChange = { [weak self] date in
+			self?.onEvent?(["date": date.timeIntervalSince1970 * 1000])
+		}
+	}
+
+	public override func viewDidLoad() {
+		super.viewDidLoad()
+		setupSwiftUIView(content: DatePickerContent(model: model))
+	}
+
+	private static func millisToDate(_ value: Any?) -> Date? {
+		guard let millis = value as? NSNumber else { return nil }
+		return Date(timeIntervalSince1970: millis.doubleValue / 1000)
+	}
+
+	public func updateData(data: NSDictionary) {
+		// dataSerialize drops undefined keys — an absent key is a revert to
+		// the unset state, not "leave the previous value".
+		if data.object(forKey: "title") == nil {
+			model.title = nil
+		} else {
+			let title = data["title"] as? String
+			model.title = title?.isEmpty == false ? title : nil
+		}
+		model.selection = Self.millisToDate(data["selection"])
+
+		if let range = data["range"] as? [String: Any] {
+			model.rangeStart = Self.millisToDate(range["start"])
+			model.rangeEnd = Self.millisToDate(range["end"])
+		}
+		if let components = data["displayedComponents"] as? [String] {
+			var mapped: DatePicker.Components = []
+			if components.contains("date") { mapped.insert(.date) }
+			if components.contains("hourAndMinute") { mapped.insert(.hourAndMinute) }
+			if !mapped.isEmpty { model.displayedComponents = mapped }
+		}
+		if let pickerStyle = data["pickerStyle"] as? String {
+			model.pickerStyle = pickerStyle
+		}
+		if let disabled = data["disabled"] as? NSNumber {
+			model.disabled = disabled.boolValue
+		}
+	}
+
+	public var onEvent: ((NSDictionary) -> Void)?
+}

package/src/AppKitDatePicker.macos.tsrx

@@ -0,0 +1,57 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useEffect, useRef } from 'octane'
+import type { AppKitDatePickerProps } from './macos/types'
+
+const host = (): any => (globalThis as any).__xplatAppKit ?? {}
+
+/** Embeds a real NSDatePicker in the leaf's backing view via the
+ *  `__xplatAppKit` bridge. 'date' uses a text field (or the inline
+ *  graphical calendar when `pickerStyle` is 'graphical'); 'time' uses the
+ *  clock-and-calendar field; 'dateAndTime' shows both element groups.
+ *  The host element carries an explicit size — the picker is pinned to
+ *  its edges. */
+export function AppKitDatePicker(props: AppKitDatePickerProps) @{
+	const anchor = useRef<any>(null)
+	const handle = useRef<any>(null)
+
+	const options = () => ({
+		mode: props.components,
+		style: props.pickerStyle,
+		selectionMillis: props.selection?.getTime?.(),
+		minimumMillis: props.minimumDate?.getTime?.(),
+		maximumMillis: props.maximumDate?.getTime?.(),
+		enabled: !props.disabled,
+	})
+
+	useEffect(() => {
+		const view = anchor.current
+		const attach = host().attachDatePicker
+		if (!view || typeof attach !== 'function') return
+		// defaultSelection seeds the initial date; after that the user's
+		// pick owns the value — only the controlled `selection` is pushed.
+		handle.current = attach(
+			view,
+			{ ...options(), selectionMillis: (props.selection ?? props.defaultSelection)?.getTime?.() },
+			(millis: number) => {
+				props.onSelectionChange?.(new Date(millis))
+			},
+		)
+
+		return () => {
+			handle.current?.detach()
+			handle.current = null
+		}
+	}, [props.components, props.pickerStyle])
+
+	// Push controlled selection/range updates into the mounted picker; the
+	// bridge update is echo-suppressed by comparing against dateValue.
+	useEffect(() => {
+		handle.current?.update(options())
+	})
+
+	<masonview ref={(v: any) => { anchor.current = v }} id={props.id} className={props.className} style={{display: "flex", ...({
+			minWidth: 240,
+			minHeight: props.pickerStyle === 'graphical' ? 300 : 26,
+			...props.style,
+		})}}/>;
+}

package/src/MaterialDatePicker.android.tsrx

@@ -0,0 +1,49 @@
+/** @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 type { MaterialDatePickerProps } from './android/types'
+
+declare const com: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatandroiddatepicker: Attributes<typeof JetpackCompose>
+	}
+}
+
+registerElement('xplatandroiddatepicker', JetpackCompose)
+registerJetpackCompose('xplat-material-datepicker', (owner: any) =>
+	new ComposeDataDriver(new com.octanexplat.datepicker.XplatDatePickerProvider(), owner),
+)
+
+/** Renders a Material 3 DatePicker/TimePicker through the NativeScript Jetpack Compose bridge. */
+export function MaterialDatePicker(props: MaterialDatePickerProps) @{
+	const data = {
+		initialDate: props.initialDate?.getTime() ?? null,
+		variant: props.variant ?? 'picker',
+		displayedComponents: props.displayedComponents ?? 'date',
+		// The bridge's dataSerialize throws on booleans; send numbers.
+		showVariantToggle: (props.showVariantToggle ?? true) ? 1 : 0,
+		is24Hour: (props.is24Hour ?? true) ? 1 : 0,
+		color: props.color,
+		elementColors: props.elementColors,
+		selectableDates: {
+			start: props.selectableDates?.start?.getTime() ?? null,
+			end: props.selectableDates?.end?.getTime() ?? null,
+		},
+	}
+
+	<xplatandroiddatepicker
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		accessibilityLabel={props.accessibilityLabel}
+		composeId="xplat-material-datepicker"
+		data={data}
+		onComposeEvent={(event: any) => {
+			const millis = event.data?.date
+			props.onDateSelected?.(typeof millis === 'number' ? new Date(millis) : null)
+		}}
+	/>;
+}

package/src/SwiftUIDatePicker.ios.tsrx

@@ -0,0 +1,51 @@
+/** @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 { SwiftUIDatePickerProps } from './ios/types'
+
+declare const XplatDatePickerProvider: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatiosdatepicker: Attributes<typeof SwiftUI>
+	}
+}
+
+registerElement('xplatiosdatepicker', SwiftUI)
+registerSwiftUI('xplat-swiftui-datepicker', (owner: any) =>
+	new UIDataDriver(new XplatDatePickerProvider(), owner),
+)
+
+/** Renders a SwiftUI DatePicker through NativeScript's SwiftUI bridge. */
+export function SwiftUIDatePicker(props: SwiftUIDatePickerProps) @{
+	const controlled = props.selection !== undefined
+	const [internalSelection, setInternalSelection] = useState<Date | undefined>(props.defaultSelection)
+	const selection = controlled ? props.selection! : internalSelection
+
+	<xplatiosdatepicker
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		swiftId="xplat-swiftui-datepicker"
+		data={{
+			title: props.title,
+			selection: selection?.getTime(),
+			range: {
+				start: props.minimumDate?.getTime(),
+				end: props.maximumDate?.getTime(),
+			},
+			displayedComponents: props.displayedComponents ?? ['date'],
+			pickerStyle: props.pickerStyle ?? 'automatic',
+			disabled: props.disabled ?? false,
+		}}
+		onSwiftUIEvent={(event: any) => {
+			const millis = event.data?.date
+			if (typeof millis !== 'number') return
+			const next = new Date(millis)
+			if (!controlled) setInternalSelection(next)
+			props.onSelectionChange?.(next)
+		}}
+	/>;
+}

package/src/android/index.ts

@@ -0,0 +1,7 @@
+export { MaterialDatePicker } from '../MaterialDatePicker.android.tsrx'
+export type {
+	MaterialDatePickerComponents,
+	MaterialDatePickerElementColors,
+	MaterialDatePickerProps,
+	MaterialDatePickerVariant,
+} from './types'

package/src/android/types.ts

@@ -0,0 +1,80 @@
+export type MaterialDatePickerVariant = 'picker' | 'input'
+
+export type MaterialDatePickerComponents = 'date' | 'hourAndMinute' | 'dateAndTime'
+
+/**
+ * Color overrides for the Material 3 picker elements. Every field is a CSS
+ * hex string (`#rgb`, `#rrggbb`, or `#aarrggbb`); unset fields use the
+ * Material 3 theme defaults.
+ */
+export interface MaterialDatePickerElementColors {
+	containerColor?: string
+	titleContentColor?: string
+	headlineContentColor?: string
+	weekdayContentColor?: string
+	subheadContentColor?: string
+	navigationContentColor?: string
+	yearContentColor?: string
+	disabledYearContentColor?: string
+	currentYearContentColor?: string
+	selectedYearContentColor?: string
+	disabledSelectedYearContentColor?: string
+	selectedYearContainerColor?: string
+	disabledSelectedYearContainerColor?: string
+	dayContentColor?: string
+	disabledDayContentColor?: string
+	selectedDayContentColor?: string
+	disabledSelectedDayContentColor?: string
+	selectedDayContainerColor?: string
+	disabledSelectedDayContainerColor?: string
+	todayContentColor?: string
+	todayDateBorderColor?: string
+	dayInSelectionRangeContentColor?: string
+	dayInSelectionRangeContainerColor?: string
+	dividerColor?: string
+	clockDialColor?: string
+	clockDialSelectedContentColor?: string
+	clockDialUnselectedContentColor?: string
+	selectorColor?: string
+	periodSelectorBorderColor?: string
+	periodSelectorSelectedContainerColor?: string
+	periodSelectorUnselectedContainerColor?: string
+	periodSelectorSelectedContentColor?: string
+	periodSelectorUnselectedContentColor?: string
+	timeSelectorSelectedContainerColor?: string
+	timeSelectorUnselectedContainerColor?: string
+	timeSelectorSelectedContentColor?: string
+	timeSelectorUnselectedContentColor?: string
+}
+
+export interface MaterialDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Date the picker starts on. The picker keeps its own selection after mount. */
+	initialDate?: Date
+	/** Calendar grid or text-field input. @default 'picker' */
+	variant?: MaterialDatePickerVariant
+	/**
+	 * `'date'` renders the M3 DatePicker, `'hourAndMinute'` the M3 TimePicker.
+	 * `'dateAndTime'` renders the date picker (combined input is not supported).
+	 * @default 'date'
+	 */
+	displayedComponents?: MaterialDatePickerComponents
+	/** Show the picker/input mode toggle. @default true */
+	showVariantToggle?: boolean
+	/** 24-hour dial for the time picker. @default true */
+	is24Hour?: boolean
+	/** Accent applied to a subset of elements when `elementColors` is unset. */
+	color?: string
+	elementColors?: MaterialDatePickerElementColors
+	/** Bounds the selectable date range; also derives the calendar year range. */
+	selectableDates?: { start?: Date; end?: Date }
+	accessibilityLabel?: string
+	/**
+	 * Called with the selected timestamp (null when the selection clears). The
+	 * DatePicker emits the chosen UTC day; the TimePicker emits the chosen
+	 * hour/minute on the initial date's day.
+	 */
+	onDateSelected?: (date: Date | null) => void
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+// NativeScript vendors each dependency by its package root. Widgets remain
+// on their explicit OS subpaths; this entry must not load another OS leaf.
+export {}

package/src/ios/index.ts

@@ -0,0 +1,6 @@
+export { SwiftUIDatePicker } from '../SwiftUIDatePicker.ios.tsrx'
+export type {
+	SwiftUIDatePickerComponent,
+	SwiftUIDatePickerProps,
+	SwiftUIDatePickerStyle,
+} from './types'

package/src/ios/types.ts

@@ -0,0 +1,26 @@
+export type SwiftUIDatePickerStyle = 'automatic' | 'compact' | 'graphical' | 'wheel'
+
+export type SwiftUIDatePickerComponent = 'date' | 'hourAndMinute'
+
+export interface SwiftUIDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Label shown next to the picker. When omitted, the label is hidden. */
+	title?: string
+	/** Controlled selection. Pair with `onSelectionChange`. */
+	selection?: Date
+	/** Initial selection when `selection` is not provided. */
+	defaultSelection?: Date
+	/** Earliest selectable date. */
+	minimumDate?: Date
+	/** Latest selectable date. */
+	maximumDate?: Date
+	/** Which components the picker displays. @default ['date'] */
+	displayedComponents?: readonly SwiftUIDatePickerComponent[]
+	/** SwiftUI presentation style. `graphical` renders an inline calendar. @default 'automatic' */
+	pickerStyle?: SwiftUIDatePickerStyle
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}

package/src/macos/index.ts

@@ -0,0 +1,6 @@
+export { AppKitDatePicker } from '../AppKitDatePicker.macos.tsrx'
+export type {
+	AppKitDatePickerComponents,
+	AppKitDatePickerProps,
+	AppKitDatePickerStyle,
+} from './types'

package/src/macos/types.ts

@@ -0,0 +1,24 @@
+export type AppKitDatePickerComponents = 'date' | 'time' | 'dateAndTime'
+
+export type AppKitDatePickerStyle = 'textField' | 'graphical'
+
+export interface AppKitDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Which element groups the NSDatePicker shows. @default 'date' */
+	components?: AppKitDatePickerComponents
+	/** 'graphical' embeds the inline calendar (date mode only). @default 'textField' */
+	pickerStyle?: AppKitDatePickerStyle
+	/** Controlled selection. Pair with `onSelectionChange`. */
+	selection?: Date
+	/** Initial selection when `selection` is not provided. */
+	defaultSelection?: Date
+	/** Earliest selectable date. */
+	minimumDate?: Date
+	/** Latest selectable date. */
+	maximumDate?: Date
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}

package/types/android/index.d.ts

@@ -0,0 +1,61 @@
+export type MaterialDatePickerVariant = 'picker' | 'input'
+
+export type MaterialDatePickerComponents = 'date' | 'hourAndMinute' | 'dateAndTime'
+
+export interface MaterialDatePickerElementColors {
+	containerColor?: string
+	titleContentColor?: string
+	headlineContentColor?: string
+	weekdayContentColor?: string
+	subheadContentColor?: string
+	navigationContentColor?: string
+	yearContentColor?: string
+	disabledYearContentColor?: string
+	currentYearContentColor?: string
+	selectedYearContentColor?: string
+	disabledSelectedYearContentColor?: string
+	selectedYearContainerColor?: string
+	disabledSelectedYearContainerColor?: string
+	dayContentColor?: string
+	disabledDayContentColor?: string
+	selectedDayContentColor?: string
+	disabledSelectedDayContentColor?: string
+	selectedDayContainerColor?: string
+	disabledSelectedDayContainerColor?: string
+	todayContentColor?: string
+	todayDateBorderColor?: string
+	dayInSelectionRangeContentColor?: string
+	dayInSelectionRangeContainerColor?: string
+	dividerColor?: string
+	clockDialColor?: string
+	clockDialSelectedContentColor?: string
+	clockDialUnselectedContentColor?: string
+	selectorColor?: string
+	periodSelectorBorderColor?: string
+	periodSelectorSelectedContainerColor?: string
+	periodSelectorUnselectedContainerColor?: string
+	periodSelectorSelectedContentColor?: string
+	periodSelectorUnselectedContentColor?: string
+	timeSelectorSelectedContainerColor?: string
+	timeSelectorUnselectedContainerColor?: string
+	timeSelectorSelectedContentColor?: string
+	timeSelectorUnselectedContentColor?: string
+}
+
+export interface MaterialDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	initialDate?: Date
+	variant?: MaterialDatePickerVariant
+	displayedComponents?: MaterialDatePickerComponents
+	showVariantToggle?: boolean
+	is24Hour?: boolean
+	color?: string
+	elementColors?: MaterialDatePickerElementColors
+	selectableDates?: { start?: Date; end?: Date }
+	accessibilityLabel?: string
+	onDateSelected?: (date: Date | null) => void
+}
+
+export declare function MaterialDatePicker(props: MaterialDatePickerProps): unknown

package/types/index.d.ts

@@ -0,0 +1 @@
+export {}

package/types/ios/index.d.ts

@@ -0,0 +1,21 @@
+export type SwiftUIDatePickerStyle = 'automatic' | 'compact' | 'graphical' | 'wheel'
+
+export type SwiftUIDatePickerComponent = 'date' | 'hourAndMinute'
+
+export interface SwiftUIDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	title?: string
+	selection?: Date
+	defaultSelection?: Date
+	minimumDate?: Date
+	maximumDate?: Date
+	displayedComponents?: readonly SwiftUIDatePickerComponent[]
+	pickerStyle?: SwiftUIDatePickerStyle
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}
+
+export declare function SwiftUIDatePicker(props: SwiftUIDatePickerProps): unknown

package/types/macos/index.d.ts

@@ -0,0 +1,20 @@
+export type AppKitDatePickerComponents = 'date' | 'time' | 'dateAndTime'
+
+export type AppKitDatePickerStyle = 'textField' | 'graphical'
+
+export interface AppKitDatePickerProps {
+	id?: string
+	className?: any
+	style?: any
+	components?: AppKitDatePickerComponents
+	pickerStyle?: AppKitDatePickerStyle
+	selection?: Date
+	defaultSelection?: Date
+	minimumDate?: Date
+	maximumDate?: Date
+	disabled?: boolean
+	accessibilityLabel?: string
+	onSelectionChange?: (date: Date) => void
+}
+
+export declare function AppKitDatePicker(props: AppKitDatePickerProps): unknown