@octax-app/hot-date-react 0.0.8 → 0.1.0

package/README.md

@@ -51,6 +51,20 @@ function MyForm() {
 />
 ```
 
+### Combined (point + range)
+
+```tsx
+<HotDate
+  dateType="combined"
+  onChange={(value) => console.log(value)}
+  // "tomorrow"           → "2026-05-18"
+  // "this week"          → ["2026-05-12", "2026-05-18"]
+  // "jan to feb"         → ["2026-01-01", "2026-02-28"]
+/>
+```
+
+`combined` accepts both single dates and ranges. `onChange` returns a `string` for point dates and `[string, string]` for ranges — the same shapes as the dedicated modes.
+
 ### Custom output format
 
 ```tsx
@@ -187,6 +201,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 +229,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. |
@@ -212,7 +246,7 @@ When `value` is provided the input renders in display mode — showing the forma
 | `onMouseUp` | `(e: MouseEvent) => void` | — | Fires on mouseup. |
 | `onMouseMove` | `(e: MouseEvent) => void` | — | Fires on mousemove. |
 | `format` | `string` | `"YYYY-MM-DD"` | Output format. Tokens: `YYYY MM DD YY M D` (case-insensitive). |
-| `dateType` | `"point" \| "range"` | `"point"` | Restrict input to single date or range. |
+| `dateType` | `"point" \| "range" \| "combined"` | `"point"` | `"point"` = single date only, `"range"` = range only, `"combined"` = both simultaneously (returns `string` or `[string, string]`). |
 | `startDate` | `Date \| string` | — | Minimum date. Accepts a JS `Date` or `"YYYY-MM-DD"` string. |
 | `endDate` | `Date \| string` | — | Maximum date. Accepts a JS `Date` or `"YYYY-MM-DD"` string. |
 | `className` | `string` | — | CSS class on the host element. |

package/dist/hot-date-react.js

@@ -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 === "combined" ? "any" : 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.shadowRoot?.querySelector("input") ?? null, n = (e) => {
 			let t = e.detail;
-			W(!!t.value), s?.(d(t.value, T));
+			G(!!t.value), s?.(d(t.value, E));
 		}, r = (e) => {
 			let t = e.detail;
-			c?.(d(t.value, T));
+			c?.(d(t.value, E));
 		}, i = () => {
-			W(!1), l?.();
+			G(!1), l?.();
 		}, a = (e) => {
-			K(!0), p?.(e);
+			q(!0), m?.(e);
 		}, o = (e) => {
-			K(!1), m?.(e);
-		}, u = (e) => h?.(e), f = (e) => g?.(e), E = (e) => {
+			q(!1), h?.(e);
+		}, u = (e) => g?.(e), f = (e) => _?.(e), D = (e) => {
 			let t = e.detail;
-			_?.(t.rawInput);
-		}, D = (e) => v?.(e), O = (e) => y?.(e), k = (e) => b?.(e), A = (e) => x?.(e), j = (e) => S?.(e), M = (e) => C?.(e), N = (e) => w?.(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", E), e.addEventListener("click", O), e.addEventListener("mouseenter", k), e.addEventListener("mouseleave", A), e.addEventListener("mousedown", j), e.addEventListener("mouseup", M), e.addEventListener("mousemove", N), t?.addEventListener("keydown", u), t?.addEventListener("keyup", f), t?.addEventListener("paste", D), () => {
-			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", E), e.removeEventListener("click", O), e.removeEventListener("mouseenter", k), e.removeEventListener("mouseleave", A), e.removeEventListener("mousedown", j), e.removeEventListener("mouseup", M), e.removeEventListener("mousemove", N), t?.removeEventListener("keydown", u), t?.removeEventListener("keyup", f), t?.removeEventListener("paste", D);
+			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/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;
@@ -31,7 +32,7 @@ export interface HotDateProps {
     onMouseUp?: (e: MouseEvent) => void;
     onMouseMove?: (e: MouseEvent) => void;
     format?: string;
-    dateType?: "point" | "range";
+    dateType?: "point" | "range" | "combined";
     startDate?: Date | string;
     endDate?: Date | string;
     className?: string;
@@ -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.8",
+  "version": "0.1.0",
   "description": "React wrapper for the hot-date natural language date input web component.",
   "type": "module",
   "main": "./dist/hot-date-react.js",