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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +82 -8
  2. package/dist/{hot-date-DIgUxVss.js → hot-date--ec2r6hq.js} +9 -1
  3. package/dist/hot-date-react.js +88 -76
  4. package/dist/hot-date.d.ts +1 -0
  5. package/dist/hot-date.js +1 -1
  6. package/dist/react/HotDate.d.ts +16 -4
  7. package/dist/react/index.d.ts +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -51,6 +51,20 @@ function MyForm() {
51
51
  />
52
52
  ```
53
53
 
54
+ ### Combined (point + range)
55
+
56
+ ```tsx
57
+ <HotDate
58
+ dateType="combined"
59
+ onChange={(value) => console.log(value)}
60
+ // "tomorrow" → "2026-05-18"
61
+ // "this week" → ["2026-05-12", "2026-05-18"]
62
+ // "jan to feb" → ["2026-01-01", "2026-02-28"]
63
+ />
64
+ ```
65
+
66
+ `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.
67
+
54
68
  ### Custom output format
55
69
 
56
70
  ```tsx
@@ -110,6 +124,20 @@ The component renders as a plain browser input by default — no decorative styl
110
124
  }
111
125
  ```
112
126
 
127
+ ### Tailwind dark mode
128
+
129
+ `dark:` variants work out of the box. The component mirrors all classes from `<html>` into the shadow root on every render and whenever they change, so Tailwind's `.dark .dark\:*` selectors resolve correctly inside the shadow DOM.
130
+
131
+ ```tsx
132
+ <HotDate
133
+ classNames={{
134
+ input: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600",
135
+ }}
136
+ />
137
+ ```
138
+
139
+ Toggling `document.documentElement.classList.toggle('dark')` at runtime is picked up immediately.
140
+
113
141
  ### Per-part class names (Tailwind-friendly)
114
142
 
115
143
  Use `classNames` to apply classes directly to shadow DOM elements. External stylesheets — including Tailwind — are automatically mirrored into the shadow root, so utility classes work out of the box.
@@ -153,28 +181,68 @@ The keys map to shadow DOM parts:
153
181
 
154
182
  ### Controlled value
155
183
 
184
+ `value` accepts the same shapes that `onChange` returns — so you can pass the value straight back without converting.
185
+
156
186
  ```tsx
157
- const [date, setDate] = useState<string | null>(null);
187
+ // Point date
188
+ const [date, setDate] = useState<string>("");
158
189
 
159
190
  <HotDate
160
- value={date}
161
- onChange={(v) => setDate(typeof v === 'string' ? v : null)}
191
+ dateType="point"
192
+ value={date || null}
193
+ onChange={(v) => setDate(v as string)}
194
+ />
195
+ ```
196
+
197
+ ```tsx
198
+ // Range — pass the [start, end] array directly back as value
199
+ const [range, setRange] = useState<string | [string, string]>("");
200
+
201
+ <HotDate
202
+ dateType="range"
203
+ value={range || null}
204
+ onChange={setRange}
162
205
  />
206
+ // After blur shows: "2026-01-01 — 2026-01-31"
163
207
  ```
164
208
 
165
- 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.
209
+ When `value` is provided the input renders in display mode — showing the formatted date or range — while unfocused. Clicking into it restores the natural-language input for editing. On blur it returns to display mode automatically.
210
+
211
+ > `onChange` never returns `null`. It returns `""` when no date is selected, a `string` for point dates, and `[string, string]` for ranges.
166
212
 
167
213
  ### Uncontrolled with a default value
168
214
 
169
215
  ```tsx
216
+ // Point
217
+ <HotDate defaultValue="2026-06-13" onChange={(v) => console.log(v)} />
218
+
219
+ // Range
170
220
  <HotDate
171
- defaultValue="2026-06-13"
221
+ dateType="range"
222
+ defaultValue={["2026-01-01", "2026-01-31"]}
172
223
  onChange={(v) => console.log(v)}
173
224
  />
174
225
  ```
175
226
 
176
227
  `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.
177
228
 
229
+ ### Imperative ref
230
+
231
+ ```tsx
232
+ import { useRef } from 'react';
233
+ import { HotDate, type HotDateHandle } from '@octax-app/hot-date-react';
234
+
235
+ const ref = useRef<HotDateHandle>(null);
236
+
237
+ <HotDate ref={ref} />
238
+
239
+ // Imperatively control the input:
240
+ ref.current?.focus();
241
+ ref.current?.blur();
242
+ ref.current?.clear();
243
+ console.log(ref.current?.value); // string | null
244
+ ```
245
+
178
246
  ### Event callbacks
179
247
 
180
248
  ```tsx
@@ -213,8 +281,8 @@ When `value` is provided the input renders in display mode — showing the forma
213
281
 
214
282
  | Prop | Type | Default | Description |
215
283
  | --- | --- | --- | --- |
216
- | `value` | `string \| null` | — | Controlled canonical value (`YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`). Enters display mode while unfocused. |
217
- | `defaultValue` | `string \| null` | — | Uncontrolled initial value. Mounts in display mode; React does not drive updates after mount. |
284
+ | `value` | `string \| [string, string] \| null` | — | Controlled value. Pass a string for point dates, `[start, end]` for ranges — same shape `onChange` returns. Renders in display mode while unfocused. |
285
+ | `defaultValue` | `string \| [string, string] \| null` | — | Uncontrolled initial value. Same shape as `value`. Mounts in display mode; React does not drive updates after mount. |
218
286
  | `onChange` | `(value: string \| [string, string]) => void` | — | Fires on every valid parse. Returns `""` when no value. Range returns `[start, end]`. |
219
287
  | `onCommit` | `(value: string \| [string, string]) => void` | — | Fires on Enter key commit. Returns `""` when no value. |
220
288
  | `onClear` | `() => void` | — | Fires when input is cleared. |
@@ -232,7 +300,7 @@ When `value` is provided the input renders in display mode — showing the forma
232
300
  | `onMouseUp` | `(e: MouseEvent) => void` | — | Fires on mouseup. |
233
301
  | `onMouseMove` | `(e: MouseEvent) => void` | — | Fires on mousemove. |
234
302
  | `format` | `string` | `"YYYY-MM-DD"` | Output format. Tokens: `YYYY MM DD YY M D` (case-insensitive). |
235
- | `dateType` | `"point" \| "range"` | `"point"` | Restrict input to single date or range. |
303
+ | `dateType` | `"point" \| "range" \| "combined"` | `"point"` | `"point"` = single date only, `"range"` = range only, `"combined"` = both simultaneously (returns `string` or `[string, string]`). |
236
304
  | `startDate` | `Date \| string` | — | Minimum date. Accepts a JS `Date` or `"YYYY-MM-DD"` string. |
237
305
  | `endDate` | `Date \| string` | — | Maximum date. Accepts a JS `Date` or `"YYYY-MM-DD"` string. |
238
306
  | `className` | `string` | — | CSS class on the host element. |
@@ -243,6 +311,9 @@ When `value` is provided the input renders in display mode — showing the forma
243
311
  | `weekStart` | `"sunday" \| "monday" \| "tuesday" \| "wednesday" \| "thursday" \| "friday" \| "saturday"` | `"monday"` | First day of week for relative expressions. |
244
312
  | `disabled` | `boolean` | `false` | Disable the input. |
245
313
  | `required` | `boolean` | `false` | Participates in form validation. |
314
+ | `autoFocus` | `boolean` | `false` | Focus the input on mount. |
315
+ | `tabIndex` | `number` | — | Sets the tab index on the inner `<input>`. Use `-1` to remove from tab order. |
316
+ | `ref` | `React.Ref<HotDateHandle>` | — | Imperative handle with `focus()`, `blur()`, `clear()`, and `value`. |
246
317
  | `name` | `string` | — | Form field name. |
247
318
  | `showHint` | `boolean` | `true` | Show the Tab autocomplete hint. |
248
319
  | `error` | `boolean` | `false` | Passes `error: true` into `classNames` functions. |
@@ -255,6 +326,9 @@ When `value` is provided the input renders in display mode — showing the forma
255
326
  | --- | --- | --- |
256
327
  | `"point"` | `"2026-06-13"` | `"06/13/2026"` |
257
328
  | `"range"` | `["2026-06-01", "2026-06-30"]` | `["06/01/2026", "06/30/2026"]` |
329
+ | `"combined"` | `"2026-06-13"` or `["2026-06-01", "2026-06-30"]` | `"06/13/2026"` or `["06/01/2026", "06/30/2026"]` |
330
+
331
+ Empty / no selection always returns `""` regardless of `dateType` or `format`.
258
332
 
259
333
  ## Keyboard
260
334
 
package/dist/{hot-date-DIgUxVss.js → hot-date--ec2r6hq.js} RENAMED
@@ -8799,7 +8799,8 @@ var Gc = class extends HTMLElement {
8799
8799
  "format",
8800
8800
  "part-class-input",
8801
8801
  "part-class-ghost",
8802
- "part-class-hint"
8802
+ "part-class-hint",
8803
+ "tabindex"
8803
8804
  ];
8804
8805
  }
