@octax-app/hot-date-react 0.1.2 → 0.1.3

package/README.md

@@ -75,7 +75,7 @@ function MyForm() {
 />
 ```
 
-Tokens are case-insensitive: `YYYY`/`yyyy`, `MM`/`mm`, `DD`/`dd`, `YY`/`yy`, `M`/`m`, `D`/`d`.
+Tokens are case-insensitive: `YYYY`/`yyyy`, `MM`/`mm`, `DD`/`dd`, `YY`/`yy`, `M`/`m`, `D`/`d`, `MMM` (short month name e.g. `Jan`), `MMMM` (full month name e.g. `January`). Month name tokens respect the `locale` prop.
 
 For ranges, `onChange` returns `[formattedStart, formattedEnd]`.
 
@@ -299,7 +299,7 @@ console.log(ref.current?.value); // string | null
 | `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). |
+| `format` | `string` | `"YYYY-MM-DD"` | Output format. Tokens: `YYYY YY MM DD M D MMM MMMM` (case-insensitive). `MMM`/`MMMM` render locale-aware short/full month names. |
 | `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. |
@@ -322,11 +322,11 @@ console.log(ref.current?.value); // string | null
 
 ## Output Format
 
-| `dateType` | `format` not set | `format="MM/DD/YYYY"` |
-| --- | --- | --- |
-| `"point"` | `"2026-06-13"` | `"06/13/2026"` |
-| `"range"` | `["2026-06-01", "2026-06-30"]` | `["06/01/2026", "06/30/2026"]` |
-| `"combined"` | `"2026-06-13"` or `["2026-06-01", "2026-06-30"]` | `"06/13/2026"` or `["06/01/2026", "06/30/2026"]` |
+| `dateType` | `format` not set | `format="MM/DD/YYYY"` | `format="MMM DD, YYYY"` |
+| --- | --- | --- | --- |
+| `"point"` | `"2026-06-13"` | `"06/13/2026"` | `"Jun 13, 2026"` |
+| `"range"` | `["2026-06-01", "2026-06-30"]` | `["06/01/2026", "06/30/2026"]` | `["Jun 01, 2026", "Jun 30, 2026"]` |
+| `"combined"` | `"2026-06-13"` or `["2026-06-01", "2026-06-30"]` | `"06/13/2026"` or `["06/01/2026", "06/30/2026"]` | `"Jun 13, 2026"` or `["Jun 01, 2026", "Jun 30, 2026"]` |
 
 Empty / no selection always returns `""` regardless of `dateType` or `format`.
 

package/dist/{hot-date-DdTwPCC7.js → hot-date-CbxBFP6K.js}

@@ -9167,27 +9167,29 @@ var Gc = class extends HTMLElement {
 			this.internals.setValidity({});
 		}
 	}
-	formatSingleIso(e, t) {
-		let [n, r, i] = e.split("-");
-		return t.replace(/YYYY|YY|MM|DD|M|D/gi, (e) => {
+	formatSingleIso(e, t, n) {
+		let [r, i, a] = e.split("-"), o = parseInt(i, 10), s = parseInt(a, 10);
+		return t.replace(/YYYY|YY|MMMM|MMM|MM|DD|M|D/gi, (e) => {
 			switch (e.toUpperCase()) {
-				case "YYYY": return n;
-				case "YY": return n.slice(-2);
-				case "MM": return r;
-				case "M": return String(parseInt(r, 10));
-				case "DD": return i;
-				case "D": return String(parseInt(i, 10));
+				case "YYYY": return r;
+				case "YY": return r.slice(-2);
+				case "MMMM": return new Date(parseInt(r, 10), o - 1, s).toLocaleString(n ?? "en", { month: "long" });
+				case "MMM": return new Date(parseInt(r, 10), o - 1, s).toLocaleString(n ?? "en", { month: "short" });
+				case "MM": return i;
+				case "M": return String(o);
+				case "DD": return a;
+				case "D": return String(s);
 				default: return e;
 			}
 		});
 	}
 	formatValue(e) {
-		let t = this.getAttribute("format");
+		let t = this.getAttribute("format"), n = this.getAttribute("locale") ?? navigator.language ?? "en";
 		if (e.includes("/")) {
-			let [n, r] = e.split("/");
-			return t ? `${this.formatSingleIso(n, t)} — ${this.formatSingleIso(r, t)}` : `${n} — ${r}`;
+			let [r, i] = e.split("/");
+			return t ? `${this.formatSingleIso(r, t, n)} — ${this.formatSingleIso(i, t, n)}` : `${r} — ${i}`;
 		}
-		return t ? this.formatSingleIso(e, t) : this.parseState.previewLabel ?? e;
+		return t ? this.formatSingleIso(e, t, n) : this.parseState.previewLabel ?? e;
 	}
 	emit(e, t) {
 		this.dispatchEvent(new CustomEvent(e, {

package/dist/hot-date-react.js

@@ -1,4 +1,4 @@
-import { t as e } from "./hot-date-DdTwPCC7.js";
+import { t as e } from "./hot-date-CbxBFP6K.js";
 import { forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i, useState as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/react/format.ts

package/dist/hot-date.js

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

package/package.json

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