@octane-xplat/date-picker 0.0.1 → 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 @@
-# @octane-xplat/date-picker
+# `@octane-xplat/date-picker`
 
-Version 0.0.1 is a reservation stub so the automated release can publish this package name. It has no supported API. Use a later release for the implementation.
+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,18 +1,74 @@
 {
   "name": "@octane-xplat/date-picker",
-  "version": "0.0.1",
+  "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.git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/date-picker"
   },
-  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/date-picker",
-  "main": "./index.js",
-  "types": "./index.d.ts",
   "files": [
-    "README.md",
-    "index.js",
-    "index.d.ts"
-  ]
-}
+    "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'
+}