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

package/README.md

@@ -17,7 +17,7 @@ npm install @octax-app/hot-date-react
 ## Quick Start
 
 ```tsx
-import { HotDate } from '@octax-app/hot-date-react/react';
+import { HotDate } from '@octax-app/hot-date-react';
 
 function MyForm() {
   return (
@@ -162,16 +162,55 @@ const [date, setDate] = useState<string | null>(null);
 />
 ```
 
-When a `value` is set, it appears as a human-readable label on the right side of the input (the ghost resolution area). The text field stays empty for natural typing. On blur, the field shows the formatted value; on focus, it restores the raw input.
+When `value` is provided the input renders in display mode — showing the formatted date — while unfocused. Clicking into it restores the natural-language input for editing. On blur it returns to display mode automatically.
+
+### Uncontrolled with a default value
+
+```tsx
+<HotDate
+  defaultValue="2026-06-13"
+  onChange={(v) => console.log(v)}
+/>
+```
+
+`defaultValue` sets the initial value on mount and immediately enters display mode, but the component is uncontrolled after that — React does not drive subsequent updates.
+
+### Event callbacks
+
+```tsx
+<HotDate
+  onFocus={(e) => console.log('focused', e)}
+  onBlur={(e) => console.log('blurred', e)}
+  onKeyDown={(e) => console.log('key', e.key)}
+  onInput={(rawValue) => console.log('typing', rawValue)}
+  onPaste={(e) => console.log('pasted')}
+  onClick={(e) => console.log('clicked')}
+  onMouseEnter={(e) => console.log('mouse in')}
+  onMouseLeave={(e) => console.log('mouse out')}
+/>
+```
 
 ## Props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `value` | `string \| null` | — | Controlled canonical value (`YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`) |
