@optimum-intelligence/opti-ui 0.4.0 → 0.5.1

package/dist/components/date-picker/DatePicker.js

@@ -1,6 +1,7 @@
 "use client";
+import { useDateConfig } from "../calendar/DateConfig.js";
 import { Button } from "../button/Button.js";
-import { datePart, formatDate, pad, timePart, todayIso } from "../calendar/date-utils.js";
+import { browserTimeZone, datePart, formatDate, hasTime, pad, toInstant, toWall, todayIso, truncate } from "../calendar/date-utils.js";
 import { Calendar } from "../calendar/Calendar.js";
 import { PickerField, useOpenState } from "./PickerField.js";
 import { c } from "react/compiler-runtime";
@@ -26,22 +27,21 @@ function timeOptions(limit, step, current) {
 	const options = Array.from({ length: Math.ceil(limit / step) }, (_, index) => index * step);
 	return options.includes(current) ? options : [...options, current].sort((a, b) => a - b);
 }
-/** Hour, minute and (below one-minute steps) second lists: unlike a native time input, always 24-hour. */
+/** Hour, minute and second lists, down to the picker's granularity: unlike a native time input, always 24-hour. */
 function TimeField(t0) {
-	const $ = c(24);
-	const { value, step, labels, onChange } = t0;
+	const $ = c(25);
+	const { value, step, units, labels, onChange } = t0;
 	let t1;
 	let t2;
 	let t3;
 	let t4;
 	let t5;
 	let t6;
-	if ($[0] !== labels.hours || $[1] !== labels.minutes || $[2] !== labels.seconds || $[3] !== labels.time || $[4] !== onChange || $[5] !== step || $[6] !== value) {
+	if ($[0] !== labels.hours || $[1] !== labels.minutes || $[2] !== labels.seconds || $[3] !== labels.time || $[4] !== onChange || $[5] !== step || $[6] !== units || $[7] !== value) {
 		const [t7, t8, t9] = value.split(":").map(_temp);
 		const hours = t7 === void 0 ? 0 : t7;
 		const minutes = t8 === void 0 ? 0 : t8;
 		const seconds = t9 === void 0 ? 0 : t9;
-		const withSeconds = step % 60 !== 0 || value.length > 5;
 		const parts = [
 			{
 				label: labels.hours,
@@ -53,20 +53,20 @@ function TimeField(t0) {
 				value: minutes,
 				options: timeOptions(60, step % 60 === 0 && step < 3600 ? step / 60 : 1, minutes)
 			},
-			...withSeconds ? [{
+			{
 				label: labels.seconds,
 				value: seconds,
 				options: timeOptions(60, step < 60 ? step : 1, seconds)
-			}] : []
-		];
+			}
+		].slice(0, units);
 		t3 = "group";
 		t4 = labels.time;
 		t5 = "oui-date-picker__time";
-		if ($[13] !== labels.time) {
+		if ($[14] !== labels.time) {
 			t6 = /* @__PURE__ */ jsx("span", { children: labels.time });
-			$[13] = labels.time;
-			$[14] = t6;
-		} else t6 = $[14];
+			$[14] = labels.time;
+			$[15] = t6;
+		} else t6 = $[15];
 		t1 = "oui-date-picker__time-parts";
 		t2 = parts.map((part_0, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
@@ -78,7 +78,11 @@ function TimeField(t0) {
 			value: part_0.value,
 			onChange: (event) => {
 				const next = parts.map((item, position) => pad(position === index ? Number(event.target.value) : item.value));
-				onChange(next.join(":"));
+				onChange([
+					...next,
+					"00",
+					"00"
+				].slice(0, 3).join(":"));
 			},
 			children: part_0.options.map(_temp2)
 		})] }, part_0.label));
@@ -88,46 +92,47 @@ function TimeField(t0) {
 		$[3] = labels.time;
 		$[4] = onChange;
 		$[5] = step;
-		$[6] = value;
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-		$[12] = t6;
+		$[6] = units;
+		$[7] = value;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
 	} else {
-		t1 = $[7];
-		t2 = $[8];
-		t3 = $[9];
-		t4 = $[10];
-		t5 = $[11];
-		t6 = $[12];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+		t6 = $[13];
 	}
 	let t7;