8805
8806
  parser = new Pc();
@@ -8875,6 +8876,10 @@ var Gc = class extends HTMLElement {
8875
8876
  this.applyPartClass(this.ghostHintElement, t, n), this.syncExternalStyles();
8876
8877
  return;
8877
8878
  }
8879
+ if (e === "tabindex") {
8880
+ this.inputElement.tabIndex = n === null ? 0 : parseInt(n, 10);
8881
+ return;
8882
+ }
8878
8883
  this.parseAndRender();
8879
8884
  }
8880
8885
  }
@@ -8915,6 +8920,9 @@ var Gc = class extends HTMLElement {
8915
8920
  focus() {
8916
8921
  this.inputElement.focus();
8917
8922
  }
8923
+ blur() {
8924
+ this.inputElement.blur();
8925
+ }
8918
8926
  forceDisplayMode(e) {
8919
8927
  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());
8920
8928
  }
package/dist/hot-date-react.js CHANGED
@@ -1,9 +1,9 @@
1
- import { t as e } from "./hot-date-DIgUxVss.js";
2
- import { useEffect as t, useRef as n, useState as r } from "react";
3
- import { jsx as i } from "react/jsx-runtime";
1
+ import { t as e } from "./hot-date--ec2r6hq.js";
2
+ import { forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i, useState as a } from "react";
3
+ import { jsx as o } from "react/jsx-runtime";
4
4
  //#region src/react/format.ts
