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

package/README.md

@@ -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-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() {
@@ -8911,6 +8915,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", {});
 	}
@@ -8973,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-CE4exKZT.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
@@ -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.shadowRoot?.querySelector("input") ?? null, n = (e) => {
+			let t = e.detail;
+			W(!!t.value), s?.(d(t.value, T));
+		}, r = (e) => {
 			let t = e.detail;
-			j(!!t.value), a?.(d(t.value, l));
-		}, n = (e) => {
+			c?.(d(t.value, T));
+		}, i = () => {
+			W(!1), l?.();
+		}, a = (e) => {
+			K(!0), p?.(e);
+		}, o = (e) => {
+			K(!1), m?.(e);
+		}, u = (e) => h?.(e), f = (e) => g?.(e), E = (e) => {
 			let t = e.detail;
-			s?.(d(t.value, l));
-		}, 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);
+			_?.(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);
 		};
 	}, [
-		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

@@ -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;
@@ -33,6 +34,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-DIgUxVss.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.6",
+  "version": "0.0.8",
   "description": "React wrapper for the hot-date natural language date input web component.",
   "type": "module",
   "main": "./dist/hot-date-react.js",