@octax-app/hot-date-react 0.0.7 → 0.0.9

package/README.md

@@ -187,6 +187,25 @@ When `value` is provided the input renders in display mode — showing the forma
   onClick={(e) => console.log('clicked')}
   onMouseEnter={(e) => console.log('mouse in')}
   onMouseLeave={(e) => console.log('mouse out')}
+  onError={(err) => console.log(err)} // "Date is outside the allowed range." | undefined
+/>
+```
+
+### Error handling
+
+`onError` fires whenever the typed input is invalid — out of range, wrong mode, or unparseable. It fires with `undefined` when the error clears (user types a valid date or empties the field). Only fires when the error state actually changes, not on every keystroke.
+
+```tsx
+<HotDate
+  endDate={new Date()}              // today is the latest allowed date
+  onError={(err) => {
+    if (err) setErrorMsg(err);      // e.g. "Date is outside the allowed range."
+    else setErrorMsg("");           // cleared
+  }}
+  onChange={(value) => {
+    // value is "" when nothing is selected, "YYYY-MM-DD" when valid
+    setValue(value as string);
+  }}
 />
 ```
 
@@ -196,9 +215,10 @@ When `value` is provided the input renders in display mode — showing the forma
 | --- | --- | --- | --- |
 | `value` | `string \| null` | — | Controlled canonical value (`YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`). Enters display mode while unfocused. |
 | `defaultValue` | `string \| null` | — | Uncontrolled initial value. Mounts in display mode; React does not drive updates after mount. |
-| `onChange` | `(value: string \| [string, string] \| null) => void` | — | Fires on every valid parse. Range returns `[start, end]`. |
-| `onCommit` | `(value: string \| [string, string] \| null) => void` | — | Fires on Enter key commit. |
+| `onChange` | `(value: string \| [string, string]) => void` | — | Fires on every valid parse. Returns `""` when no value. Range returns `[start, end]`. |
+| `onCommit` | `(value: string \| [string, string]) => void` | — | Fires on Enter key commit. Returns `""` when no value. |
 | `onClear` | `() => void` | — | Fires when input is cleared. |
+| `onError` | `(error: string \| undefined) => void` | — | Fires when input is invalid (out of range, unparseable, wrong mode). Fires `undefined` when the error clears. Only fires on state change, not every keystroke. |
 | `onFocus` | `(e: FocusEvent) => void` | — | Fires when the input gains focus. |
 | `onBlur` | `(e: FocusEvent) => void` | — | Fires when the input loses focus. |
 | `onKeyDown` | `(e: KeyboardEvent) => void` | — | Fires on keydown. |

package/dist/{hot-date-B8i-uiIl.js → hot-date-DIgUxVss.js}

@@ -78,7 +78,7 @@ function y(e) {
 	return /^\d+$/.test(t) ? Number(t) : l[t] ?? null;
 }
 //#endregion
-//#region node_modules/.pnpm/@js-temporal+polyfill@0.4.4/node_modules/@js-temporal/polyfill/dist/index.esm.js
+//#region node_modules/@js-temporal/polyfill/dist/index.esm.js
 var b = /* @__PURE__ */ c((/* @__PURE__ */ o(((e, t) => {
 	(function(n, r) {
 		typeof e == "object" && t !== void 0 ? t.exports = r() : typeof define == "function" && define.amd ? define(r) : (n ||= self, n.JSBI = r());
@@ -8805,6 +8805,7 @@ var Gc = class extends HTMLElement {
 	parser = new Pc();
 	internals;
 	styleObserver = null;
+	fieldElement;
 	inputElement;
 	ghostElement;
 	ghostTypedElement;
@@ -8822,12 +8823,15 @@ var Gc = class extends HTMLElement {
 		super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.append(Wc().content.cloneNode(!0));
 		let e = this.shadowRoot;
 		if (!e) throw Error("Unable to create shadow root.");
-		this.inputElement = e.querySelector("input") ?? document.createElement("input"), this.ghostElement = e.querySelector(".ghost") ?? document.createElement("div"), this.ghostTypedElement = e.querySelector(".ghost-typed") ?? document.createElement("span"), this.ghostTailElement = e.querySelector(".ghost-tail") ?? document.createElement("span"), this.ghostHintElement = e.querySelector(".ghost-hint") ?? document.createElement("kbd"), this.ghostResolutionElement = e.querySelector(".ghost-resolution") ?? document.createElement("span"), this.ambiguityElement = document.createElement("div"), this.ambiguityElement.setAttribute("slot", "ambiguity"), this.ambiguityElement.hidden = !0, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : null, this.bindEvents();
+		this.fieldElement = e.querySelector(".field") ?? document.createElement("div"), this.inputElement = e.querySelector("input") ?? document.createElement("input"), this.ghostElement = e.querySelector(".ghost") ?? document.createElement("div"), this.ghostTypedElement = e.querySelector(".ghost-typed") ?? document.createElement("span"), this.ghostTailElement = e.querySelector(".ghost-tail") ?? document.createElement("span"), this.ghostHintElement = e.querySelector(".ghost-hint") ?? document.createElement("kbd"), this.ghostResolutionElement = e.querySelector(".ghost-resolution") ?? document.createElement("span"), this.ambiguityElement = document.createElement("div"), this.ambiguityElement.setAttribute("slot", "ambiguity"), this.ambiguityElement.hidden = !0, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : null, this.bindEvents();
 	}
 	connectedCallback() {
 		this.ambiguityElement.parentNode !== this && this.append(this.ambiguityElement), this.updateStyles(), this.syncExternalStyles(), this.updateHintVisibility(), this.syncInputPresentation(), this.parseAndRender(), this.styleObserver || (this.styleObserver = new MutationObserver(() => this.syncExternalStyles()), this.styleObserver.observe(document.head, {
 			childList: !0,
 			subtree: !0
+		}), this.styleObserver.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
 		}));
 	}
 	disconnectedCallback() {
@@ -8976,26 +8980,28 @@ var Gc = class extends HTMLElement {
 	}
 	syncExternalStyles() {
 		if (!this.shadowRoot) return;
+		let e = Array.from(document.documentElement.classList);
+		this.fieldElement.className = "field" + (e.length ? " " + e.join(" ") : "");
 		try {
 			document.adoptedStyleSheets.length > 0 && (this.shadowRoot.adoptedStyleSheets = [...document.adoptedStyleSheets]);
 		} catch {}
-		let e = new Set(Array.from(this.shadowRoot.querySelectorAll("link[data-ext]")).map((e) => e.href));
-		document.querySelectorAll("link[rel=\"stylesheet\"]").forEach((t) => {
-			if (!e.has(t.href)) {
-				let e = document.createElement("link");
-				e.rel = "stylesheet", e.href = t.href, e.dataset.ext = "", this.shadowRoot.append(e);
+		let t = new Set(Array.from(this.shadowRoot.querySelectorAll("link[data-ext]")).map((e) => e.href));
+		document.querySelectorAll("link[rel=\"stylesheet\"]").forEach((e) => {
+			if (!t.has(e.href)) {
+				let t = document.createElement("link");
+				t.rel = "stylesheet", t.href = e.href, t.dataset.ext = "", this.shadowRoot.append(t);
 			}
 		});
-		let t = Array.from(document.head.querySelectorAll("style")), n = Array.from(this.shadowRoot.querySelectorAll("style[data-ext-style]"));
-		t.forEach((e, t) => {
-			let r = e.textContent ?? "";
-			if (n[t]) n[t].textContent !== r && (n[t].textContent = r);
+		let n = Array.from(document.head.querySelectorAll("style")), r = Array.from(this.shadowRoot.querySelectorAll("style[data-ext-style]"));
+		n.forEach((e, t) => {
+			let n = e.textContent ?? "";
+			if (r[t]) r[t].textContent !== n && (r[t].textContent = n);
 			else {
 				let e = document.createElement("style");
-				e.dataset.extStyle = "", e.textContent = r, this.shadowRoot.append(e);
+				e.dataset.extStyle = "", e.textContent = n, this.shadowRoot.append(e);
 			}
 		});
-		for (let e = t.length; e < n.length; e++) n[e].remove();
+		for (let e = n.length; e < r.length; e++) r[e].remove();
 		requestAnimationFrame(() => {
 			let e = window.getComputedStyle(this.inputElement);
 			this.ghostElement.style.font = e.font;

package/dist/hot-date-react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./hot-date-B8i-uiIl.js";
+import { t as e } from "./hot-date-DIgUxVss.js";
 import { useEffect as t, useRef as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/react/format.ts
@@ -58,7 +58,7 @@ function u(e) {
 	return l(e);
 }
 function d(e, t) {
-	if (!e) return null;
+	if (!e) return "";
 	if (e.includes("/")) {
 		let [n, r] = e.split("/"), i = t ?? "YYYY-MM-DD";
 		return [s(n, i), s(r, i)];
@@ -71,67 +71,70 @@ typeof customElements < "u" && (customElements.get("hot-date") || customElements
 function f(e) {
 	if (e !== void 0) return typeof e == "string" ? e : `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-function p({ value: e, defaultValue: a, onChange: s, onCommit: c, onClear: l, onFocus: p, onBlur: m, onKeyDown: h, onKeyUp: g, onInput: _, onPaste: v, onClick: y, onMouseEnter: b, onMouseLeave: x, onMouseDown: S, onMouseUp: C, onMouseMove: w, format: T, dateType: E = "point", startDate: D, endDate: O, className: k, style: A, placeholder: j, timezone: M, locale: N, weekStart: P, disabled: F, required: I, name: L, showHint: R, error: z, success: B, classNames: V }) {
-	let H = n(null), [U, W] = r(!!e), [G, K] = r(!1), q = R ?? !0;
+function p({ value: e, defaultValue: a, onChange: s, onCommit: c, onClear: l, onError: p, onFocus: m, onBlur: h, onKeyDown: g, onKeyUp: _, onInput: v, onPaste: y, onClick: b, onMouseEnter: x, onMouseLeave: S, onMouseDown: C, onMouseUp: w, onMouseMove: T, format: E, dateType: D = "point", startDate: O, endDate: k, className: A, style: j, placeholder: M, timezone: N, locale: P, weekStart: F, disabled: I, required: L, name: R, showHint: z, error: B, success: V, classNames: H }) {
+	let U = n(null), [W, G] = r(!!e), [K, q] = r(!1), J = n(void 0), Y = z ?? !0;
 	t(() => {
-		let e = H.current;
+		let e = U.current;
 		if (!e) return;
 		let t = (t, n) => {
 			n ? e.setAttribute(t, "") : e.removeAttribute(t);
 		}, n = (t, n) => {
 			n == null ? e.removeAttribute(t) : e.setAttribute(t, n);
 		};
-		n("placeholder", j), n("timezone", M), n("locale", N), n("week-start", P), n("start-date", f(D)), n("end-date", f(O)), n("mode", E), n("format", T), t("disabled", !!F), t("required", !!I), t("hide-hint", !q), n("name", L);
+		n("placeholder", M), n("timezone", N), n("locale", P), n("week-start", F), n("start-date", f(O)), n("end-date", f(k)), n("mode", D), n("format", E), t("disabled", !!I), t("required", !!L), t("hide-hint", !Y), n("name", R);
 	}, [
-		j,
 		M,
 		N,
 		P,
-		D,
+		F,
 		O,
+		k,
+		D,
 		E,
-		T,
-		F,
 		I,
 		L,
-		q
+		R,
+		Y
 	]);
-	let J = n(a);
+	let X = n(a);
 	return t(() => {
-		let e = H.current, t = J.current;
+		let e = U.current, t = X.current;
 		if (!e || t == null) return;
-		let n = T ? o(t, T) ?? t : t;
-		e.value = n, W(!!n), n && (e.setAttribute("display-value", u(n)), e.forceDisplayMode(n));
+		let n = E ? o(t, E) ?? t : t;
+		e.value = n, G(!!n), n && (e.setAttribute("display-value", u(n)), e.forceDisplayMode?.(n));
 	}, []), t(() => {
-		let t = H.current;
+		let t = U.current;
 		if (!t || e === void 0) return;
-		let n = e ? T ? o(e, T) ?? e : e : null;
-		t.value = n, W(!!n), n ? (t.setAttribute("display-value", u(n)), G || t.forceDisplayMode(n)) : (t.removeAttribute("display-value"), G || t.forceDisplayMode(null));
+		let n = e ? E ? o(e, E) ?? e : e : null;
+		t.value = n, G(!!n), n ? (t.setAttribute("display-value", u(n)), K || t.forceDisplayMode?.(n)) : (t.removeAttribute("display-value"), K || t.forceDisplayMode?.(null));
 	}, [
 		e,
-		T,
-		G
+		E,
+		K
 	]), t(() => {
-		let e = H.current;
+		let e = U.current;
 		if (!e) return;
-		let t = (e) => {
+		let t = e.shadowRoot?.querySelector("input") ?? null, n = (e) => {
 			let t = e.detail;
-			W(!!t.value), s?.(d(t.value, T));
-		}, n = (e) => {
+			G(!!t.value), s?.(d(t.value, E));
+		}, r = (e) => {
 			let t = e.detail;
-			c?.(d(t.value, T));
-		}, r = () => {
-			W(!1), l?.();
-		}, i = (e) => {
-			K(!0), p?.(e);
+			c?.(d(t.value, E));
+		}, i = () => {
+			G(!1), l?.();
 		}, a = (e) => {
-			K(!1), m?.(e);
-		}, o = (e) => h?.(e), u = (e) => g?.(e), f = (e) => {
+			q(!0), m?.(e);
+		}, o = (e) => {
+			q(!1), h?.(e);
+		}, u = (e) => g?.(e), f = (e) => _?.(e), D = (e) => {
 			let t = e.detail;
-			_?.(t.rawInput);
-		}, E = (e) => v?.(e), D = (e) => y?.(e), O = (e) => b?.(e), k = (e) => x?.(e), A = (e) => S?.(e), j = (e) => C?.(e), M = (e) => w?.(e);
-		return e.addEventListener("value-change", t), e.addEventListener("value-commit", n), e.addEventListener("clear", r), e.addEventListener("focusin", i), e.addEventListener("focusout", a), e.addEventListener("keydown", o), e.addEventListener("keyup", u), e.addEventListener("raw-input-change", f), e.addEventListener("paste", E), e.addEventListener("click", D), e.addEventListener("mouseenter", O), e.addEventListener("mouseleave", k), e.addEventListener("mousedown", A), e.addEventListener("mouseup", j), e.addEventListener("mousemove", M), () => {
-			e.removeEventListener("value-change", t), e.removeEventListener("value-commit", n), e.removeEventListener("clear", r), e.removeEventListener("focusin", i), e.removeEventListener("focusout", a), e.removeEventListener("keydown", o), e.removeEventListener("keyup", u), e.removeEventListener("raw-input-change", f), e.removeEventListener("paste", E), e.removeEventListener("click", D), e.removeEventListener("mouseenter", O), e.removeEventListener("mouseleave", k), e.removeEventListener("mousedown", A), e.removeEventListener("mouseup", j), e.removeEventListener("mousemove", M);
+			v?.(t.rawInput);
+		}, O = (e) => {
+			let { status: t, parseResult: n } = e.detail, r = t === "invalid" && n.rawInput ? n.errors[0] ?? "Invalid date" : void 0;
+			r !== J.current && (J.current = r, p?.(r));
+		}, k = (e) => y?.(e), A = (e) => b?.(e), j = (e) => x?.(e), M = (e) => S?.(e), N = (e) => C?.(e), P = (e) => w?.(e), F = (e) => T?.(e);
+		return e.addEventListener("value-change", n), e.addEventListener("value-commit", r), e.addEventListener("clear", i), e.addEventListener("focusin", a), e.addEventListener("focusout", o), e.addEventListener("raw-input-change", D), e.addEventListener("parse-change", O), e.addEventListener("click", A), e.addEventListener("mouseenter", j), e.addEventListener("mouseleave", M), e.addEventListener("mousedown", N), e.addEventListener("mouseup", P), e.addEventListener("mousemove", F), t?.addEventListener("keydown", u), t?.addEventListener("keyup", f), t?.addEventListener("paste", k), () => {
+			e.removeEventListener("value-change", n), e.removeEventListener("value-commit", r), e.removeEventListener("clear", i), e.removeEventListener("focusin", a), e.removeEventListener("focusout", o), e.removeEventListener("raw-input-change", D), e.removeEventListener("parse-change", O), e.removeEventListener("click", A), e.removeEventListener("mouseenter", j), e.removeEventListener("mouseleave", M), e.removeEventListener("mousedown", N), e.removeEventListener("mouseup", P), e.removeEventListener("mousemove", F), t?.removeEventListener("keydown", u), t?.removeEventListener("keyup", f), t?.removeEventListener("paste", k);
 		};
 	}, [
 		s,
@@ -149,32 +152,33 @@ function p({ value: e, defaultValue: a, onChange: s, onCommit: c, onClear: l, on
 		S,
 		C,
 		w,
-		T
+		T,
+		E
 	]), t(() => {
-		let e = H.current;
+		let e = U.current;
 		if (!e) return;
 		let t = (e) => e ? typeof e == "function" ? e({
-			active: U,
-			disabled: !!F,
-			focused: G,
-			error: !!z,
-			success: !!B
+			active: W,
+			disabled: !!I,
+			focused: K,
+			error: !!B,
+			success: !!V
 		}) : e : null, n = (n, r) => {
 			let i = t(r);
 			i ? e.setAttribute(n, i) : e.removeAttribute(n);
 		};
-		n("part-class-input", V?.input), n("part-class-ghost", V?.ghost), n("part-class-hint", V?.hint);
+		n("part-class-input", H?.input), n("part-class-ghost", H?.ghost), n("part-class-hint", H?.hint);
 	}, [
-		V,
-		U,
-		G,
-		F,
-		z,
-		B
+		H,
+		W,
+		K,
+		I,
+		B,
+		V
 	]), /* @__PURE__ */ i("hot-date", {
-		ref: H,
-		class: k,
-		style: A
+		ref: U,
+		class: A,
+		style: j
 	});
 }
 //#endregion

package/dist/hot-date.d.ts

@@ -5,6 +5,7 @@ export declare class HotDateElement extends HTMLElement {
     private readonly parser;
     private readonly internals;
     private styleObserver;
+    private readonly fieldElement;
     private readonly inputElement;
     private readonly ghostElement;
     private readonly ghostTypedElement;

package/dist/hot-date.js

@@ -1,2 +1,2 @@
-import { t as e } from "./hot-date-B8i-uiIl.js";
+import { t as e } from "./hot-date-DIgUxVss.js";
 export { e as HotDateElement };

package/dist/react/HotDate.d.ts

@@ -15,9 +15,10 @@ type WEEK_START_MAP = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday'
 export interface HotDateProps {
     value?: string | null;
     defaultValue?: string | null;
-    onChange?: (value: string | [string, string] | null) => void;
-    onCommit?: (value: string | [string, string] | null) => void;
+    onChange?: (value: string | [string, string]) => void;
+    onCommit?: (value: string | [string, string]) => void;
     onClear?: () => void;
+    onError?: (error: string | undefined) => void;
     onFocus?: (e: FocusEvent) => void;
     onBlur?: (e: FocusEvent) => void;
     onKeyDown?: (e: KeyboardEvent) => void;
@@ -76,5 +77,5 @@ declare module "react" {
         }
     }
 }
-export declare function HotDate({ value, defaultValue, onChange, onCommit, onClear, onFocus, onBlur, onKeyDown, onKeyUp, onInput, onPaste, onClick, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onMouseMove, format, dateType, startDate, endDate, className, style, placeholder, timezone, locale, weekStart, disabled, required, name, showHint, error, success, classNames, }: HotDateProps): import("react/jsx-runtime").JSX.Element;
+export declare function HotDate({ value, defaultValue, onChange, onCommit, onClear, onError, onFocus, onBlur, onKeyDown, onKeyUp, onInput, onPaste, onClick, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onMouseMove, format, dateType, startDate, endDate, className, style, placeholder, timezone, locale, weekStart, disabled, required, name, showHint, error, success, classNames, }: HotDateProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/react/format.d.ts

@@ -1,3 +1,3 @@
 export declare function parseFormatToIso(formatted: string, format: string): string | null;
 export declare function formatDisplayValue(canonical: string | null): string;
-export declare function applyFormat(canonical: string | null, format?: string): string | [string, string] | null;
+export declare function applyFormat(canonical: string | null, format?: string): string | [string, string];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octax-app/hot-date-react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "React wrapper for the hot-date natural language date input web component.",
   "type": "module",
   "main": "./dist/hot-date-react.js",