@octax-app/hot-date-react 0.1.0 → 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 +67 -7
  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 +15 -3
  7. package/dist/react/index.d.ts +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -124,6 +124,20 @@ The component renders as a plain browser input by default — no decorative styl
124
124
  }
125
125
  ```
126
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
+
127
141
  ### Per-part class names (Tailwind-friendly)
128
142
 
129
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.
@@ -167,28 +181,68 @@ The keys map to shadow DOM parts:
167
181
 
168
182
  ### Controlled value
169
183
 
184
+ `value` accepts the same shapes that `onChange` returns — so you can pass the value straight back without converting.
185
+
186
+ ```tsx
187
+ // Point date
188
+ const [date, setDate] = useState<string>("");
189
+
190
+ <HotDate
191
+ dateType="point"
192
+ value={date || null}
193
+ onChange={(v) => setDate(v as string)}
194
+ />
195
+ ```
196
+
170
197
  ```tsx
171
- const [date, setDate] = useState<string | null>(null);
198
+ // Range — pass the [start, end] array directly back as value
199
+ const [range, setRange] = useState<string | [string, string]>("");
172
200
 
173
201
  <HotDate
174
- value={date}
175
- onChange={(v) => setDate(typeof v === 'string' ? v : null)}
202
+ dateType="range"
203
+ value={range || null}
204
+ onChange={setRange}
176
205
  />
206
+ // After blur shows: "2026-01-01 — 2026-01-31"
177
207
  ```
178
208
 
179
- 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.
180
212
 
181
213
  ### Uncontrolled with a default value
182
214
 
183
215
  ```tsx
216
+ // Point
217
+ <HotDate defaultValue="2026-06-13" onChange={(v) => console.log(v)} />
218
+
219
+ // Range
184
220
  <HotDate
185
- defaultValue="2026-06-13"
221
+ dateType="range"
222
+ defaultValue={["2026-01-01", "2026-01-31"]}
186
223
  onChange={(v) => console.log(v)}
187
224
  />
188
225
  ```
189
226
 
190
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.
191
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
+
192
246
  ### Event callbacks
193
247
 
194
248
  ```tsx
@@ -227,8 +281,8 @@ When `value` is provided the input renders in display mode — showing the forma
227
281
 
228
282
  | Prop | Type | Default | Description |
229
283
  | --- | --- | --- | --- |
230
- | `value` | `string \| null` | — | Controlled canonical value (`YYYY-MM-DD` or `YYYY-MM-DD/YYYY-MM-DD`). Enters display mode while unfocused. |
231
- | `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. |
232
286
  | `onChange` | `(value: string \| [string, string]) => void` | — | Fires on every valid parse. Returns `""` when no value. Range returns `[start, end]`. |
233
287
  | `onCommit` | `(value: string \| [string, string]) => void` | — | Fires on Enter key commit. Returns `""` when no value. |
234
288
  | `onClear` | `() => void` | — | Fires when input is cleared. |
@@ -257,6 +311,9 @@ When `value` is provided the input renders in display mode — showing the forma
257
311
  | `weekStart` | `"sunday" \| "monday" \| "tuesday" \| "wednesday" \| "thursday" \| "friday" \| "saturday"` | `"monday"` | First day of week for relative expressions. |
258
312
  | `disabled` | `boolean` | `false` | Disable the input. |
259
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`. |
260
317
  | `name` | `string` | — | Form field name. |
261
318
  | `showHint` | `boolean` | `true` | Show the Tab autocomplete hint. |
262
319
  | `error` | `boolean` | `false` | Passes `error: true` into `classNames` functions. |
@@ -269,6 +326,9 @@ When `value` is provided the input renders in display mode — showing the forma
269
326
  | --- | --- | --- |
270
327
  | `"point"` | `"2026-06-13"` | `"06/13/2026"` |
271
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`.
272
332
 
273
333
  ## Keyboard
274
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 === "combined" ? "any" : 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;
@@ -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.1.0",
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",