5
- var a = /YYYY|YY|MM|DD|yyyy|yy|mm|dd|M|D|m|d/g;
6
- function o(e, t) {
5
+ var s = /YYYY|YY|MM|DD|yyyy|yy|mm|dd|M|D|m|d/g;
6
+ function c(e, t) {
7
7
  if (!e || !t) return null;
8
8
  let n = t.toUpperCase(), r = [
9
9
  "YYYY",
@@ -26,9 +26,9 @@ function o(e, t) {
26
26
  }, l = c("YYYY") ?? (c("YY") ? `20${c("YY")}` : null), u = c("MM") ?? c("M"), d = c("DD") ?? c("D");
27
27
  return !l || !u || !d ? null : `${l}-${u.padStart(2, "0")}-${d.padStart(2, "0")}`;
28
28
  }
29
- function s(e, t) {
29
+ function l(e, t) {
30
30
  let [n, r, i] = e.split("-");
31
- return t.replace(a, (e) => {
31
+ return t.replace(s, (e) => {
32
32
  switch (e.toUpperCase()) {
33
33
  case "YYYY": return n;
34
34
  case "YY": return n.slice(-2);
@@ -40,108 +40,119 @@ function s(e, t) {
40
40
  }
41
41
  });
42
42
  }
43
- var c = new Intl.DateTimeFormat("en-US", {
43
+ var u = new Intl.DateTimeFormat("en-US", {
44
44
  month: "short",
45
45
  day: "numeric",
46
46
  year: "numeric"
47
47
  });
48
- function l(e) {
48
+ function d(e) {
49
49
  let [t, n, r] = e.split("-").map(Number);
50
- return c.format(new Date(Date.UTC(t, n - 1, r)));
50
+ return u.format(new Date(Date.UTC(t, n - 1, r)));
51
51
  }
52
- function u(e) {
52
+ function f(e) {
53
53
  if (!e) return "";
54
54
  if (e.includes("/")) {
55
55
  let [t, n] = e.split("/");
56
- return `${l(t)} — ${l(n)}`;
56
+ return `${d(t)} — ${d(n)}`;
57
57
  }
58
- return l(e);
58
+ return d(e);
59
59
  }
60
- function d(e, t) {
60
+ function p(e, t) {
61
61
  if (!e) return "";
62
62
  if (e.includes("/")) {
63
63
  let [n, r] = e.split("/"), i = t ?? "YYYY-MM-DD";
64
- return [s(n, i), s(r, i)];
64
+ return [l(n, i), l(r, i)];
65
65
  }
66
- return t ? s(e, t) : e;
66
+ return t ? l(e, t) : e;
67
67
  }
68
68
  //#endregion
69
69
  //#region src/react/HotDate.tsx
70
70
  typeof customElements < "u" && (customElements.get("hot-date") || customElements.define("hot-date", e));
71
- function f(e) {
71
+ function m(e) {
72
72
  if (e !== void 0) return typeof e == "string" ? e : `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
73
73
  }
74
- 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 }) {
75
- let U = n(null), [W, G] = r(!!e), [K, q] = r(!1), J = n(void 0), Y = z ?? !0;
76
- t(() => {
77
- let e = U.current;
74
+ var h = t(function({ value: e, defaultValue: t, onChange: s, onCommit: l, onClear: u, onError: d, onFocus: h, onBlur: g, onKeyDown: _, onKeyUp: v, onInput: y, onPaste: b, onClick: x, onMouseEnter: S, onMouseLeave: C, onMouseDown: w, onMouseUp: T, onMouseMove: E, format: D, dateType: O = "point", startDate: k, endDate: A, className: j, style: M, placeholder: N, timezone: P, locale: F, weekStart: I, disabled: L, required: R, autoFocus: z, tabIndex: B, name: V, showHint: H, error: U, success: W, classNames: G }, ee) {
75
+ let K = i(null), [q, J] = a(Array.isArray(e) ? !!e[0] : !!e), [Y, X] = a(!1), Z = i(void 0);
76
+ r(ee, () => ({
77
+ focus: () => K.current?.focus(),
78
+ blur: () => K.current?.blur(),
79
+ clear: () => K.current?.clear(),
80
+ get value() {
81
+ return K.current?.value ?? null;
82
+ }
83
+ }), []);
84
+ let Q = H ?? !0;
85
+ n(() => {
86
+ let e = K.current;
78
87
  if (!e) return;
79
88
  let t = (t, n) => {
80
89
  n ? e.setAttribute(t, "") : e.removeAttribute(t);
81
90
  }, n = (t, n) => {
82
91
  n == null ? e.removeAttribute(t) : e.setAttribute(t, n);
83
92
  };
84
- 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);
93
+ n("placeholder", N), n("timezone", P), n("locale", F), n("week-start", I), n("start-date", m(k)), n("end-date", m(A)), n("mode", O === "combined" ? "any" : O), n("format", D), t("disabled", !!L), t("required", !!R), t("hide-hint", !Q), n("name", V), B === void 0 ? e.removeAttribute("tabindex") : e.setAttribute("tabindex", String(B));
85
94
  }, [
86
- M,
87
95
  N,
88
96
  P,
89
97
  F,
90
- O,
98
+ I,
91
99
  k,
100
+ A,
101
+ O,
92
102
  D,
93
- E,
94
- I,
95
103
  L,
96
104
  R,
97
- Y
105
+ V,
106
+ Q,
107
+ B
98
108
  ]);
99
- let X = n(a);
100
- return t(() => {
101
- let e = U.current, t = X.current;
102
- if (!e || t == null) return;
103
- let n = E ? o(t, E) ?? t : t;
104
- e.value = n, G(!!n), n && (e.setAttribute("display-value", u(n)), e.forceDisplayMode?.(n));
105
- }, []), t(() => {
106
- let t = U.current;
109
+ let te = i(z);
110
+ n(() => {
111
+ te.current && K.current?.focus();
112
+ }, []);
113
+ let $ = (e) => !e || Array.isArray(e) && !e[0] ? null : Array.isArray(e) ? `${D ? c(e[0], D) ?? e[0] : e[0]}/${D ? c(e[1], D) ?? e[1] : e[1]}` : D ? c(e, D) ?? e : e, ne = i(t);
114
+ return n(() => {
115
+ let e = K.current, t = $(ne.current);
116
+ !e || !t || (e.value = t, J(!0), e.setAttribute("display-value", f(t)), e.forceDisplayMode?.(t));
117
+ }, []), n(() => {
118
+ let t = K.current;
107
119
  if (!t || e === void 0) return;
108
- let n = e ? E ? o(e, E) ?? e : e : null;
109
- t.value = n, G(!!n), n ? (t.setAttribute("display-value", u(n)), K || t.forceDisplayMode?.(n)) : (t.removeAttribute("display-value"), K || t.forceDisplayMode?.(null));
120
+ let n = $(e);
121
+ t.value = n, J(!!n), n ? (t.setAttribute("display-value", f(n)), Y || t.forceDisplayMode?.(n)) : (t.removeAttribute("display-value"), Y || t.forceDisplayMode?.(null));
110
122
  }, [
111
123
  e,
112
- E,
113
- K
114
- ]), t(() => {
115
- let e = U.current;
124
+ D,
125
+ Y
126
+ ]), n(() => {
127
+ let e = K.current;
116
128
  if (!e) return;
117
129
  let t = e.shadowRoot?.querySelector("input") ?? null, n = (e) => {
118
130
  let t = e.detail;
119
- G(!!t.value), s?.(d(t.value, E));
131
+ J(!!t.value), s?.(p(t.value, D));
120
132
  }, r = (e) => {
121
133
  let t = e.detail;
122
- c?.(d(t.value, E));
134
+ l?.(p(t.value, D));
123
135
  }, i = () => {
124
- G(!1), l?.();
136
+ J(!1), u?.();
125
137
  }, a = (e) => {
126
- q(!0), m?.(e);
138
+ X(!0), h?.(e);
127
139
  }, o = (e) => {
128
- q(!1), h?.(e);
129
- }, u = (e) => g?.(e), f = (e) => _?.(e), D = (e) => {
140
+ X(!1), g?.(e);
141
+ }, c = (e) => _?.(e), f = (e) => v?.(e), m = (e) => {
130
142
  let t = e.detail;
131
- v?.(t.rawInput);
143
+ y?.(t.rawInput);
132
144
  }, O = (e) => {
133
145
  let { status: t, parseResult: n } = e.detail, r = t === "invalid" && n.rawInput ? n.errors[0] ?? "Invalid date" : void 0;
134
- r !== J.current && (J.current = r, p?.(r));
135
- }, 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);
136
- 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), () => {
137
- 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);
146
+ r !== Z.current && (Z.current = r, d?.(r));
147
+ }, k = (e) => b?.(e), A = (e) => x?.(e), j = (e) => S?.(e), M = (e) => C?.(e), N = (e) => w?.(e), P = (e) => T?.(e), F = (e) => E?.(e);
148
+ 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", m), 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", c), t?.addEventListener("keyup", f), t?.addEventListener("paste", k), () => {
149
+ 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", m), 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", c), t?.removeEventListener("keyup", f), t?.removeEventListener("paste", k);
138
150
  };
139
151
  }, [
140
152
  s,
141
- c,
142
153
  l,
143
- p,
144
- m,
154
+ u,
155
+ d,
145
156
  h,
146
157
  g,
147
158
  _,
@@ -153,33 +164,34 @@ function p({ value: e, defaultValue: a, onChange: s, onCommit: c, onClear: l, on
153
164
  C,
154
165
  w,
155
166
  T,
156
- E
157
- ]), t(() => {
158
- let e = U.current;
167
+ E,
168
+ D
169
+ ]), n(() => {
170
+ let e = K.current;
159
171
  if (!e) return;
160
172
  let t = (e) => e ? typeof e == "function" ? e({
161
- active: W,
162
- disabled: !!I,
163
- focused: K,
164
- error: !!B,
165
- success: !!V
173
+ active: q,
174
+ disabled: !!L,
175
+ focused: Y,
176
+ error: !!U,
177
+ success: !!W
166
178
  }) : e : null, n = (n, r) => {
167
179
  let i = t(r);
168
180
  i ? e.setAttribute(n, i) : e.removeAttribute(n);
169
181
  };
170
- n("part-class-input", H?.input), n("part-class-ghost", H?.ghost), n("part-class-hint", H?.hint);
182
+ n("part-class-input", G?.input), n("part-class-ghost", G?.ghost), n("part-class-hint", G?.hint);
171
183
  }, [
172
- H,
173
- W,
174
- K,
175
- I,
176
- B,
177
- V
178
- ]), /* @__PURE__ */ i("hot-date", {
179
- ref: U,
180
- class: A,
181
- style: j
184
+ G,
185
+ q,
186
+ Y,
187
+ L,
188
+ U,
189
+ W
190
+ ]), /* @__PURE__ */ o("hot-date", {
191
+ ref: K,
192
+ class: j,
193
+ style: M
182
194
  });
183
- }
195
+ });
184
196
  //#endregion
185
- export { p as HotDate, d as applyFormat, u as formatDisplayValue };
197
+ export { h as HotDate, p as applyFormat, f as formatDisplayValue };
package/dist/hot-date.d.ts CHANGED
@@ -34,6 +34,7 @@ export declare class HotDateElement extends HTMLElement {
34
34
  get suggestions(): CompletionSuggestion[];
35
35
  get activeSuggestionIndex(): number;
36
36
  focus(): void;
37
+ blur(): void;
37
38
  forceDisplayMode(canonical: string | null): void;
38
39
  clear(): void;
39
40
  confirm(): boolean;
package/dist/hot-date.js CHANGED
@@ -1,2 +1,2 @@
1
- import { t as e } from "./hot-date-DIgUxVss.js";
1
+ import { t as e } from "./hot-date--ec2r6hq.js";
2
2
  export { e as HotDateElement };
package/dist/react/HotDate.d.ts CHANGED
@@ -13,8 +13,8 @@ export interface ClassNamesConfig {
13
13
  }
14
14
  type WEEK_START_MAP = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
15
15
  export interface HotDateProps {
16
- value?: string | null;
17
- defaultValue?: string | null;
16
+ value?: string | [string, string] | null;
17
+ defaultValue?: string | [string, string] | null;
18
18
  onChange?: (value: string | [string, string]) => void;
19
19
  onCommit?: (value: string | [string, string]) => void;
20
20
  onClear?: () => void;
@@ -32,7 +32,7 @@ export interface HotDateProps {
32
32
  onMouseUp?: (e: MouseEvent) => void;
33
33
  onMouseMove?: (e: MouseEvent) => void;
34
34
  format?: string;
35
- dateType?: "point" | "range";
35
+ dateType?: "point" | "range" | "combined";
36
36
  startDate?: Date | string;
37
37
  endDate?: Date | string;
38
38
  className?: string;
@@ -43,6 +43,8 @@ export interface HotDateProps {
43
43
  weekStart?: WEEK_START_MAP;
44
44
  disabled?: boolean;
45
45
  required?: boolean;
46
+ autoFocus?: boolean;
47
+ tabIndex?: number;
46
48
  name?: string;
47
49
  showHint?: boolean;
48
50
  error?: boolean;
@@ -77,5 +79,15 @@ declare module "react" {
77
79
  }
78
80
  }
79
81
  }
80
- 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;
82
+ export interface HotDateHandle {
83
+ /** Focus the input. */
84
+ focus(): void;
85
+ /** Blur the input. */
86
+ blur(): void;
87
+ /** Clear the current value and raw input. */
88
+ clear(): void;
89
+ /** The current committed ISO value, or null if empty. */
90
+ readonly value: string | null;
91
+ }
92
+ export declare const HotDate: import("react").ForwardRefExoticComponent<HotDateProps & import("react").RefAttributes<HotDateHandle>>;
81
93
  export {};
package/dist/react/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { HotDate } from "./HotDate";
2
- export type { HotDateProps, ClassNamesConfig, ClassNameValue } from "./HotDate";
2
+ export type { HotDateProps, HotDateHandle, ClassNamesConfig, ClassNameValue } from "./HotDate";
3
3
  export { applyFormat, formatDisplayValue } from "./format";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@octax-app/hot-date-react",
3
- "version": "0.0.9",
3
+ "version": "0.1.1",
4
4
  "description": "React wrapper for the hot-date natural language date input web component.",
5
5
  "type": "module",
6
6
  "main": "./dist/hot-date-react.js",