+| `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. |
 | `onClear` | `() => void` | — | Fires when input is cleared. |
+| `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. |
+| `onKeyUp` | `(e: KeyboardEvent) => void` | — | Fires on keyup. |
+| `onInput` | `(rawValue: string) => void` | — | Fires on every keystroke with the raw typed string. |
+| `onPaste` | `(e: ClipboardEvent) => void` | — | Fires when content is pasted into the input. |
+| `onClick` | `(e: MouseEvent) => void` | — | Fires on click. |
+| `onMouseEnter` | `(e: MouseEvent) => void` | — | Fires when the mouse enters the component. |
+| `onMouseLeave` | `(e: MouseEvent) => void` | — | Fires when the mouse leaves the component. |
+| `onMouseDown` | `(e: MouseEvent) => void` | — | Fires on mousedown. |
+| `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. |
 | `startDate` | `Date \| string` | — | Minimum date. Accepts a JS `Date` or `"YYYY-MM-DD"` string. |

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

@@ -8911,6 +8911,9 @@ var Gc = class extends HTMLElement {
 	focus() {
 		this.inputElement.focus();
 	}
+	forceDisplayMode(e) {
+		e ? (this.isDisplayMode = !0, this.inputElement.value = this.formatValue(e), this.ghostElement.hidden = !0) : (this.isDisplayMode = !1, this.inputElement.value = this.rawInputValue, this.ghostElement.hidden = !1, this.renderGhost());
+	}
 	clear() {
 		this.isDisplayMode = !1, this.ghostElement.hidden = !1, this.rawInputValue = "", this.committedValue = null, this.removeAttribute("value"), this.internals?.setFormValue(""), this.activeSuggestionIndexValue = 0, this.syncInputPresentation(), this.parseAndRender(), this.emit("clear", {});
 	}

package/dist/hot-date-react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./hot-date-CE4exKZT.js";
+import { t as e } from "./hot-date-B8i-uiIl.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
@@ -71,80 +71,110 @@ 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, onChange: a, onCommit: s, onClear: c, format: l, dateType: p = "point", startDate: m, endDate: h, className: g, style: _, placeholder: v, timezone: y, locale: b, weekStart: x, disabled: S, required: C, name: w, showHint: T, error: E, success: D, classNames: O }) {
-	let k = n(null), [A, j] = r(!!e), [M, N] = r(!1), P = T ?? !0;
-	return t(() => {
-		let e = k.current;
+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;
+	t(() => {
+		let e = H.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", v), n("timezone", y), n("locale", b), n("week-start", x), n("start-date", f(m)), n("end-date", f(h)), n("mode", p), n("format", l), t("disabled", !!S), t("required", !!C), t("hide-hint", !P), n("name", w);
+		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);
 	}, [
-		v,
-		y,
-		b,
-		x,
-		m,
-		h,
-		p,
-		l,
-		S,
-		C,
-		w,
-		P
-	]), t(() => {
-		let t = k.current;
+		j,
+		M,
+		N,
+		P,
+		D,
+		O,
+		E,
+		T,
+		F,
+		I,
+		L,
+		q
+	]);
+	let J = n(a);
+	return t(() => {
+		let e = H.current, t = J.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));
+	}, []), t(() => {
+		let t = H.current;
 		if (!t || e === void 0) return;
-		let n = e ? l ? o(e, l) ?? e : e : null;
-		t.value = n, j(!!n), n ? t.setAttribute("display-value", u(n)) : t.removeAttribute("display-value");
-	}, [e, l]), t(() => {
-		let e = k.current;
+		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));
+	}, [
+		e,
+		T,
+		G
+	]), t(() => {
+		let e = H.current;
 		if (!e) return;
 		let t = (e) => {
 			let t = e.detail;
-			j(!!t.value), a?.(d(t.value, l));
+			W(!!t.value), s?.(d(t.value, T));
 		}, n = (e) => {
 			let t = e.detail;
-			s?.(d(t.value, l));
+			c?.(d(t.value, T));
 		}, r = () => {
-			j(!1), c?.();
-		}, i = () => N(!0), o = () => N(!1);
-		return e.addEventListener("value-change", t), e.addEventListener("value-commit", n), e.addEventListener("clear", r), e.addEventListener("focusin", i), e.addEventListener("focusout", o), () => {
-			e.removeEventListener("value-change", t), e.removeEventListener("value-commit", n), e.removeEventListener("clear", r), e.removeEventListener("focusin", i), e.removeEventListener("focusout", o);
+			W(!1), l?.();
+		}, i = (e) => {
+			K(!0), p?.(e);
+		}, a = (e) => {
+			K(!1), m?.(e);
+		}, o = (e) => h?.(e), u = (e) => g?.(e), f = (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);
 		};
 	}, [
-		a,
 		s,
 		c,
-		l
+		l,
+		p,
+		m,
+		h,
+		g,
+		_,
+		v,
+		y,
+		b,
+		x,
+		S,
+		C,
+		w,
+		T
 	]), t(() => {
-		let e = k.current;
+		let e = H.current;
 		if (!e) return;
 		let t = (e) => e ? typeof e == "function" ? e({
-			active: A,
-			disabled: !!S,
-			focused: M,
-			error: !!E,
-			success: !!D
+			active: U,
+			disabled: !!F,
+			focused: G,
+			error: !!z,
+			success: !!B
 		}) : e : null, n = (n, r) => {
 			let i = t(r);
 			i ? e.setAttribute(n, i) : e.removeAttribute(n);
 		};
-		n("part-class-input", O?.input), n("part-class-ghost", O?.ghost), n("part-class-hint", O?.hint);
+		n("part-class-input", V?.input), n("part-class-ghost", V?.ghost), n("part-class-hint", V?.hint);
 	}, [
-		O,
-		A,
-		M,
-		S,
-		E,
-		D
+		V,
+		U,
+		G,
+		F,
+		z,
+		B
 	]), /* @__PURE__ */ i("hot-date", {
-		ref: k,
-		class: g,
-		style: _
+		ref: H,
+		class: k,
+		style: A
 	});
 }
 //#endregion

package/dist/hot-date.d.ts

@@ -33,6 +33,7 @@ export declare class HotDateElement extends HTMLElement {
     get suggestions(): CompletionSuggestion[];
     get activeSuggestionIndex(): number;
     focus(): void;
+    forceDisplayMode(canonical: string | null): void;
     clear(): void;
     confirm(): boolean;
     acceptSuggestion(index?: number): boolean;

package/dist/hot-date.js

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

package/dist/react/HotDate.d.ts

@@ -14,9 +14,22 @@ export interface ClassNamesConfig {
 type WEEK_START_MAP = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
 export interface HotDateProps {
     value?: string | null;
+    defaultValue?: string | null;
     onChange?: (value: string | [string, string] | null) => void;
     onCommit?: (value: string | [string, string] | null) => void;
     onClear?: () => void;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    onInput?: (rawValue: string) => void;
+    onPaste?: (e: ClipboardEvent) => void;
+    onClick?: (e: MouseEvent) => void;
+    onMouseEnter?: (e: MouseEvent) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onMouseMove?: (e: MouseEvent) => void;
     format?: string;
     dateType?: "point" | "range";
     startDate?: Date | string;
@@ -63,5 +76,5 @@ declare module "react" {
         }
     }
 }
-export declare function HotDate({ value, onChange, onCommit, onClear, 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, 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/package.json

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