@octane-xplat/date-picker 0.9.0 → 0.10.0

package/README.md

@@ -2,31 +2,138 @@
 
 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.
+Jetpack Compose on Android, and a real `NSDatePicker` on macOS. For portable
+form controls, use `Calendar`, `DateInput`, `TimeInput`, `DateTimeInput`, and
+`DateRangeInput` from `@octane-xplat/ui` on every target.
+
+```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" />
+}
+```
 
 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.
+`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 web entry follows browser input values;
-the macOS entry takes `components`/`pickerStyle` (`'graphical'` embeds the
+`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/date-picker.md`](../../docs/date-picker.md).
+[`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

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "1fb9fdab-32f1-4d82-ad87-ffe708c70839",
+  "buildId": "cf47df22-f603-4b83-aabd-2f78d166e858",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/date-picker",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Platform-specific date and time selection controls for Octane xplat",
   "repository": {
     "type": "git",
@@ -23,9 +23,9 @@
       "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"
+    "./macos": {
+      "types": "./types/macos/index.d.ts",
+      "macos": "./src/macos/index.ts"
     }
   },
   "publishConfig": {
@@ -40,7 +40,7 @@
     "@nativescript/core": "9.1.2",
     "@octanejs/vite-plugin": "0.1.60",
     "octane": "0.5.0",
-    "tsrx-typegen": "0.2.1",
+    "tsrx-typegen": "0.2.2",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },
@@ -67,7 +67,7 @@
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json",
+    "build": "vite build --mode native && tsc -p tsconfig.types.json",
     "test:packed": "node tests/packed-consumer.mjs",
     "pack:check": "tsrx-typegen --pack-check"
   }

package/src/AppKitDatePicker.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import { useEffect, useRef } from 'octane'
 import type { AppKitDatePickerProps } from './macos/types'
 

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

@@ -1,57 +0,0 @@
-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

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

package/dist/web/web/index.js

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

package/src/DateInput.web.tsrx

@@ -1,30 +0,0 @@
-/** @jsxImportSource octane */
-import { useState } from 'octane'
-import type { DateInputProps } from './web/types'
-
-/** Renders a labeled browser date/time input. */
-export function DateInput(props: DateInputProps) @{
-	const controlled = props.value !== undefined
-	const [internalValue, setInternalValue] = useState(props.defaultValue ?? '')
-	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>
-		<input
-			id={props.id}
-			type={props.type ?? 'date'}
-			aria-label={props.accessibilityLabel ?? props.label}
-			aria-labelledby={labelId}
-			value={value}
-			min={props.min}
-			max={props.max}
-			disabled={props.disabled}
-			onChange={(event: any) => {
-				const nextValue = event.target.value as string
-				if (!controlled) setInternalValue(nextValue)
-				props.onChange?.(nextValue)
-			}}
-		/>
-	</label>
-}

package/src/web/index.ts

@@ -1,2 +0,0 @@
-export { DateInput } from '../DateInput.web.tsrx'
-export type { DateInputProps, DateInputType } from './types'

package/src/web/types.ts

@@ -1,20 +0,0 @@
-export type DateInputType = 'date' | 'time' | 'datetime-local'
-
-export interface DateInputProps {
-	id?: string
-	className?: any
-	style?: any
-	label?: string
-	/** The `<input>` type. @default 'date' */
-	type?: DateInputType
-	/** Controlled value: `YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`. */
-	value?: string
-	defaultValue?: string
-	/** Earliest allowed value, in the same format as `value`. */
-	min?: string
-	/** Latest allowed value, in the same format as `value`. */
-	max?: string
-	disabled?: boolean
-	accessibilityLabel?: string
-	onChange?: (value: string) => void
-}

package/types/web/index.d.ts

@@ -1,18 +0,0 @@
-export type DateInputType = 'date' | 'time' | 'datetime-local'
-
-export interface DateInputProps {
-	id?: string
-	className?: any
-	style?: any
-	label?: string
-	type?: DateInputType
-	value?: string
-	defaultValue?: string
-	min?: string
-	max?: string
-	disabled?: boolean
-	accessibilityLabel?: string
-	onChange?: (value: string) => void
-}
-
-export declare function DateInput(props: DateInputProps): unknown