@octane-xplat/date-picker 0.0.0-stage → 0.9.0

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

@@ -1,3 +1,34 @@
-# Temporary Holding Version
+# `@octane-xplat/date-picker`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An install boundary for platform-specific date and time selection controls:
+a SwiftUI `DatePicker` on iOS, Material 3 `DatePicker`/`TimePicker` built with
+Jetpack Compose on Android, a labeled `<input type="date|time|datetime-local">`
+on web, and a real `NSDatePicker` on macOS.
+
+Install the package in the app that renders a control. Import
+`SwiftUIDatePicker` from `@octane-xplat/date-picker/ios`,
+`MaterialDatePicker` from `@octane-xplat/date-picker/android`, `DateInput`
+from `@octane-xplat/date-picker/web`, or `AppKitDatePicker` from
+`@octane-xplat/date-picker/macos` in the matching platform-suffixed file.
+Each entry exports its own component and types; there is no shared date-picker
+API at the package root.
+
+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 web entry follows browser input values;
+the macOS entry takes `components`/`pickerStyle` (`'graphical'` embeds the
+inline calendar) with a controlled `selection` `Date`.
+
+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/date-picker.md`](../../docs/date-picker.md).
+
+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/dist/native/MaterialDatePicker.android.tsrx.js

@@ -0,0 +1,46 @@
+import { defineUniversalComponent, registerElement, universalPlan, universalValue } from "@nativescript-community/octane";
+import { ComposeDataDriver, JetpackCompose, registerJetpackCompose } from "@nativescript/jetpack-compose";
+//#region src/MaterialDatePicker.android.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatandroiddatepicker",
+	"props": { "composeId": "xplat-material-datepicker" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["accessibilityLabel", 3],
+		["data", 4],
+		["onComposeEvent", 5]
+	]
+});
+registerElement("xplatandroiddatepicker", JetpackCompose);
+registerJetpackCompose("xplat-material-datepicker", (owner) => new ComposeDataDriver(new com.octanexplat.datepicker.XplatDatePickerProvider(), owner));
+var MaterialDatePicker = defineUniversalComponent("nativescript", function MaterialDatePicker(props) {
+	const data = {
+		initialDate: props.initialDate?.getTime() ?? null,
+		variant: props.variant ?? "picker",
+		displayedComponents: props.displayedComponents ?? "date",
+		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
+		}
+	};
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		props.className,
+		props.style,
+		props.accessibilityLabel,
+		data,
+		(event) => {
+			const millis = event.data?.date;
+			props.onDateSelected?.(typeof millis === "number" ? new Date(millis) : null);
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { MaterialDatePicker };

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

@@ -0,0 +1,48 @@
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useState } from "@nativescript-community/octane";
+import { SwiftUI, UIDataDriver, registerSwiftUI } from "@nativescript/swift-ui";
+//#region src/SwiftUIDatePicker.ios.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatiosdatepicker",
+	"props": { "swiftId": "xplat-swiftui-datepicker" },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2],
+		["data", 3],
+		["onSwiftUIEvent", 4]
+	]
+});
+registerElement("xplatiosdatepicker", SwiftUI);
+registerSwiftUI("xplat-swiftui-datepicker", (owner) => new UIDataDriver(new XplatDatePickerProvider(), owner));
+var SwiftUIDatePicker = defineUniversalComponent("nativescript", function SwiftUIDatePicker(props) {
+	const controlled = props.selection !== void 0;
+	const [internalSelection, setInternalSelection] = useState(props.defaultSelection, _h$0);
+	const selection = controlled ? props.selection : internalSelection;
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		props.className,
+		props.style,
+		{
+			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
+		},
+		(event) => {
+			const millis = event.data?.date;
+			if (typeof millis !== "number") return;
+			const next = new Date(millis);
+			if (!controlled) setInternalSelection(next);
+			props.onSelectionChange?.(next);
+		}
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { SwiftUIDatePicker };

package/dist/native/android/index.js

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

package/dist/native/ios/index.js

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

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

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "1fb9fdab-32f1-4d82-ad87-ffe708c70839",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/DateInput.web.tsrx.js

@@ -0,0 +1,57 @@
+import { __s, bag16, child, clone, delegateEvents, hookSlots, setAriaAttribute, setBooleanAttribute, setEventHandler, setStyle, sibling, template, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalValue, enableSignalBindings, setPlainAttribute } from "octane/internal/client";
+//#region src/DateInput.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["change"]);
+var _t$0 = /* @__PURE__ */ template("<label><span></span><input data-octane-input=\"i:ca76d877\"/></label>");
+var _hs$ = /* @__PURE__ */ hookSlots(1);
+var DateInput = /* @__PURE__ */ __s(function DateInput(props, __s, __extra) {
+	const controlled = props.value !== void 0;
+	const [internalValue, setInternalValue] = useState(props.defaultValue ?? "", _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, _m10;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		const _el0 = child(_root);
+		_m4 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m6 = _el1;
+		_m10 = bindSignalValue(__s, void 0, _el1, value, "i:ca76d877");
+		setEventHandler(_el1, "$$change", (event) => {
+			const nextValue = event.target.value;
+			if (!controlled) setInternalValue(nextValue);
+			props.onChange?.(nextValue);
+		});
+		_b = bag16(__s, _root, void 0, _m1, void 0, void 0, _m4, void 0, _m6, void 0, void 0, void 0, _m10, void 0, void 0, void 0, null, void 0);
+	} else {
+		_b.k = bindSignalValue(__s, _b.k, _b.g, value, "i:ca76d877");
+		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:cabeae14", "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:6dc088f1", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.g, "id", props.id, "b:f74893e7", setPlainAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.g, "type", props.type ?? "date", "b:47e366ba", setPlainAttribute);
+	_b.i = bindSignalAttribute(__s, _b.i, _b.g, "aria-label", props.accessibilityLabel ?? props.label, "b:a953fab4", setAriaAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.g, "aria-labelledby", labelId, "b:10bc1230", setAriaAttribute);
+	_b.l = bindSignalAttribute(__s, _b.l, _b.g, "min", props.min, "b:4fe4c70f", setPlainAttribute);
+	_b.m = bindSignalAttribute(__s, _b.m, _b.g, "max", props.max, "b:4c98be11", setPlainAttribute);
+	_b.n = bindSignalAttribute(__s, _b.n, _b.g, "disabled", props.disabled, "b:701d5b16", setBooleanAttribute);
+	_b.q = bindSignalChild(__s, _b.q, 1, _b.e, props.label, "b:25c6cb91", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { DateInput };

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

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "f258a4ce-175f-4808-aeed-e9a10c1bcf3e",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/web/index.js

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

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@octane-xplat/date-picker",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.9.0",
+  "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": [
+    "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.4",
+    "@nativescript/core": "9.1.2",
+    "@octanejs/vite-plugin": "0.1.60",
+    "octane": "0.5.0",
+    "tsrx-typegen": "0.2.1",
+    "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": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json",
+    "test:packed": "node tests/packed-consumer.mjs",
+    "pack:check": "tsrx-typegen --pack-check"
+  }
 }

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,335 @@
+// 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.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 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
+}
+
+private fun Any?.asColor(): Color? = when (this) {
+	is String -> runCatching { Color(android.graphics.Color.parseColor(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(),
+			),
+		)
+	}
+}