@nepdatejs/react 0.0.0-stage → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,915 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_headless = require("./headless-AEI6dxTJ.cjs");
+const require_date_text = require("./date-text-BX3Uag0O.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _nepdatejs_core = require("@nepdatejs/core");
+let _nepdatejs_dom = require("@nepdatejs/dom");
+//#region src/icons.tsx
+const PATHS = {
+	"chevron-left": ["M10 3.5 5.5 8l4.5 4.5"],
+	"chevron-right": ["M6 3.5 10.5 8 6 12.5"],
+	calendar: [
+		"M2 6.5h12",
+		"M5.5 1.5v3",
+		"M10.5 1.5v3",
+		"M4 3h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
+	],
+	close: ["M4 4l8 8", "M12 4l-8 8"]
+};
+/** The Figma icon set, 16px, stroked with currentColor. */
+function Icon({ name }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: PATHS[name].map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d }, d))
+	});
+}
+//#endregion
+//#region src/calendar-body.tsx
+/** The calendar markup (@nepdatejs/styles contract) for any set of bindings. */
+function CalendarBody({ bindings, className, theme }) {
+	const { state } = bindings;
+	const tiles = state.view === "month" ? state.months : state.view === "year" ? state.years : state.fiscalYears;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: className ? `ndp-calendar ${className}` : "ndp-calendar",
+		"data-ndp-theme": theme,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "ndp-calendar__header",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "ndp-icon-button",
+					...bindings.getPrevProps(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "chevron-left" })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "ndp-calendar__title",
+					"aria-live": "polite",
+					children: bindings.getTitleButtons().map((button) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "ndp-calendar__title-button",
+						...button.props,
+						children: button.label
+					}, button.key))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					className: "ndp-icon-button",
+					...bindings.getNextProps(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "chevron-right" })
+				})
+			]
+		}), state.view === "day" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+			className: "ndp-grid",
+			...bindings.getGridProps(),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+				role: "row",
+				children: state.weekdays.map((weekday) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+					className: "ndp-weekday",
+					scope: "col",
+					role: "columnheader",
+					abbr: weekday.longLabel,
+					"data-weekend": weekday.isWeekend || void 0,
+					children: weekday.label
+				}, weekday.index))
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: state.weeks.map((week, row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+				role: "row",
+				children: week.map((cell, column) => cell ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+					role: "gridcell",
+					"aria-selected": cell.isSelected || void 0,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						className: "ndp-day",
+						...bindings.getDayProps(cell),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ndp-sr-only",
+								children: cell.ariaLabel
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ndp-day__label",
+								"aria-hidden": "true",
+								children: cell.label
+							}),
+							cell.subLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ndp-day__sub",
+								"aria-hidden": "true",
+								children: cell.subLabel
+							}),
+							cell.events[0] && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ndp-day__dot",
+								"aria-hidden": "true",
+								style: cell.events[0].color ? { "--ndp-dot-color": cell.events[0].color } : void 0
+							})
+						]
+					})
+				}, cell.key) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", { role: "gridcell" }, `empty-${column}`))
+			}, row)) })]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "ndp-options",
+			role: "group",
+			"aria-label": state.title,
+			children: tiles.map((tile, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				className: "ndp-option",
+				...bindings.getOptionProps(tile, index, tiles),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ndp-sr-only",
+						children: tile.subLabel ? `${tile.label} (${tile.subLabel})` : tile.label
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ndp-option__label",
+						"aria-hidden": "true",
+						children: tile.label
+					}),
+					tile.subLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ndp-option__sub",
+						"aria-hidden": "true",
+						children: tile.subLabel
+					})
+				]
+			}, tile.value))
+		})]
+	});
+}
+//#endregion
+//#region src/calendar.tsx
+/** A standalone BS/AD month view with keyboard support. */
+function Calendar({ month, onMonthChange, className, theme, ...options }) {
+	const bindings = require_headless.useCalendar({
+		...options,
+		visibleMonth: month,
+		onVisibleMonthChange: onMonthChange
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarBody, {
+		bindings,
+		className,
+		theme
+	});
+}
+//#endregion
+//#region src/page-locale.ts
+const neverChanges = () => () => void 0;
+/** Used on the server and while hydrating, so both render the same text. */
+function defaultLocale() {
+	return (0, _nepdatejs_core.getConfig)().defaultLocale;
+}
+/** Nepali names and digits when the page language is Nepali. Browser only. */
+function pageLocale() {
+	return document.documentElement.lang.toLowerCase().startsWith("ne") ? "ne" : defaultLocale();
+}
+/** The given locale, or else the page's language. */
+function usePageLocale(given) {
+	const page = (0, react.useSyncExternalStore)(neverChanges, pageLocale, defaultLocale);
+	return given ?? page;
+}
+//#endregion
+//#region src/panel.ts
+/**
+* While `open`: show the panel in the top layer beside the anchor, close on an
+* outside pointer, a tap on a bottom sheet's backdrop, or Escape (returning focus to `returnFocus`), and move focus
+* into the calendar.
+*/
+function usePanel(open, refs, close, focusGrid, width = 320, layout = "auto") {
+	const closeRef = (0, react.useRef)(close);
+	closeRef.current = close;
+	require_headless.useIsomorphicLayoutEffect(() => {
+		const anchor = refs.anchor.current;
+		const panel = refs.panel.current;
+		if (!open || !anchor || !panel) return;
+		const stopTracking = (0, _nepdatejs_dom.trackPosition)(anchor, panel, {
+			width,
+			layout
+		});
+		const stopOutside = (0, _nepdatejs_dom.onOutsidePointer)(() => [refs.field.current, refs.panel.current], () => {
+			closeRef.current();
+		});
+		const stopBackdrop = (0, _nepdatejs_dom.onBackdropPointer)(panel, () => {
+			closeRef.current();
+		});
+		const stopEscape = (0, _nepdatejs_dom.onEscape)(() => {
+			closeRef.current();
+			(0, _nepdatejs_dom.restoreFocus)(refs.returnFocus.current);
+		});
+		return () => {
+			stopTracking();
+			stopOutside();
+			stopBackdrop();
+			stopEscape();
+		};
+	}, [
+		open,
+		width,
+		layout
+	]);
+	(0, react.useEffect)(() => {
+		if (open) focusGrid();
+	}, [open]);
+}
+//#endregion
+//#region src/presets.tsx
+/** The panel body: the shortcut list (when there are presets), then the calendar and anything else. */
+function PanelBody({ presets, label, onPreset, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "ndp-panel__body",
+		children: [presets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "ndp-presets",
+			role: "group",
+			"aria-label": label,
+			children: presets.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "ndp-preset",
+				"aria-pressed": preset.isActive,
+				disabled: preset.isDisabled,
+				onClick: () => {
+					onPreset(preset.id);
+				},
+				children: preset.label
+			}, preset.id))
+		}), children]
+	});
+}
+//#endregion
+//#region src/date-picker.tsx
+/**
+* A BS/AD date field: type a date or pick it from a calendar. The value is
+* always the AD day as "YYYY-MM-DD", so forms, validation and storage are
+* unchanged and a BS date can never be sent as if it were AD.
+*/
+function DatePicker(props) {
+	const { name, placeholder, required, disabled = false, clearable = true, showEquivalent = true, persistCalendar, panelLayout, theme, className, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, locale: localeProp, onCalendarChange, ...options } = props;
+	const locale = usePageLocale(localeProp);
+	const picker = require_headless.useDatePicker({
+		...options,
+		locale,
+		onCalendarChange: (calendar) => {
+			remember(persistCalendar, calendar);
+			onCalendarChange?.(calendar);
+		}
+	});
+	const { state, store, calendar } = picker;
+	const labels = (0, _nepdatejs_core.getLocale)(locale);
+	const field = (0, react.useRef)(null);
+	const box = (0, react.useRef)(null);
+	const panel = (0, react.useRef)(null);
+	const input = (0, react.useRef)(null);
+	const hidden = (0, react.useRef)(null);
+	const panelWidth = state.presets.length > 0 ? 492 : 320;
+	usePanel(state.open && !state.inline, {
+		anchor: box,
+		panel,
+		field,
+		returnFocus: input
+	}, () => {
+		store.actions.close();
+	}, calendar.focusGrid, panelWidth, panelLayout);
+	(0, react.useEffect)(() => {
+		const stored = read(persistCalendar);
+		if (stored) store.actions.switchCalendar(stored);
+	}, [persistCalendar, store]);
+	(0, react.useEffect)(() => {
+		const form = hidden.current?.form ?? input.current?.form;
+		if (!form) return;
+		const reset = () => {
+			store.actions.reset();
+		};
+		form.addEventListener("reset", reset);
+		return () => {
+			form.removeEventListener("reset", reset);
+		};
+	}, [store]);
+	(0, react.useEffect)(() => {
+		input.current?.setCustomValidity(state.error?.message ?? "");
+	}, [state.error]);
+	const hint = state.error?.message ?? (showEquivalent ? state.equivalentText : null);
+	const inputProps = picker.getInputProps();
+	const describedBy = [ariaDescribedBy, hint ? picker.ids.hint : void 0].filter(Boolean).join(" ") || void 0;
+	const invalid = ariaInvalid === true || state.error !== null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: field,
+		className: className ? `ndp-field ${className}` : "ndp-field",
+		"data-ndp-theme": theme,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: box,
+				className: "ndp-input",
+				"data-invalid": invalid || void 0,
+				"data-disabled": disabled || void 0,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: input,
+					className: "ndp-input__control",
+					...inputProps,
+					"aria-describedby": describedBy,
+					"aria-invalid": invalid || void 0,
+					"aria-label": ariaLabel,
+					placeholder: placeholder ?? state.placeholder,
+					required,
+					disabled
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "ndp-input__actions",
+					children: [
+						clearable && state.text !== "" && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "ndp-icon-button",
+							...picker.getClearProps(),
+							onClick: () => {
+								store.actions.clear();
+								input.current?.focus();
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "close" })
+						}),
+						state.canSwitchCalendar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "ndp-input__switch",
+							disabled,
+							...picker.getSwitchProps(),
+							children: labels.calendarNames[state.calendar]
+						}),
+						!state.inline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "ndp-icon-button",
+							disabled,
+							...picker.getToggleProps(),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "calendar" })
+						})
+					]
+				})]
+			}),
+			hint !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: picker.ids.hint,
+				className: "ndp-hint",
+				"data-error": state.error ? true : void 0,
+				"aria-live": "polite",
+				children: hint
+			}),
+			name !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: hidden,
+				type: "hidden",
+				name,
+				value: state.value,
+				disabled
+			}),
+			state.open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panel,
+				className: "ndp-panel",
+				popover: state.inline ? void 0 : "manual",
+				"data-layout": state.inline ? "inline" : void 0,
+				style: state.inline ? { "--ndp-panel-width": `${String(panelWidth)}px` } : void 0,
+				"data-ndp-theme": theme,
+				...picker.getPanelProps(),
+				"aria-label": ariaLabel ? `${ariaLabel}: ${labels.labels.calendar}` : labels.labels.chooseDate,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelBody, {
+					presets: state.presets,
+					label: labels.labels.presets,
+					onPreset: (id) => {
+						if (store.actions.applyPreset(id) && !store.getState().open) (0, _nepdatejs_dom.restoreFocus)(input.current);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarBody, { bindings: {
+						...calendar,
+						getDayProps: (cell) => ({
+							...calendar.getDayProps(cell),
+							onClick: () => {
+								if (!cell.isDisabled && store.actions.select(cell.date) && !store.getState().open) (0, _nepdatejs_dom.restoreFocus)(input.current);
+							}
+						})
+					} })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ndp-panel__footer",
+					children: [state.canSwitchCalendar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ndp-segment",
+						role: "group",
+						"aria-label": labels.labels.calendar,
+						children: ["BS", "AD"].map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "ndp-segment__item",
+							...picker.getCalendarOptionProps(option),
+							children: labels.calendarNames[option]
+						}, option))
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "ndp-button",
+						...picker.getTodayProps(),
+						onClick: () => {
+							if (store.actions.selectToday()) (0, _nepdatejs_dom.restoreFocus)(input.current);
+						},
+						children: labels.labels.today
+					})]
+				})]
+			})
+		]
+	});
+}
+function read(key) {
+	if (!key) return null;
+	try {
+		const stored = window.localStorage.getItem(key);
+		return stored === "AD" || stored === "BS" ? stored : null;
+	} catch {
+		return null;
+	}
+}
+function remember(key, calendar) {
+	if (!key) return;
+	try {
+		window.localStorage.setItem(key, calendar);
+	} catch {}
+}
+//#endregion
+//#region src/date-range-picker.tsx
+/** Two BS/AD date fields sharing one calendar panel in range mode. */
+function DateRangePicker({ startName, endName, startLabel, endLabel, fiscalYearView = false, disabled = false, panelLayout, theme, className, ...options }) {
+	const locale = usePageLocale(options.locale);
+	const picker = require_headless.useDateRangePicker({
+		...options,
+		locale
+	});
+	const { state, store, calendar } = picker;
+	const labels = (0, _nepdatejs_core.getLocale)(locale);
+	const field = (0, react.useRef)(null);
+	const row = (0, react.useRef)(null);
+	const panel = (0, react.useRef)(null);
+	const start = (0, react.useRef)(null);
+	const panelWidth = state.presets.length > 0 ? 492 : 320;
+	usePanel(state.open && !state.inline, {
+		anchor: row,
+		panel,
+		field,
+		returnFocus: start
+	}, () => {
+		store.actions.close();
+	}, calendar.focusGrid, panelWidth, panelLayout);
+	const invalid = (which) => state.error !== null && (state.error.field === which || state.error.field === "range");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: field,
+		className: className ? `ndp-field ${className}` : "ndp-field",
+		"data-ndp-theme": theme,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: row,
+				className: "ndp-range",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ndp-input",
+						"data-invalid": invalid("start") || void 0,
+						"data-disabled": disabled || void 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: start,
+							className: "ndp-input__control",
+							...picker.getInputProps("start"),
+							"aria-label": startLabel,
+							disabled
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ndp-range__separator",
+						"aria-hidden": "true",
+						children: "→"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ndp-input",
+						"data-invalid": invalid("end") || void 0,
+						"data-disabled": disabled || void 0,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							className: "ndp-input__control",
+							...picker.getInputProps("end"),
+							"aria-label": endLabel,
+							disabled
+						}), !state.inline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "ndp-input__actions",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								className: "ndp-icon-button",
+								disabled,
+								...picker.getToggleProps(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "calendar" })
+							})
+						})]
+					})
+				]
+			}),
+			state.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: picker.ids.hint,
+				className: "ndp-hint",
+				"data-error": true,
+				"aria-live": "polite",
+				children: state.error.message
+			}),
+			startName !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name: startName,
+				value: state.value.start,
+				disabled
+			}),
+			endName !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name: endName,
+				value: state.value.end,
+				disabled
+			}),
+			state.open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panel,
+				className: "ndp-panel",
+				popover: state.inline ? void 0 : "manual",
+				"data-layout": state.inline ? "inline" : void 0,
+				style: state.inline ? { "--ndp-panel-width": `${String(panelWidth)}px` } : void 0,
+				"data-ndp-theme": theme,
+				...picker.getPanelProps(),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelBody, {
+					presets: state.presets,
+					label: labels.labels.presets,
+					onPreset: (id) => {
+						if (store.actions.applyPreset(id) && !store.getState().open) (0, _nepdatejs_dom.restoreFocus)(start.current);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarBody, { bindings: calendar })
+				}), (state.canSwitchCalendar || fiscalYearView) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ndp-panel__footer",
+					children: [state.canSwitchCalendar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ndp-segment",
+						role: "group",
+						"aria-label": labels.labels.calendar,
+						children: ["BS", "AD"].map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "ndp-segment__item",
+							...picker.getCalendarOptionProps(option),
+							children: labels.calendarNames[option]
+						}, option))
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), fiscalYearView && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "ndp-button",
+						"aria-pressed": state.calendarState.view === "fiscal",
+						onClick: () => {
+							store.calendar.actions.setView(state.calendarState.view === "fiscal" ? "day" : "fiscal");
+							calendar.focusGrid();
+						},
+						children: labels.labels.fiscalYear
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/time-columns.tsx
+/** Hour and minute columns (Figma "Time Item"); the selected items scroll into view. */
+function TimeColumns({ hours, minutes, locale, onHour, onMinute }) {
+	const root = (0, react.useRef)(null);
+	const labels = (0, _nepdatejs_core.getLocale)(locale).labels;
+	(0, react.useEffect)(() => {
+		for (const item of root.current?.querySelectorAll("[aria-pressed=\"true\"]") ?? []) if (typeof item.scrollIntoView === "function") item.scrollIntoView({ block: "nearest" });
+	}, []);
+	const column = (label, cells, pick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "ndp-time__column",
+		role: "group",
+		"aria-label": label,
+		children: cells.map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: "ndp-time-item",
+			"aria-pressed": cell.isSelected,
+			onClick: () => {
+				pick(cell.value);
+			},
+			children: cell.label
+		}, cell.value))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: root,
+		className: "ndp-time",
+		role: "group",
+		"aria-label": labels.time,
+		children: [column(labels.hour, hours, onHour), column(labels.minute, minutes, onMinute)]
+	});
+}
+//#endregion
+//#region src/date-time-picker.tsx
+/** A BS/AD date and time field. The value is one instant, with the zone's offset. */
+function DateTimePicker({ name, required, disabled = false, panelLayout, theme, className, "aria-label": ariaLabel, timeLabel, ...options }) {
+	const locale = usePageLocale(options.locale);
+	const { state, store, calendar, ids } = require_headless.useDateTimePicker({
+		...options,
+		locale
+	});
+	const labels = (0, _nepdatejs_core.getLocale)(locale);
+	const field = (0, react.useRef)(null);
+	const row = (0, react.useRef)(null);
+	const panel = (0, react.useRef)(null);
+	const dateInput = (0, react.useRef)(null);
+	const panelWidth = (state.presets.length > 0 ? 492 : 320) + 136;
+	usePanel(state.open && !state.inline, {
+		anchor: row,
+		panel,
+		field,
+		returnFocus: dateInput
+	}, () => {
+		store.actions.close();
+	}, calendar.focusGrid, panelWidth, panelLayout);
+	const hint = state.error?.message ?? state.equivalentText;
+	const invalid = (which) => state.error?.field === which;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: field,
+		className: className ? `ndp-field ${className}` : "ndp-field",
+		"data-ndp-theme": theme,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: row,
+				className: "ndp-datetime",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ndp-input",
+					"data-invalid": invalid("date") || void 0,
+					"data-disabled": disabled || void 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: dateInput,
+						id: ids.date,
+						className: "ndp-input__control",
+						...require_headless.popupProps(state),
+						type: "text",
+						inputMode: "numeric",
+						autoComplete: "off",
+						value: state.dateText,
+						placeholder: state.placeholder,
+						"aria-label": ariaLabel,
+						"aria-controls": ids.panel,
+						"aria-invalid": invalid("date") || void 0,
+						"aria-describedby": hint ? ids.hint : void 0,
+						required,
+						disabled,
+						onChange: (event) => {
+							store.actions.typeDate(event.target.value);
+						},
+						onBlur: () => {
+							store.actions.blurDate();
+						},
+						onKeyDown: (event) => {
+							if (event.key === "ArrowDown" && (event.altKey || state.dateText === "")) {
+								event.preventDefault();
+								store.actions.open();
+							}
+						}
+					}), !state.inline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "ndp-input__actions",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "ndp-icon-button",
+							disabled,
+							"aria-label": labels.labels.openCalendar,
+							"aria-expanded": state.open,
+							"aria-controls": ids.panel,
+							onClick: () => {
+								store.actions.toggle();
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "calendar" })
+						})
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "ndp-input ndp-input--time",
+					"data-invalid": invalid("time") || void 0,
+					"data-disabled": disabled || void 0,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						id: ids.time,
+						className: "ndp-input__control",
+						type: "text",
+						inputMode: "text",
+						autoComplete: "off",
+						value: state.timeText,
+						placeholder: state.timePlaceholder,
+						"aria-label": timeLabel ?? labels.labels.time,
+						"aria-invalid": invalid("time") || void 0,
+						"aria-describedby": hint ? ids.hint : void 0,
+						disabled,
+						onChange: (event) => {
+							store.actions.typeTime(event.target.value);
+						},
+						onBlur: () => {
+							store.actions.blurTime();
+						}
+					})
+				})]
+			}),
+			hint !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: ids.hint,
+				className: "ndp-hint",
+				"data-error": state.error ? true : void 0,
+				"aria-live": "polite",
+				children: hint
+			}),
+			name !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value: state.value,
+				disabled
+			}),
+			state.open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panel,
+				id: ids.panel,
+				className: "ndp-panel",
+				popover: state.inline ? void 0 : "manual",
+				"data-layout": state.inline ? "inline" : void 0,
+				style: state.inline ? { "--ndp-panel-width": `${String(panelWidth)}px` } : void 0,
+				role: state.inline ? "group" : "dialog",
+				"aria-label": labels.labels.chooseDate,
+				"data-ndp-theme": theme,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PanelBody, {
+					presets: state.presets,
+					label: labels.labels.presets,
+					onPreset: (presetId) => {
+						store.actions.applyPreset(presetId);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarBody, { bindings: calendar }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeColumns, {
+						hours: state.hours,
+						minutes: state.minutes,
+						locale: options.locale,
+						onHour: (hour) => {
+							store.actions.selectHour(hour);
+						},
+						onMinute: (minute) => {
+							store.actions.selectMinute(minute);
+						}
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ndp-panel__footer",
+					children: [state.canSwitchCalendar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ndp-segment",
+						role: "group",
+						"aria-label": labels.labels.calendar,
+						children: ["BS", "AD"].map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "ndp-segment__item",
+							"aria-pressed": state.calendar === option,
+							onClick: () => {
+								store.actions.switchCalendar(option);
+							},
+							children: labels.calendarNames[option]
+						}, option))
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "ndp-button",
+						onClick: () => {
+							store.actions.selectNow();
+						},
+						children: labels.labels.now
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "ndp-button",
+						"data-variant": "primary",
+						onClick: () => {
+							store.actions.close();
+							dateInput.current?.focus();
+						},
+						children: labels.labels.done
+					})] })]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/multi-date-picker.tsx
+/**
+* Several separate BS/AD days in one field (PICK-001): click days in the
+* panel to add or remove them, or type them separated by commas. The value is
+* the sorted AD days as "YYYY-MM-DD" strings.
+*/
+function MultiDatePicker({ name, placeholder, required, disabled = false, clearable = true, panelLayout, theme, className, "aria-label": ariaLabel, ...options }) {
+	const locale = usePageLocale(options.locale);
+	const picker = require_headless.useMultiDatePicker({
+		...options,
+		locale
+	});
+	const { state, store, calendar } = picker;
+	const labels = (0, _nepdatejs_core.getLocale)(locale);
+	const field = (0, react.useRef)(null);
+	const box = (0, react.useRef)(null);
+	const panel = (0, react.useRef)(null);
+	const input = (0, react.useRef)(null);
+	usePanel(state.open && !state.inline, {
+		anchor: box,
+		panel,
+		field,
+		returnFocus: input
+	}, () => {
+		store.actions.close();
+	}, calendar.focusGrid, 320, panelLayout);
+	(0, react.useEffect)(() => {
+		const form = input.current?.form;
+		if (!form) return;
+		const reset = () => {
+			store.actions.reset();
+		};
+		form.addEventListener("reset", reset);
+		return () => {
+			form.removeEventListener("reset", reset);
+		};
+	}, [store]);
+	(0, react.useEffect)(() => {
+		input.current?.setCustomValidity(state.error?.message ?? "");
+	}, [state.error]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: field,
+		className: className ? `ndp-field ${className}` : "ndp-field",
+		"data-ndp-theme": theme,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: box,
+				className: "ndp-input",
+				"data-invalid": state.error !== null || void 0,
+				"data-disabled": disabled || void 0,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: input,
+					className: "ndp-input__control",
+					...picker.getInputProps(),
+					"aria-label": ariaLabel,
+					placeholder: placeholder ?? state.placeholder,
+					required,
+					disabled
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "ndp-input__actions",
+					children: [clearable && state.text !== "" && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "ndp-icon-button",
+						...picker.getClearProps(),
+						onClick: () => {
+							store.actions.clear();
+							input.current?.focus();
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "close" })
+					}), !state.inline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						className: "ndp-icon-button",
+						disabled,
+						...picker.getToggleProps(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "calendar" })
+					})]
+				})]
+			}),
+			state.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: picker.ids.hint,
+				className: "ndp-hint",
+				"data-error": true,
+				"aria-live": "polite",
+				children: state.error.message
+			}),
+			name !== void 0 && state.value.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value: day,
+				disabled
+			}, day)),
+			state.open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panel,
+				className: "ndp-panel",
+				popover: state.inline ? void 0 : "manual",
+				"data-layout": state.inline ? "inline" : void 0,
+				style: state.inline ? { "--ndp-panel-width": `${String(320)}px` } : void 0,
+				"data-ndp-theme": theme,
+				...picker.getPanelProps(),
+				"aria-label": ariaLabel ? `${ariaLabel}: ${labels.labels.calendar}` : labels.labels.chooseDate,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarBody, { bindings: {
+					...calendar,
+					getDayProps: (cell) => ({
+						...calendar.getDayProps(cell),
+						onClick: () => {
+							if (!cell.isDisabled && store.actions.select(cell.date) && !store.getState().open) (0, _nepdatejs_dom.restoreFocus)(input.current);
+						}
+					})
+				} }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "ndp-panel__footer",
+					children: [state.canSwitchCalendar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ndp-segment",
+						role: "group",
+						"aria-label": labels.labels.calendar,
+						children: ["BS", "AD"].map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							className: "ndp-segment__item",
+							...picker.getCalendarOptionProps(option),
+							children: labels.calendarNames[option]
+						}, option))
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), !state.inline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "ndp-button",
+						onClick: () => {
+							store.actions.close();
+							(0, _nepdatejs_dom.restoreFocus)(input.current);
+						},
+						children: labels.labels.done
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+exports.Calendar = Calendar;
+exports.CalendarBody = CalendarBody;
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
+exports.DateText = require_date_text.DateText;
+exports.DateTimePicker = DateTimePicker;
+exports.Icon = Icon;
+exports.MultiDatePicker = MultiDatePicker;
+exports.ShortDate = require_date_text.ShortDate;
+exports.TimeColumns = TimeColumns;
+exports.bothDates = require_date_text.bothDates;
+exports.deepEqual = require_headless.deepEqual;
+exports.shortDate = require_date_text.shortDate;
+exports.useCalendar = require_headless.useCalendar;
+exports.useCalendarBindings = require_headless.useCalendarBindings;
+exports.useDatePicker = require_headless.useDatePicker;
+exports.useDateRangePicker = require_headless.useDateRangePicker;
+exports.useDateTimePicker = require_headless.useDateTimePicker;
+exports.useMultiDatePicker = require_headless.useMultiDatePicker;
+exports.useStore = require_headless.useStore;
+
+//# sourceMappingURL=index.cjs.map