-	if ($[15] !== t1 || $[16] !== t2) {
+	if ($[16] !== t1 || $[17] !== t2) {
 		t7 = /* @__PURE__ */ jsx("div", {
 			className: t1,
 			children: t2
 		});
-		$[15] = t1;
-		$[16] = t2;
-		$[17] = t7;
-	} else t7 = $[17];
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t7;
+	} else t7 = $[18];
 	let t8;
-	if ($[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7) {
+	if ($[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7) {
 		t8 = /* @__PURE__ */ jsxs("div", {
 			role: t3,
 			"aria-label": t4,
 			className: t5,
 			children: [t6, t7]
 		});
-		$[18] = t3;
-		$[19] = t4;
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-	} else t8 = $[23];
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+	} else t8 = $[24];
 	return t8;
 }
 function _temp2(option) {
@@ -139,236 +144,230 @@ function _temp2(option) {
 function _temp(part) {
 	return Math.floor(Number(part)) || 0;
 }
+var placeholders = {
+	year: "Select year",
+	month: "Select month",
+	day: "Select date",
+	hour: "Select date and time",
+	minute: "Select date and time",
+	second: "Select date and time"
+};
 function Picker(t0) {
-	const $ = c(102);
+	const $ = c(89);
 	let clearable;
 	let defaultMonth;
 	let field;
+	let format;
 	let formatValue;
+	let granularity;
 	let isDateDisabled;
 	let labels;
-	let locale;
+	let localeProp;
 	let max;
 	let min;
-	let mode;
 	let name;
 	let onValueChange;
 	let placeholder;
 	let step;
 	let t1;
 	let t2;
+	let timeZone;
 	let value;
 	let weekStartsOn;
 	if ($[0] !== t0) {
-		({mode, step, defaultTime: t1, value, defaultValue: t2, onValueChange, min, max, isDateDisabled, defaultMonth, locale, weekStartsOn, name, placeholder, clearable, formatValue, labels, ...field} = t0);
+		({granularity, step, defaultTime: t1, value, defaultValue: t2, onValueChange, min, max, isDateDisabled, defaultMonth, locale: localeProp, weekStartsOn, name, placeholder, clearable, format, timeZone, formatValue, labels, ...field} = t0);
 		$[0] = t0;
 		$[1] = clearable;
 		$[2] = defaultMonth;
 		$[3] = field;
-		$[4] = formatValue;
-		$[5] = isDateDisabled;
-		$[6] = labels;
-		$[7] = locale;
-		$[8] = max;
-		$[9] = min;
-		$[10] = mode;
-		$[11] = name;
-		$[12] = onValueChange;
-		$[13] = placeholder;
-		$[14] = step;
-		$[15] = t1;
-		$[16] = t2;
-		$[17] = value;
-		$[18] = weekStartsOn;
+		$[4] = format;
+		$[5] = formatValue;
+		$[6] = granularity;
+		$[7] = isDateDisabled;
+		$[8] = labels;
+		$[9] = localeProp;
+		$[10] = max;
+		$[11] = min;
+		$[12] = name;
+		$[13] = onValueChange;
+		$[14] = placeholder;
+		$[15] = step;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = timeZone;
+		$[19] = value;
+		$[20] = weekStartsOn;
 	} else {
 		clearable = $[1];
 		defaultMonth = $[2];
 		field = $[3];
-		formatValue = $[4];
-		isDateDisabled = $[5];
-		labels = $[6];
-		locale = $[7];
-		max = $[8];
-		min = $[9];
-		mode = $[10];
-		name = $[11];
-		onValueChange = $[12];
-		placeholder = $[13];
-		step = $[14];
-		t1 = $[15];
-		t2 = $[16];
-		value = $[17];
-		weekStartsOn = $[18];
+		format = $[4];
+		formatValue = $[5];
+		granularity = $[6];
+		isDateDisabled = $[7];
+		labels = $[8];
+		localeProp = $[9];
+		max = $[10];
+		min = $[11];
+		name = $[12];
+		onValueChange = $[13];
+		placeholder = $[14];
+		step = $[15];
+		t1 = $[16];
+		t2 = $[17];
+		timeZone = $[18];
+		value = $[19];
+		weekStartsOn = $[20];
 	}
 	const defaultTime = t1 === void 0 ? "00:00" : t1;
 	const defaultValue = t2 === void 0 ? null : t2;
 	let t3;
-	if ($[19] !== labels) {
+	if ($[21] !== labels) {
 		t3 = {
 			...defaultLabels,
 			...labels
 		};
-		$[19] = labels;
-		$[20] = t3;
-	} else t3 = $[20];
+		$[21] = labels;
+		$[22] = t3;
+	} else t3 = $[22];
 	const text = t3;
-	const withTime = mode === "datetime";
+	const config = useDateConfig();
+	const zone = timeZone ?? config.timeZone ?? browserTimeZone();
+	const locale = localeProp ?? config.locale;
+	let t4;
+	if ($[23] !== granularity) {
+		t4 = hasTime(granularity);
+		$[23] = granularity;
+		$[24] = t4;
+	} else t4 = $[24];
+	const withTime = t4;
 	const [inner, setInner] = React.useState(defaultValue);
 	const current = (value === void 0 ? inner : value) || null;
-	let t4;
-	if ($[21] !== current) {
-		t4 = datePart(current);
-		$[21] = current;
-		$[22] = t4;
-	} else t4 = $[22];
-	const date = t4;
-	let t5;
-	if ($[23] !== current || $[24] !== defaultTime || $[25] !== withTime) {
-		t5 = withTime ? timePart(current) ?? defaultTime : null;
-		$[23] = current;
-		$[24] = defaultTime;
-		$[25] = withTime;
-		$[26] = t5;
-	} else t5 = $[26];
-	const time = t5;
+	const wall = toWall(current, zone);
+	const date = datePart(wall);
+	const time = withTime ? wall && wall.length > 10 ? wall.slice(11) : truncate(`2000-01-01T${defaultTime}`, "second").slice(11) : null;
+	const [lower, upper] = [toWall(min, zone) ?? void 0, toWall(max, zone) ?? void 0];
 	const [open, setOpen] = useOpenState(field);
-	let t6;
-	if ($[27] !== max || $[28] !== min || $[29] !== onValueChange) {
-		t6 = (next) => {
-			const bounded = next === null ? null : withinBounds(next, min, max);
-			setInner(bounded);
-			onValueChange?.(bounded);
-		};
-		$[27] = max;
-		$[28] = min;
-		$[29] = onValueChange;
-		$[30] = t6;
-	} else t6 = $[30];
-	const commit = t6;
-	const t7 = placeholder ?? (withTime ? "Select date and time" : "Select date");
-	let t8;
-	if ($[31] !== current || $[32] !== date || $[33] !== formatValue || $[34] !== withTime) {
-		t8 = date && current ? formatValue?.(current) ?? formatDate(withTime ? current : date) : null;
-		$[31] = current;
-		$[32] = date;
-		$[33] = formatValue;
-		$[34] = withTime;
-		$[35] = t8;
-	} else t8 = $[35];
-	let t9;
-	if ($[36] !== current || $[37] !== name) {
-		t9 = name && /* @__PURE__ */ jsx("input", {
+	const commit = (next) => {
+		const cut = next === null ? null : truncate(withinBounds(next, lower, upper), granularity);
+		const stored = cut && withTime ? toInstant(cut, zone) : cut;
+		setInner(stored);
+		onValueChange?.(stored);
+	};
+	const T0 = PickerField;
+	const t5 = placeholder ?? placeholders[granularity];
+	const t6 = date && current ? formatValue?.(current) ?? formatDate(current, {
+		format: format ?? config.formats?.[granularity],
+		granularity,
+		timeZone: zone,
+		locale
+	}) : null;
+	let t7;
+	if ($[25] !== current || $[26] !== name) {
+		t7 = name && /* @__PURE__ */ jsx("input", {
 			type: "hidden",
 			name,
 			value: current ?? ""
 		});
-		$[36] = current;
-		$[37] = name;
-		$[38] = t9;
-	} else t9 = $[38];
-	let t10;
-	if ($[39] !== commit || $[40] !== setOpen || $[41] !== time || $[42] !== withTime) {
-		t10 = (next_0) => {
-			commit(withTime ? `${next_0}T${time}` : next_0);
-			if (!withTime) setOpen(false);
-		};
-		$[39] = commit;
-		$[40] = setOpen;
-		$[41] = time;
-		$[42] = withTime;
-		$[43] = t10;
-	} else t10 = $[43];
-	let t11;
-	if ($[44] !== min) {
-		t11 = datePart(min) ?? void 0;
-		$[44] = min;
-		$[45] = t11;
-	} else t11 = $[45];
+		$[25] = current;
+		$[26] = name;
+		$[27] = t7;
+	} else t7 = $[27];
+	const T1 = Calendar;
+	const t8 = withTime ? "day" : granularity;
+	const t9 = (next_0) => {
+		commit(withTime ? `${next_0}T${time}` : next_0);
+		if (!withTime) setOpen(false);
+	};
+	const t10 = datePart(lower) ?? void 0;
+	const t11 = datePart(upper) ?? void 0;
 	let t12;
-	if ($[46] !== max) {
-		t12 = datePart(max) ?? void 0;
-		$[46] = max;
-		$[47] = t12;
-	} else t12 = $[47];
-	let t13;
-	if ($[48] !== date || $[49] !== defaultMonth || $[50] !== isDateDisabled || $[51] !== labels || $[52] !== locale || $[53] !== t10 || $[54] !== t11 || $[55] !== t12 || $[56] !== weekStartsOn) {
-		t13 = /* @__PURE__ */ jsx(Calendar, {
+	if ($[28] !== T1 || $[29] !== date || $[30] !== defaultMonth || $[31] !== isDateDisabled || $[32] !== labels || $[33] !== locale || $[34] !== t10 || $[35] !== t11 || $[36] !== t8 || $[37] !== t9 || $[38] !== weekStartsOn) {
+		t12 = /* @__PURE__ */ jsx(T1, {
 			value: date,
-			onValueChange: t10,
-			min: t11,
-			max: t12,
+			granularity: t8,
+			onValueChange: t9,
+			min: t10,
+			max: t11,
 			isDateDisabled,
 			defaultMonth,
 			locale,
 			weekStartsOn,
 			labels
 		});
-		$[48] = date;
-		$[49] = defaultMonth;
-		$[50] = isDateDisabled;
-		$[51] = labels;
-		$[52] = locale;
-		$[53] = t10;
-		$[54] = t11;
-		$[55] = t12;
-		$[56] = weekStartsOn;
-		$[57] = t13;
-	} else t13 = $[57];
-	let t14;
-	if ($[58] !== commit || $[59] !== date || $[60] !== max || $[61] !== min || $[62] !== step || $[63] !== text || $[64] !== time) {
-		t14 = time !== null && /* @__PURE__ */ jsx(TimeField, {
+		$[28] = T1;
+		$[29] = date;
+		$[30] = defaultMonth;
+		$[31] = isDateDisabled;
+		$[32] = labels;
+		$[33] = locale;
+		$[34] = t10;
+		$[35] = t11;
+		$[36] = t8;
+		$[37] = t9;
+		$[38] = weekStartsOn;
+		$[39] = t12;
+	} else t12 = $[39];
+	let t13;
+	if ($[40] !== commit || $[41] !== date || $[42] !== granularity || $[43] !== lower || $[44] !== step || $[45] !== text || $[46] !== time || $[47] !== upper || $[48] !== zone) {
+		t13 = time !== null && /* @__PURE__ */ jsx(TimeField, {
 			value: time,
 			step: step && step > 0 ? Math.floor(step) || 1 : 60,
+			units: granularity === "hour" ? 1 : granularity === "minute" ? 2 : 3,
 			labels: text,
-			onChange: (next_1) => commit(`${date ?? withinBounds(todayIso(), datePart(min) ?? void 0, datePart(max) ?? void 0)}T${next_1}`)
+			onChange: (next_1) => commit(`${date ?? withinBounds(todayIso(zone), datePart(lower) ?? void 0, datePart(upper) ?? void 0)}T${next_1}`)
 		});
-		$[58] = commit;
-		$[59] = date;
-		$[60] = max;
-		$[61] = min;
-		$[62] = step;
-		$[63] = text;
-		$[64] = time;
-		$[65] = t14;
-	} else t14 = $[65];
-	let t15;
-	if ($[66] !== isDateDisabled) {
-		t15 = isDateDisabled?.(todayIso());
-		$[66] = isDateDisabled;
-		$[67] = t15;
-	} else t15 = $[67];
-	const t16 = Boolean(t15);
-	let t17;
-	if ($[68] !== commit || $[69] !== setOpen || $[70] !== time || $[71] !== withTime) {
-		t17 = () => {
-			const today = todayIso();
+		$[40] = commit;
+		$[41] = date;
+		$[42] = granularity;
+		$[43] = lower;
+		$[44] = step;
+		$[45] = text;
+		$[46] = time;
+		$[47] = upper;
+		$[48] = zone;
+		$[49] = t13;
+	} else t13 = $[49];
+	let t14;
+	if ($[50] !== isDateDisabled || $[51] !== zone) {
+		t14 = isDateDisabled?.(todayIso(zone));
+		$[50] = isDateDisabled;
+		$[51] = zone;
+		$[52] = t14;
+	} else t14 = $[52];
+	const t15 = Boolean(t14);
+	let t16;
+	if ($[53] !== commit || $[54] !== setOpen || $[55] !== time || $[56] !== withTime || $[57] !== zone) {
+		t16 = () => {
+			const today = todayIso(zone);
 			commit(withTime ? `${today}T${time}` : today);
 			if (!withTime) setOpen(false);
 		};
-		$[68] = commit;
-		$[69] = setOpen;
-		$[70] = time;
-		$[71] = withTime;
-		$[72] = t17;
-	} else t17 = $[72];
-	let t18;
-	if ($[73] !== t16 || $[74] !== t17 || $[75] !== text.today) {
-		t18 = /* @__PURE__ */ jsx(Button, {
+		$[53] = commit;
+		$[54] = setOpen;
+		$[55] = time;
+		$[56] = withTime;
+		$[57] = zone;
+		$[58] = t16;
+	} else t16 = $[58];
+	let t17;
+	if ($[59] !== t15 || $[60] !== t16 || $[61] !== text.today) {
+		t17 = /* @__PURE__ */ jsx(Button, {
 			size: "sm",
 			variant: "ghost",
 			shape: "rounded",
-			disabled: t16,
-			onClick: t17,
+			disabled: t15,
+			onClick: t16,
 			children: text.today
 		});
-		$[73] = t16;
-		$[74] = t17;
-		$[75] = text.today;
-		$[76] = t18;
-	} else t18 = $[76];
-	let t19;
-	if ($[77] !== clearable || $[78] !== commit || $[79] !== current || $[80] !== field || $[81] !== setOpen || $[82] !== text.clear) {
-		t19 = (clearable ?? !field.required) && /* @__PURE__ */ jsx(Button, {
+		$[59] = t15;
+		$[60] = t16;
+		$[61] = text.today;
+		$[62] = t17;
+	} else t17 = $[62];
+	let t18;
+	if ($[63] !== clearable || $[64] !== commit || $[65] !== current || $[66] !== field || $[67] !== setOpen || $[68] !== text.clear) {
+		t18 = (clearable ?? !field.required) && /* @__PURE__ */ jsx(Button, {
 			size: "sm",
 			variant: "ghost",
 			shape: "rounded",
@@ -379,105 +378,142 @@ function Picker(t0) {
 			},
 			children: text.clear
 		});
-		$[77] = clearable;
-		$[78] = commit;
-		$[79] = current;
-		$[80] = field;
-		$[81] = setOpen;
-		$[82] = text.clear;
-		$[83] = t19;
-	} else t19 = $[83];
-	let t20;
-	if ($[84] !== setOpen || $[85] !== text.done || $[86] !== withTime) {
-		t20 = withTime && /* @__PURE__ */ jsx(Button, {
+		$[63] = clearable;
+		$[64] = commit;
+		$[65] = current;
+		$[66] = field;
+		$[67] = setOpen;
+		$[68] = text.clear;
+		$[69] = t18;
+	} else t18 = $[69];
+	let t19;
+	if ($[70] !== setOpen || $[71] !== text.done || $[72] !== withTime) {
+		t19 = withTime && /* @__PURE__ */ jsx(Button, {
 			size: "sm",
 			shape: "rounded",
 			className: "oui-date-picker__done",
 			onClick: () => setOpen(false),
 			children: text.done
 		});
-		$[84] = setOpen;
-		$[85] = text.done;
-		$[86] = withTime;
-		$[87] = t20;
-	} else t20 = $[87];
-	let t21;
-	if ($[88] !== t18 || $[89] !== t19 || $[90] !== t20) {
-		t21 = /* @__PURE__ */ jsxs("div", {
+		$[70] = setOpen;
+		$[71] = text.done;
+		$[72] = withTime;
+		$[73] = t19;
+	} else t19 = $[73];
+	let t20;
+	if ($[74] !== t17 || $[75] !== t18 || $[76] !== t19) {
+		t20 = /* @__PURE__ */ jsxs("div", {
 			className: "oui-date-picker__footer",
 			children: [
+				t17,
 				t18,
-				t19,
-				t20
+				t19
 			]
 		});
-		$[88] = t18;
-		$[89] = t19;
-		$[90] = t20;
-		$[91] = t21;
-	} else t21 = $[91];
-	let t22;
-	if ($[92] !== field || $[93] !== open || $[94] !== setOpen || $[95] !== t13 || $[96] !== t14 || $[97] !== t21 || $[98] !== t7 || $[99] !== t8 || $[100] !== t9) {
-		t22 = /* @__PURE__ */ jsxs(PickerField, {
+		$[74] = t17;
+		$[75] = t18;
+		$[76] = t19;
+		$[77] = t20;
+	} else t20 = $[77];
+	let t21;
+	if ($[78] !== T0 || $[79] !== field || $[80] !== open || $[81] !== setOpen || $[82] !== t12 || $[83] !== t13 || $[84] !== t20 || $[85] !== t5 || $[86] !== t6 || $[87] !== t7) {
+		t21 = /* @__PURE__ */ jsxs(T0, {
 			...field,
 			open,
 			onOpenChange: setOpen,
-			placeholder: t7,
-			display: t8,
-			inputs: t9,
+			placeholder: t5,
+			display: t6,
+			inputs: t7,
 			children: [
+				t12,
 				t13,
-				t14,
-				t21
+				t20
 			]
 		});
-		$[92] = field;
-		$[93] = open;
-		$[94] = setOpen;
-		$[95] = t13;
-		$[96] = t14;
-		$[97] = t21;
-		$[98] = t7;
-		$[99] = t8;
-		$[100] = t9;
-		$[101] = t22;
-	} else t22 = $[101];
-	return t22;
+		$[78] = T0;
+		$[79] = field;
+		$[80] = open;
+		$[81] = setOpen;
+		$[82] = t12;
+		$[83] = t13;
+		$[84] = t20;
+		$[85] = t5;
+		$[86] = t6;
+		$[87] = t7;
+		$[88] = t21;
+	} else t21 = $[88];
+	return t21;
 }
 /**
-* Date field with a calendar popover. Values are ISO dates (`"2026-03-09"`),
-* the same format as `<input type="date">`, and are shown the same way.
+* Date field with a calendar popover. Day values are ISO dates (`"2026-03-09"`),
+* the same format as `<input type="date">`. `granularity="month"` or `"year"` opens a
+* month or year grid and stores the period's first day (`"2026-03-01"`); a time
+* granularity behaves like `DateTimePicker`.
+*
+* @example
+* <DatePicker label="Delivery date" value={date} onValueChange={setDate} />
+* <DatePicker label="Billing month" granularity="month" format="MMMM YYYY" />
 */
-function DatePicker(props) {
-	const $ = c(2);
-	let t0;
-	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Picker, {
-			mode: "date",
+function DatePicker(t0) {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({granularity: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const granularity = t1 === void 0 ? "day" : t1;
+	let t2;
+	if ($[3] !== granularity || $[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(Picker, {
+			granularity,
 			...props
 		});
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
+		$[3] = granularity;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 }
 /**
-* Date and time field. Values are local ISO date-times (`"2026-03-09T14:30"`),
-* the same format as `<input type="datetime-local">`, shown as `2026-03-09 14:30:00`
-* on a 24-hour clock whatever the locale.
+* Date and time field. Values are UTC instants (`"2026-03-09T13:30:00Z"`) shown and
+* edited in `timeZone` (the browser's by default) on a 24-hour clock, as
+* `2026-03-09 14:30`. Values without an offset (`"2026-03-09T14:30"`) are read as
+* wall-clock time in `timeZone`.
+*
+* @example
+* <DateTimePicker label="Departure" value={slot} onValueChange={setSlot} timeZone="Europe/Budapest" />
 */
-function DateTimePicker(props) {
-	const $ = c(2);
-	let t0;
-	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Picker, {
-			mode: "datetime",
+function DateTimePicker(t0) {
+	const $ = c(6);
+	let granularity;
+	let props;
+	if ($[0] !== t0) {
+		({granularity, ...props} = t0);
+		$[0] = t0;
+		$[1] = granularity;
+		$[2] = props;
+	} else {
+		granularity = $[1];
+		props = $[2];
+	}
+	const unit = granularity ?? (props.step && props.step % 60 !== 0 ? "second" : "minute");
+	let t1;
+	if ($[3] !== props || $[4] !== unit) {
+		t1 = /* @__PURE__ */ jsx(Picker, {
+			granularity: unit,
 			...props
 		});
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
+		$[3] = props;
+		$[4] = unit;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 }
 //#endregion
 export { DatePicker, DateTimePicker };