@mpen/react-basic-inputs 0.3.0 → 0.3.1

package/dist/react-basic-inputs.d.ts

@@ -30,8 +30,24 @@ export declare type DatetimeLocalInputProps = OverrideProps<'input', {
     onChange?: (ev: DatetimeLocalInputChangeEvent) => void;
 }, 'type'>;
 
+export declare function DatetimeOffsetInput({ value, defaultValue, min, max, onChange, ...props }: DatetimeOffsetInputProps): JSX_2.Element;
+
+export declare type DatetimeOffsetInputChangeEvent = {
+    value: string;
+};
+
+export declare type DatetimeOffsetInputProps = {
+    min?: DateValue_2;
+    max?: DateValue_2;
+    value?: DateValue_2 | null;
+    defaultValue?: DateValue_2;
+    onChange?: (ev: DatetimeOffsetInputChangeEvent) => void;
+};
+
 export declare type DateValue = number | string | Date;
 
+declare type DateValue_2 = number | string | Date;
+
 export declare const DebouncedInput: FC<DebouncedInputProps>;
 
 export declare type DebouncedInputChangeEvent = {

package/dist/react-basic-inputs.js

@@ -1,155 +1,155 @@
-var k = Object.defineProperty;
-var H = (e, t, r) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var K = (e, t, r) => (H(e, typeof t != "symbol" ? t + "" : t, r), r);
-import { jsx as N, jsxs as L } from "react/jsx-runtime";
-import { useDebugValue as Y, useRef as x, useInsertionEffect as j, useEffect as q, useMemo as E, useCallback as D, createElement as z, forwardRef as M, useState as F, useImperativeHandle as P, useLayoutEffect as U, useId as G } from "react";
-const W = Object.freeze(() => {
+var C = Object.defineProperty;
+var q = (e, t, n) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var P = (e, t, n) => (q(e, typeof t != "symbol" ? t + "" : t, n), n);
+import { jsx as v, jsxs as L } from "react/jsx-runtime";
+import { useDebugValue as G, useRef as h, useInsertionEffect as Z, useEffect as H, useMemo as F, useCallback as T, createElement as W, forwardRef as k, useState as D, useImperativeHandle as B, useLayoutEffect as J, useId as X } from "react";
+const Q = Object.freeze(() => {
 });
-function B(e) {
+function ee(e) {
   return e;
 }
-let v;
-typeof window < "u" ? v = (e) => {
-  Y(e);
-  const t = x(Q);
-  j(() => {
+let _;
+typeof window < "u" ? _ = (e) => {
+  G(e);
+  const t = h(ne);
+  Z(() => {
     t.current = e;
   }, [e]);
-  const r = x(null);
-  return r.current || (r.current = function() {
+  const n = h(null);
+  return n.current || (n.current = function() {
     return t.current.apply(this, arguments);
-  }), r.current;
-} : v = W;
-function J(e) {
-  return v(e);
+  }), n.current;
+} : _ = Q;
+function te(e) {
+  return _(e);
 }
-function Q() {
+function ne() {
   throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
 }
-function X() {
-  var e = x(!0);
+function ue() {
+  var e = h(!0);
   return e.current ? (e.current = !1, !0) : e.current;
 }
-var w = function(e, t) {
-  var r = X();
-  q(function() {
-    if (!r)
+var R = function(e, t) {
+  var n = ue();
+  H(function() {
+    if (!n)
       return e();
   }, t);
 };
-function Z(e, ...t) {
+function re(e, ...t) {
   return typeof e == "function" ? e(...t) : e;
 }
-function C(e, t) {
+function se(e, t) {
   if (e.uniqueKey != null)
-    return Z(e.uniqueKey, e, t);
+    return re(e.uniqueKey, e, t);
   if (typeof e.value == "string")
     return e.value;
   if (typeof e.value == "number")
     return String(e.value);
   try {
-    const r = JSON.stringify(e.value);
-    if (r !== void 0)
-      return r;
+    const n = JSON.stringify(e.value);
+    if (n !== void 0)
+      return n;
   } catch {
   }
   return String(t);
 }
-class A {
+class Y {
   constructor() {
-    K(this, "usedKeys", /* @__PURE__ */ new Map());
+    P(this, "_usedKeys", /* @__PURE__ */ new Map());
   }
-  fix(t, r) {
-    let n = C(t, r);
+  fix(t, n) {
+    let u = se(t, n);
     for (; ; ) {
-      let u = this.usedKeys.get(n);
-      if (u === void 0) {
-        this.usedKeys.set(n, 1);
+      let r = this._usedKeys.get(u);
+      if (r === void 0) {
+        this._usedKeys.set(u, 1);
         break;
       }
-      this.usedKeys.set(n, ++u), n = `${n}(${u})`;
+      this._usedKeys.set(u, ++r), u = `${u}(${r})`;
     }
-    return n;
+    return u;
   }
 }
-const ee = (e) => ({
+const le = (e) => ({
   value: e,
   text: String(e),
   disabled: !0,
-  key: re
-}), te = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", re = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
-function de({
+  key: ae
+}), ce = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", ae = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
+function ie({
   options: e,
   value: t,
-  invalidValueOption: r = ee,
-  onChange: n,
-  placeholder: u,
-  ...c
+  invalidValueOption: n = le,
+  onChange: u,
+  placeholder: r,
+  ...s
 }) {
-  const i = t == null, l = E(() => t != null && e.some((s) => s.value == t), [e, t]), o = E(() => t == null || !r ? null : r(t), [r, t]), a = E(() => {
-    if (l)
+  const a = t == null, c = F(() => t != null && e.some((l) => l.value == t), [e, t]), o = F(() => t == null || !n ? null : n(t), [n, t]), i = F(() => {
+    if (c)
       return e;
-    const s = [...e];
-    return i ? u != null && s.unshift({ text: u, hidden: !0, value: null, key: te }) : o && s.push(o), s;
-  }, [l, e, i, o, u]), g = J((s) => {
-    const I = s.target.selectedIndex, S = a[I];
-    n == null || n({
+    const l = [...e];
+    return a ? r != null && l.unshift({ text: r, hidden: !0, value: null, key: ce }) : o && l.push(o), l;
+  }, [c, e, a, o, r]), d = te((l) => {
+    const g = l.target.selectedIndex, S = i[g];
+    u == null || u({
       value: S.value,
       // option: opt,
       // event: ev,
-      index: I,
+      index: g,
       type: "change",
-      timeStamp: s.timeStamp,
-      target: s.target
+      timeStamp: l.timeStamp,
+      target: l.target
     });
-  }), f = x(null), d = D(() => {
-    f.current && (f.current.selectedIndex < 0 || a[f.current.selectedIndex].value != t) && (f.current.selectedIndex = a.findIndex((s) => s.value == t));
-  }, [a, t]), y = (s) => {
-    f.current = s, d();
+  }), f = h(null), m = T(() => {
+    f.current && (f.current.selectedIndex < 0 || i[f.current.selectedIndex].value != t) && (f.current.selectedIndex = i.findIndex((l) => l.value == t));
+  }, [i, t]), N = (l) => {
+    f.current = l, m();
   };
-  w(() => {
-    d();
-  }, [d]);
-  const m = new A();
-  return /* @__PURE__ */ N("select", { ...c, onChange: g, ref: y, children: a.map((s, I) => {
-    const { value: S, text: le, uniqueKey: ie, ...R } = s, _ = m.fix(s, I);
-    return /* @__PURE__ */ z("option", { ...R, key: _, value: _ }, s.text);
+  R(() => {
+    m();
+  }, [m]);
+  const x = new Y();
+  return /* @__PURE__ */ v("select", { ...s, onChange: d, ref: N, children: i.map((l, g) => {
+    const { value: S, text: b, uniqueKey: O, ...y } = l, V = x.fix(l, g);
+    return /* @__PURE__ */ W("option", { ...y, key: V, value: V }, l.text);
   }) });
 }
-function ne(e) {
+function fe(e) {
   return e ? String(e).replace(/\s+/gu, " ").trim() : "";
 }
-function ue(e) {
+function oe(e) {
   try {
     return e.toLocaleString("en-US", { useGrouping: !1, maximumFractionDigits: 20 });
   } catch {
     return e.toFixed(14).replace(/\.?0+$/, "");
   }
 }
-function se(e) {
+function de(e) {
   return e ? e === "∞" || e === "+∞" ? Number.POSITIVE_INFINITY : e === "-∞" ? Number.NEGATIVE_INFINITY : Number.parseFloat(e) : Number.NaN;
 }
-function V(e) {
-  return Number.isNaN(e) ? "" : e === Number.POSITIVE_INFINITY ? "∞" : e === Number.NEGATIVE_INFINITY ? "-∞" : ue(e);
+function j(e) {
+  return Number.isNaN(e) ? "" : e === Number.POSITIVE_INFINITY ? "∞" : e === Number.NEGATIVE_INFINITY ? "-∞" : oe(e);
 }
-function ce(e) {
-  return e ? V(Number.parseFloat(e)) : "";
+function me(e) {
+  return e ? j(Number.parseFloat(e)) : "";
 }
-function b(e, t = 2) {
+function I(e, t = 2) {
   return String(e).padStart(t, "0");
 }
-const p = M(function({ value: t = "", onPaste: r, onChange: n, onInput: u, onBlur: c, formatOnChange: i = B, ...l }, o) {
-  const [a, g] = F(t), f = x(t), d = x(!1);
-  w(() => {
-    g(t), d.current = !1, f.current = t;
+const z = k(function({ value: t = "", onPaste: n, onChange: u, onInput: r, onBlur: s, formatOnChange: a = ee, ...c }, o) {
+  const [i, d] = D(t), f = h(t), m = h(!1);
+  R(() => {
+    d(t), m.current = !1, f.current = t;
   }, [t]);
-  const y = {
+  const N = {
     type: "text",
-    ...l,
+    ...c,
     ref: o,
-    value: a,
-    onChange: (m) => {
-      g(m.target.value);
+    value: i,
+    onChange: (x) => {
+      d(x.target.value);
     },
     // TODO: fire a change event onPaste ?
     // formatOnPaste?
@@ -167,165 +167,353 @@ const p = M(function({ value: t = "", onPaste: r, onChange: n, onInput: u, onBlu
     //     // ev.preventDefault()
     //     // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
     // },
-    onInput: (m) => {
-      d.current = !0, u == null || u(m);
+    onInput: (x) => {
+      m.current = !0, r == null || r(x);
     },
-    onBlur: (m) => {
-      const s = i(a);
-      d.current && (s !== f.current && (n == null || n({
+    onBlur: (x) => {
+      const l = a(i);
+      m.current && (l !== f.current && (u == null || u({
         type: "change",
-        value: s,
-        timeStamp: m.timeStamp,
-        target: m.target
-      }), f.current = s), s !== m.target.value && g(s)), c == null || c(m);
+        value: l,
+        timeStamp: x.timeStamp,
+        target: x.target
+      }), f.current = l), l !== x.target.value && d(l)), s == null || s(x);
     }
   };
-  return /* @__PURE__ */ N("input", { ...y });
+  return /* @__PURE__ */ v("input", { ...N });
 });
-function me({ formatOnChange: e = ne, ...t }) {
-  return /* @__PURE__ */ N(p, { formatOnChange: e, ...t, type: "text" });
+function Se({ formatOnChange: e = fe, ...t }) {
+  return /* @__PURE__ */ v(z, { formatOnChange: e, ...t, type: "text" });
 }
-const Ne = M(function({
+const Oe = k(function({
   onInput: t,
-  style: r,
-  initialHeight: n = "auto",
-  ...u
-}, c) {
-  const i = x(null), [l, o] = F(n), a = D(() => {
-    const f = i.current;
+  style: n,
+  initialHeight: u = "auto",
+  ...r
+}, s) {
+  const a = h(null), [c, o] = D(u), i = T(() => {
+    const f = a.current;
     if (!f)
       return;
-    f.style.height = n;
-    const d = `${f.scrollHeight}px`;
-    o(d), f.style.height = d;
-  }, [n]);
-  P(c, () => ({
-    element: i.current,
-    adjustHeight: a
-  }), [a]);
-  const g = v((f) => {
-    a(), t == null || t(f);
+    f.style.height = u;
+    const m = `${f.scrollHeight}px`;
+    o(m), f.style.height = m;
+  }, [u]);
+  B(s, () => ({
+    element: a.current,
+    adjustHeight: i
+  }), [i]);
+  const d = _((f) => {
+    i(), t == null || t(f);
   });
-  return U(() => {
-    a();
-    const f = i.current;
+  return J(() => {
+    i();
+    const f = a.current;
     if (!f)
       return;
-    const d = new ResizeObserver((y) => {
-      a();
+    const m = new ResizeObserver((N) => {
+      i();
     });
-    return d.observe(f), () => {
-      d.unobserve(f);
+    return m.observe(f), () => {
+      m.unobserve(f);
     };
-  }, [a]), /* @__PURE__ */ N("textarea", { ...u, style: {
+  }, [i]), /* @__PURE__ */ v("textarea", { ...r, style: {
     overflow: "hidden",
     // these 2 styles aren't needed if the caller sets them in CSS.
     resize: "none",
-    ...r,
-    height: l
-  }, onInput: g, ref: i });
+    ...n,
+    height: c
+  }, onInput: d, ref: a });
 });
-function ge(e) {
-  const t = G(), r = e.name ?? t, n = e.valueEquals ?? Object.is, u = e.options ?? [], c = new A(), i = v((l) => {
-    const o = Number(l.target.value), a = u[o];
-    a != null && e.onChange != null && e.onChange({
-      value: a.value,
+function Ee(e) {
+  const t = X(), n = e.name ?? t, u = e.valueEquals ?? Object.is, r = e.options ?? [], s = new Y(), a = _((c) => {
+    const o = Number(c.target.value), i = r[o];
+    i != null && e.onChange != null && e.onChange({
+      value: i.value,
       index: o,
       type: "change",
-      timeStamp: l.timeStamp,
-      target: l.target
+      timeStamp: c.timeStamp,
+      target: c.target
     });
   });
-  return /* @__PURE__ */ N("ul", { className: e.className, children: u.map((l, o) => {
-    const { value: a, text: g, key: f, itemClassName: d, labelClassName: y, inputClassName: m, textClassName: s, ...I } = l, S = c.fix(l, o);
-    return e.value !== void 0 && (I.checked = n(a, e.value)), /* @__PURE__ */ N("li", { className: d, "aria-disabled": I.disabled, children: /* @__PURE__ */ L("label", { className: y, children: [
-      /* @__PURE__ */ N("input", { ...I, className: m, value: o, onChange: i, name: r, type: "radio" }),
-      /* @__PURE__ */ N("span", { className: s, children: g })
+  return /* @__PURE__ */ v("ul", { className: e.className, children: r.map((c, o) => {
+    const { value: i, text: d, key: f, itemClassName: m, labelClassName: N, inputClassName: x, textClassName: l, ...g } = c, S = s.fix(c, o);
+    return e.value !== void 0 && (g.checked = u(i, e.value)), /* @__PURE__ */ v("li", { className: m, "aria-disabled": g.disabled, children: /* @__PURE__ */ L("label", { className: N, children: [
+      /* @__PURE__ */ v("input", { ...g, className: x, value: o, onChange: a, name: n, type: "radio" }),
+      /* @__PURE__ */ v("span", { className: l, children: d })
     ] }) }, S);
   }) });
 }
-function $() {
-  return x(null);
+function U() {
+  return h(null);
 }
-function O(e) {
+function A(e) {
   e.current != null && (clearTimeout(e.current), e.current = null);
 }
-const Ie = ({
+const De = ({
   value: e,
   onChange: t,
-  debounce: r = 500,
-  ...n
+  debounce: n = 500,
+  ...u
 }) => {
-  const u = $(), c = $();
-  w(() => {
-    O(c), u.current != null && (u.current.value = e);
+  const r = U(), s = U();
+  R(() => {
+    A(s), r.current != null && (r.current.value = e);
   }, [e]);
-  const i = () => {
-    u.current != null && u.current.value !== e && (t == null || t({ value: u.current.value }));
+  const a = () => {
+    r.current != null && r.current.value !== e && (t == null || t({ value: r.current.value }));
   };
-  return /* @__PURE__ */ N("input", { ...n, ref: u, defaultValue: e, onInput: () => {
-    O(c), c.current = setTimeout(i, r);
+  return /* @__PURE__ */ v("input", { ...u, ref: r, defaultValue: e, onInput: () => {
+    A(s), s.current = setTimeout(a, n);
   }, onBlur: () => {
-    O(c), i();
+    A(s), a();
   } });
 };
-function be({ onClick: e, ...t }) {
-  return t.onClick = (r) => {
-    r.preventDefault(), e == null || e(r);
-  }, /* @__PURE__ */ N("button", { type: "button", ...t });
+function _e({ onClick: e, ...t }) {
+  return t.onClick = (n) => {
+    n.preventDefault(), e == null || e(n);
+  }, /* @__PURE__ */ v("button", { type: "button", ...t });
+}
+function E(e, t) {
+  const n = e instanceof Date ? e : new Date(e);
+  let u = `${n.getFullYear()}-${I(n.getMonth() + 1)}-${I(n.getDate())}T${I(n.getHours())}:${I(n.getMinutes())}`;
+  const r = (t == null ? void 0 : t.milliseconds) || (t == null ? void 0 : t.milliseconds) == null && n.getMilliseconds() !== 0;
+  return ((t == null ? void 0 : t.seconds) || (t == null ? void 0 : t.seconds) == null && (n.getSeconds() !== 0 || r)) && (u += `:${I(n.getSeconds())}`, r && (u += `.${I(n.getMilliseconds(), 3)}`)), t != null && t.offset && (u += p(-n.getTimezoneOffset())), u;
+}
+function p(e) {
+  if (e == null)
+    return "";
+  if (e === 0)
+    return "Z";
+  const t = e > 0 ? "+" : "-", n = Math.floor(Math.abs(e) / 60), u = Math.abs(e) % 60;
+  return `${t}${I(n)}:${I(u)}`;
+}
+const xe = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?)(Z|[+-]\d{2}:\d{2})?$/, ve = { offset: !1, seconds: !1, milliseconds: !1 };
+function Ne(e) {
+  return e == null || Number.isNaN(e) || e === "" || Number.isNaN(+new Date(e));
 }
-function h(e, t) {
-  const r = new Date(e);
-  let n = `${r.getFullYear()}-${b(r.getMonth() + 1)}-${b(r.getDate())}T${b(r.getHours())}:${b(r.getMinutes())}`;
-  const u = (t == null ? void 0 : t.milliseconds) || (t == null ? void 0 : t.milliseconds) == null && r.getMilliseconds() !== 0;
-  if (((t == null ? void 0 : t.seconds) || (t == null ? void 0 : t.seconds) == null && (r.getSeconds() !== 0 || u)) && (n += `:${b(r.getSeconds())}`, u && (n += `.${b(r.getMilliseconds(), 3)}`)), t != null && t.offset) {
-    const i = -r.getTimezoneOffset(), l = i >= 0 ? "+" : "-", o = Math.floor(Math.abs(i) / 60), a = Math.abs(i) % 60;
-    n += `${l}${b(o)}:${b(a)}`;
+function M(e) {
+  if (typeof e == "string") {
+    const t = e.match(xe);
+    if (t)
+      return t[1];
   }
-  return n;
+  return Ne(e) ? "" : E(e, ve);
 }
-const T = { offset: !1 };
-function xe({ value: e, defaultValue: t, min: r, max: n, onChange: u, ...c }) {
-  return e !== void 0 && (c.value = e === null ? "" : h(e, T)), t != null && (c.defaultValue = h(t, T)), r != null && (c.min = h(r, T)), n != null && (c.max = h(n, T)), u != null && (c.onChange = (i) => {
-    if (i.currentTarget.value.length) {
-      const l = new Date(i.currentTarget.valueAsNumber);
-      u({
-        isoString: h(l, { offset: !0 }),
+const w = { offset: !1 };
+function Me({ value: e, defaultValue: t, min: n, max: u, onChange: r, ...s }) {
+  return e !== void 0 && (s.value = e === null ? "" : E(e, w)), t != null && (s.defaultValue = E(t, w)), n != null && (s.min = E(n, w)), u != null && (s.max = E(u, w)), r != null && (s.onChange = (a) => {
+    if (a.currentTarget.value.length) {
+      const c = new Date(a.currentTarget.valueAsNumber);
+      r({
+        // TODO: undo this, "date time local" should in fact be local (no time zone)
+        isoString: E(c, { offset: !0 }),
         // isoString: date.toISOString(),
-        value: l.valueOf(),
-        date: l
+        value: c.valueOf(),
+        date: c
       });
     } else
-      u({
+      r({
         // isoStringWithOffset: null,
         isoString: null,
         value: null,
         date: null
       });
-  }), /* @__PURE__ */ N("input", { type: "datetime-local", ...c });
+  }), /* @__PURE__ */ v("input", { type: "datetime-local", ...s });
+}
+function ge(e) {
+  const t = h(e);
+  return t.current = e, t;
+}
+function be(e, t) {
+  const n = h(e), u = ge(t);
+  return H(() => {
+    Object.is(n.current, e) || (u.current(), n.current = e);
+  }, [u, e]), T((r) => {
+    n.current = r;
+  }, []);
 }
-const ye = M(function({ placeholder: t, formatOnChange: r = ce, onChange: n, value: u, ...c }, i) {
-  const l = {
+const he = [
+  // United States Minor Outlying Islands
+  { value: -12 * 60, text: "-12:00" },
+  // New Zealand, United States
+  { value: -11 * 60, text: "-11:00" },
+  // United States, French Polynesia, New Zealand
+  { value: -10 * 60, text: "-10:00" },
+  // France (Marquesas Islands)
+  { value: -9.5 * 60, text: "-09:30" },
+  // United States, Canada, Mexico
+  { value: -9 * 60, text: "-09:00" },
+  // United States, Canada, Mexico, UK (Pitcairn Islands)
+  { value: -8 * 60, text: "-08:00" },
+  // United States, Canada, Mexico
+  { value: -7 * 60, text: "-07:00" },
+  // United States, Canada, Mexico, Central America
+  { value: -6 * 60, text: "-06:00" },
+  // United States, Canada, Cuba, South America
+  { value: -5 * 60, text: "-05:00" },
+  // Canada, Caribbean, South America
+  { value: -4 * 60, text: "-04:00" },
+  // Canada (Newfoundland)
+  { value: -3.5 * 60, text: "-03:30" },
+  // Argentina, Brazil, Chile
+  { value: -3 * 60, text: "-03:00" },
+  // Brazil (Fernando de Noronha), South Georgia
+  { value: -2 * 60, text: "-02:00" },
+  // Cape Verde
+  { value: -1 * 60, text: "-01:00" },
+  // UK, Portugal, Iceland
+  { value: 0, text: "±00:00" },
+  // Central Europe
+  { value: 1 * 60, text: "+01:00" },
+  // Eastern Europe, Egypt
+  { value: 2 * 60, text: "+02:00" },
+  // East Africa, Middle East
+  { value: 3 * 60, text: "+03:00" },
+  // Iran
+  { value: 3.5 * 60, text: "+03:30" },
+  // UAE, Russia (Moscow)
+  { value: 4 * 60, text: "+04:00" },
+  // Afghanistan
+  { value: 4.5 * 60, text: "+04:30" },
+  // Pakistan
+  { value: 5 * 60, text: "+05:00" },
+  // India, Sri Lanka
+  { value: 5.5 * 60, text: "+05:30" },
+  // Nepal
+  { value: 5.75 * 60, text: "+05:45" },
+  // Bangladesh, Bhutan
+  { value: 6 * 60, text: "+06:00" },
+  // Myanmar
+  { value: 6.5 * 60, text: "+06:30" },
+  // Thailand, Vietnam
+  { value: 7 * 60, text: "+07:00" },
+  // China, Singapore
+  { value: 8 * 60, text: "+08:00" },
+  // Australia (Western)
+  { value: 8.75 * 60, text: "+08:45" },
+  // Japan, South Korea
+  { value: 9 * 60, text: "+09:00" },
+  // Australia (Central)
+  { value: 9.5 * 60, text: "+09:30" },
+  // Australia (Eastern)
+  { value: 10 * 60, text: "+10:00" },
+  // Australia (Lord Howe Island)
+  { value: 10.5 * 60, text: "+10:30" },
+  // Solomon Islands, Vanuatu
+  { value: 11 * 60, text: "+11:00" },
+  // Fiji, New Zealand
+  { value: 12 * 60, text: "+12:00" },
+  // New Zealand (Chatham Islands)
+  { value: 12.75 * 60, text: "+12:45" },
+  // Tonga, Samoa
+  { value: 13 * 60, text: "+13:00" },
+  // Kiribati
+  { value: 14 * 60, text: "+14:00" }
+];
+function $(e) {
+  if (typeof e != "string" || e === "")
+    return null;
+  const t = e.match(/([+-])(\d{2}):(\d{2})|Z$/);
+  if (!t)
+    return null;
+  if (t[0] === "Z")
+    return 0;
+  const [, n, u, r] = t, s = Number(u) * 60 + Number(r);
+  return n === "+" ? s : -s;
+}
+function K(e) {
+  return e === "" ? null : -new Date(e).getTimezoneOffset();
+}
+function we({
+  value: e,
+  defaultValue: t,
+  min: n,
+  max: u,
+  onChange: r,
+  ...s
+}) {
+  const [a, c] = D(() => $(e ?? t) !== null), [o, i] = D(() => $(e ?? t)), [d, f] = D(() => M(e ?? t)), m = be(e, () => {
+    c($(e) !== null), i($(e)), f(M(e));
+  }), N = T((b) => {
+    m(b), r == null || r({
+      value: b
+    });
+  }, [r, m]);
+  n != null && (s.min = M(n)), u != null && (s.max = M(u));
+  const x = a ? o : K(d), l = T(
+    (b) => {
+      const O = b.currentTarget.value;
+      f(O), N(O + p(x));
+    },
+    [N, x]
+  ), g = T(
+    (b) => {
+      i(b.value), N(d + p(b.value));
+    },
+    [N, d]
+  ), S = T(
+    (b) => {
+      const O = b.currentTarget.checked;
+      c(O);
+      let y;
+      O ? d && o === null ? (y = K(d), i(y)) : y = o : y = K(d), N(d + p(y));
+    },
+    [o, d, N]
+  );
+  return /* @__PURE__ */ L("span", { children: [
+    /* @__PURE__ */ v(
+      "input",
+      {
+        type: "datetime-local",
+        ...s,
+        value: d,
+        onChange: l
+      }
+    ),
+    /* @__PURE__ */ v(
+      "input",
+      {
+        type: "checkbox",
+        title: a ? "Use UTC offset from this device" : "Enable UTC offset selection",
+        checked: a,
+        onChange: S
+      }
+    ),
+    /* @__PURE__ */ v(
+      ie,
+      {
+        value: x,
+        onChange: g,
+        disabled: !a,
+        options: he
+      }
+    )
+  ] });
+}
+const $e = k(function({ placeholder: t, formatOnChange: n = me, onChange: u, value: r, ...s }, a) {
+  const c = {
     inputMode: "decimal",
-    ...c,
-    formatOnChange: r,
+    ...s,
+    formatOnChange: n,
     type: "number"
   };
-  return u !== void 0 && (l.value = V(u)), t != null && (l.placeholder = String(t)), n != null && (l.onChange = (o) => {
-    n({
+  return r !== void 0 && (c.value = j(r)), t != null && (c.placeholder = String(t)), u != null && (c.onChange = (o) => {
+    u({
       ...o,
-      value: se(o.value)
+      value: de(o.value)
     });
-  }), /* @__PURE__ */ N(p, { ...l, ref: i });
+  }), /* @__PURE__ */ v(z, { ...c, ref: a });
 });
 export {
-  be as ActionButton,
-  xe as DatetimeLocalInput,
-  Ie as DebouncedInput,
-  p as Input,
-  ye as NumberInput,
-  ge as RadioMenu,
-  de as Select,
-  Ne as TextArea,
-  me as TextInput
+  _e as ActionButton,
+  Me as DatetimeLocalInput,
+  we as DatetimeOffsetInput,
+  De as DebouncedInput,
+  z as Input,
+  $e as NumberInput,
+  Ee as RadioMenu,
+  ie as Select,
+  Oe as TextArea,
+  Se as TextInput
 };

package/dist/react-basic-inputs.umd.cjs

@@ -1 +1 @@
-(function(o,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],c):(o=typeof globalThis<"u"?globalThis:o||self,c(o["@mpen/react-basic-inputs"]={},o.jsxRuntime,o.React))})(this,function(o,c,s){"use strict";var re=Object.defineProperty;var ne=(o,c,s)=>c in o?re(o,c,{enumerable:!0,configurable:!0,writable:!0,value:s}):o[c]=s;var $=(o,c,s)=>(ne(o,typeof c!="symbol"?c+"":c,s),s);const p=Object.freeze(()=>{});function F(e){return e}let S;typeof window<"u"?S=e=>{s.useDebugValue(e);const t=s.useRef(j);s.useInsertionEffect(()=>{t.current=e},[e]);const r=s.useRef(null);return r.current||(r.current=function(){return t.current.apply(this,arguments)}),r.current}:S=p;function V(e){return S(e)}function j(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function k(){var e=s.useRef(!0);return e.current?(e.current=!1,!0):e.current}var O=function(e,t){var r=k();s.useEffect(function(){if(!r)return e()},t)};function L(e,...t){return typeof e=="function"?e(...t):e}function q(e,t){if(e.uniqueKey!=null)return L(e.uniqueKey,e,t);if(typeof e.value=="string")return e.value;if(typeof e.value=="number")return String(e.value);try{const r=JSON.stringify(e.value);if(r!==void 0)return r}catch{}return String(t)}class D{constructor(){$(this,"usedKeys",new Map)}fix(t,r){let n=q(t,r);for(;;){let u=this.usedKeys.get(n);if(u===void 0){this.usedKeys.set(n,1);break}this.usedKeys.set(n,++u),n=`${n}(${u})`}return n}}const H=e=>({value:e,text:String(e),disabled:!0,key:P}),Y="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",P="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function z({options:e,value:t,invalidValueOption:r=H,onChange:n,placeholder:u,...l}){const a=t==null,i=s.useMemo(()=>t!=null&&e.some(f=>f.value==t),[e,t]),N=s.useMemo(()=>t==null||!r?null:r(t),[r,t]),d=s.useMemo(()=>{if(i)return e;const f=[...e];return a?u!=null&&f.unshift({text:u,hidden:!0,value:null,key:Y}):N&&f.push(N),f},[i,e,a,N,u]),g=V(f=>{const x=f.target.selectedIndex,E=d[x];n==null||n({value:E.value,index:x,type:"change",timeStamp:f.timeStamp,target:f.target})}),m=s.useRef(null),I=s.useCallback(()=>{m.current&&(m.current.selectedIndex<0||d[m.current.selectedIndex].value!=t)&&(m.current.selectedIndex=d.findIndex(f=>f.value==t))},[d,t]),h=f=>{m.current=f,I()};O(()=>{I()},[I]);const b=new D;return c.jsx("select",{...l,onChange:g,ref:h,children:d.map((f,x)=>{const{value:E,text:ue,uniqueKey:se,...te}=f,K=b.fix(f,x);return s.createElement("option",{...te,key:K,value:K},f.text)})})}function U(e){return e?String(e).replace(/\s+/gu," ").trim():""}function G(e){try{return e.toLocaleString("en-US",{useGrouping:!1,maximumFractionDigits:20})}catch{return e.toFixed(14).replace(/\.?0+$/,"")}}function B(e){return e?e==="∞"||e==="+∞"?Number.POSITIVE_INFINITY:e==="-∞"?Number.NEGATIVE_INFINITY:Number.parseFloat(e):Number.NaN}function _(e){return Number.isNaN(e)?"":e===Number.POSITIVE_INFINITY?"∞":e===Number.NEGATIVE_INFINITY?"-∞":G(e)}function W(e){return e?_(Number.parseFloat(e)):""}function y(e,t=2){return String(e).padStart(t,"0")}const M=s.forwardRef(function({value:t="",onPaste:r,onChange:n,onInput:u,onBlur:l,formatOnChange:a=F,...i},N){const[d,g]=s.useState(t),m=s.useRef(t),I=s.useRef(!1);O(()=>{g(t),I.current=!1,m.current=t},[t]);const h={type:"text",...i,ref:N,value:d,onChange:b=>{g(b.target.value)},onInput:b=>{I.current=!0,u==null||u(b)},onBlur:b=>{const f=a(d);I.current&&(f!==m.current&&(n==null||n({type:"change",value:f,timeStamp:b.timeStamp,target:b.target}),m.current=f),f!==b.target.value&&g(f)),l==null||l(b)}};return c.jsx("input",{...h})});function J({formatOnChange:e=U,...t}){return c.jsx(M,{formatOnChange:e,...t,type:"text"})}const C=s.forwardRef(function({onInput:t,style:r,initialHeight:n="auto",...u},l){const a=s.useRef(null),[i,N]=s.useState(n),d=s.useCallback(()=>{const m=a.current;if(!m)return;m.style.height=n;const I=`${m.scrollHeight}px`;N(I),m.style.height=I},[n]);s.useImperativeHandle(l,()=>({element:a.current,adjustHeight:d}),[d]);const g=S(m=>{d(),t==null||t(m)});return s.useLayoutEffect(()=>{d();const m=a.current;if(!m)return;const I=new ResizeObserver(h=>{d()});return I.observe(m),()=>{I.unobserve(m)}},[d]),c.jsx("textarea",{...u,style:{overflow:"hidden",resize:"none",...r,height:i},onInput:g,ref:a})});function Q(e){const t=s.useId(),r=e.name??t,n=e.valueEquals??Object.is,u=e.options??[],l=new D,a=S(i=>{const N=Number(i.target.value),d=u[N];d!=null&&e.onChange!=null&&e.onChange({value:d.value,index:N,type:"change",timeStamp:i.timeStamp,target:i.target})});return c.jsx("ul",{className:e.className,children:u.map((i,N)=>{const{value:d,text:g,key:m,itemClassName:I,labelClassName:h,inputClassName:b,textClassName:f,...x}=i,E=l.fix(i,N);return e.value!==void 0&&(x.checked=n(d,e.value)),c.jsx("li",{className:I,"aria-disabled":x.disabled,children:c.jsxs("label",{className:h,children:[c.jsx("input",{...x,className:b,value:N,onChange:a,name:r,type:"radio"}),c.jsx("span",{className:f,children:g})]})},E)})})}function A(){return s.useRef(null)}function w(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const X=({value:e,onChange:t,debounce:r=500,...n})=>{const u=A(),l=A();O(()=>{w(l),u.current!=null&&(u.current.value=e)},[e]);const a=()=>{u.current!=null&&u.current.value!==e&&(t==null||t({value:u.current.value}))};return c.jsx("input",{...n,ref:u,defaultValue:e,onInput:()=>{w(l),l.current=setTimeout(a,r)},onBlur:()=>{w(l),a()}})};function Z({onClick:e,...t}){return t.onClick=r=>{r.preventDefault(),e==null||e(r)},c.jsx("button",{type:"button",...t})}function v(e,t){const r=new Date(e);let n=`${r.getFullYear()}-${y(r.getMonth()+1)}-${y(r.getDate())}T${y(r.getHours())}:${y(r.getMinutes())}`;const u=(t==null?void 0:t.milliseconds)||(t==null?void 0:t.milliseconds)==null&&r.getMilliseconds()!==0;if(((t==null?void 0:t.seconds)||(t==null?void 0:t.seconds)==null&&(r.getSeconds()!==0||u))&&(n+=`:${y(r.getSeconds())}`,u&&(n+=`.${y(r.getMilliseconds(),3)}`)),t!=null&&t.offset){const a=-r.getTimezoneOffset(),i=a>=0?"+":"-",N=Math.floor(Math.abs(a)/60),d=Math.abs(a)%60;n+=`${i}${y(N)}:${y(d)}`}return n}const T={offset:!1};function R({value:e,defaultValue:t,min:r,max:n,onChange:u,...l}){return e!==void 0&&(l.value=e===null?"":v(e,T)),t!=null&&(l.defaultValue=v(t,T)),r!=null&&(l.min=v(r,T)),n!=null&&(l.max=v(n,T)),u!=null&&(l.onChange=a=>{if(a.currentTarget.value.length){const i=new Date(a.currentTarget.valueAsNumber);u({isoString:v(i,{offset:!0}),value:i.valueOf(),date:i})}else u({isoString:null,value:null,date:null})}),c.jsx("input",{type:"datetime-local",...l})}const ee=s.forwardRef(function({placeholder:t,formatOnChange:r=W,onChange:n,value:u,...l},a){const i={inputMode:"decimal",...l,formatOnChange:r,type:"number"};return u!==void 0&&(i.value=_(u)),t!=null&&(i.placeholder=String(t)),n!=null&&(i.onChange=N=>{n({...N,value:B(N.value)})}),c.jsx(M,{...i,ref:a})});o.ActionButton=Z,o.DatetimeLocalInput=R,o.DebouncedInput=X,o.Input=M,o.NumberInput=ee,o.RadioMenu=Q,o.Select=z,o.TextArea=C,o.TextInput=J,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(x,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],f):(x=typeof globalThis<"u"?globalThis:x||self,f(x["@mpen/react-basic-inputs"]={},x.jsxRuntime,x.React))})(this,function(x,f,r){"use strict";var ve=Object.defineProperty;var be=(x,f,r)=>f in x?ve(x,f,{enumerable:!0,configurable:!0,writable:!0,value:r}):x[f]=r;var L=(x,f,r)=>(be(x,typeof f!="symbol"?f+"":f,r),r);const U=Object.freeze(()=>{});function q(e){return e}let D;typeof window<"u"?D=e=>{r.useDebugValue(e);const t=r.useRef(Y);r.useInsertionEffect(()=>{t.current=e},[e]);const n=r.useRef(null);return n.current||(n.current=function(){return t.current.apply(this,arguments)}),n.current}:D=U;function H(e){return D(e)}function Y(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function z(){var e=r.useRef(!0);return e.current?(e.current=!1,!0):e.current}var p=function(e,t){var n=z();r.useEffect(function(){if(!n)return e()},t)};function G(e,...t){return typeof e=="function"?e(...t):e}function Z(e,t){if(e.uniqueKey!=null)return G(e.uniqueKey,e,t);if(typeof e.value=="string")return e.value;if(typeof e.value=="number")return String(e.value);try{const n=JSON.stringify(e.value);if(n!==void 0)return n}catch{}return String(t)}class K{constructor(){L(this,"_usedKeys",new Map)}fix(t,n){let u=Z(t,n);for(;;){let s=this._usedKeys.get(u);if(s===void 0){this._usedKeys.set(u,1);break}this._usedKeys.set(u,++s),u=`${u}(${s})`}return u}}const B=e=>({value:e,text:String(e),disabled:!0,key:J}),W="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",J="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function C({options:e,value:t,invalidValueOption:n=B,onChange:u,placeholder:s,...l}){const a=t==null,i=r.useMemo(()=>t!=null&&e.some(c=>c.value==t),[e,t]),m=r.useMemo(()=>t==null||!n?null:n(t),[n,t]),o=r.useMemo(()=>{if(i)return e;const c=[...e];return a?s!=null&&c.unshift({text:s,hidden:!0,value:null,key:W}):m&&c.push(m),c},[i,e,a,m,s]),v=H(c=>{const g=c.target.selectedIndex,O=o[g];u==null||u({value:O.value,index:g,type:"change",timeStamp:c.timeStamp,target:c.target})}),d=r.useRef(null),b=r.useCallback(()=>{d.current&&(d.current.selectedIndex<0||o[d.current.selectedIndex].value!=t)&&(d.current.selectedIndex=o.findIndex(c=>c.value==t))},[o,t]),I=c=>{d.current=c,b()};p(()=>{b()},[b]);const N=new K;return f.jsx("select",{...l,onChange:v,ref:I,children:o.map((c,g)=>{const{value:O,text:h,uniqueKey:E,...T}=c,P=N.fix(c,g);return r.createElement("option",{...T,key:P,value:P},c.text)})})}function X(e){return e?String(e).replace(/\s+/gu," ").trim():""}function Q(e){try{return e.toLocaleString("en-US",{useGrouping:!1,maximumFractionDigits:20})}catch{return e.toFixed(14).replace(/\.?0+$/,"")}}function R(e){return e?e==="∞"||e==="+∞"?Number.POSITIVE_INFINITY:e==="-∞"?Number.NEGATIVE_INFINITY:Number.parseFloat(e):Number.NaN}function V(e){return Number.isNaN(e)?"":e===Number.POSITIVE_INFINITY?"∞":e===Number.NEGATIVE_INFINITY?"-∞":Q(e)}function ee(e){return e?V(Number.parseFloat(e)):""}function y(e,t=2){return String(e).padStart(t,"0")}const $=r.forwardRef(function({value:t="",onPaste:n,onChange:u,onInput:s,onBlur:l,formatOnChange:a=q,...i},m){const[o,v]=r.useState(t),d=r.useRef(t),b=r.useRef(!1);p(()=>{v(t),b.current=!1,d.current=t},[t]);const I={type:"text",...i,ref:m,value:o,onChange:N=>{v(N.target.value)},onInput:N=>{b.current=!0,s==null||s(N)},onBlur:N=>{const c=a(o);b.current&&(c!==d.current&&(u==null||u({type:"change",value:c,timeStamp:N.timeStamp,target:N.target}),d.current=c),c!==N.target.value&&v(c)),l==null||l(N)}};return f.jsx("input",{...I})});function te({formatOnChange:e=X,...t}){return f.jsx($,{formatOnChange:e,...t,type:"text"})}const ne=r.forwardRef(function({onInput:t,style:n,initialHeight:u="auto",...s},l){const a=r.useRef(null),[i,m]=r.useState(u),o=r.useCallback(()=>{const d=a.current;if(!d)return;d.style.height=u;const b=`${d.scrollHeight}px`;m(b),d.style.height=b},[u]);r.useImperativeHandle(l,()=>({element:a.current,adjustHeight:o}),[o]);const v=D(d=>{o(),t==null||t(d)});return r.useLayoutEffect(()=>{o();const d=a.current;if(!d)return;const b=new ResizeObserver(I=>{o()});return b.observe(d),()=>{b.unobserve(d)}},[o]),f.jsx("textarea",{...s,style:{overflow:"hidden",resize:"none",...n,height:i},onInput:v,ref:a})});function ue(e){const t=r.useId(),n=e.name??t,u=e.valueEquals??Object.is,s=e.options??[],l=new K,a=D(i=>{const m=Number(i.target.value),o=s[m];o!=null&&e.onChange!=null&&e.onChange({value:o.value,index:m,type:"change",timeStamp:i.timeStamp,target:i.target})});return f.jsx("ul",{className:e.className,children:s.map((i,m)=>{const{value:o,text:v,key:d,itemClassName:b,labelClassName:I,inputClassName:N,textClassName:c,...g}=i,O=l.fix(i,m);return e.value!==void 0&&(g.checked=u(o,e.value)),f.jsx("li",{className:b,"aria-disabled":g.disabled,children:f.jsxs("label",{className:I,children:[f.jsx("input",{...g,className:N,value:m,onChange:a,name:n,type:"radio"}),f.jsx("span",{className:c,children:v})]})},O)})})}function j(){return r.useRef(null)}function A(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const re=({value:e,onChange:t,debounce:n=500,...u})=>{const s=j(),l=j();p(()=>{A(l),s.current!=null&&(s.current.value=e)},[e]);const a=()=>{s.current!=null&&s.current.value!==e&&(t==null||t({value:s.current.value}))};return f.jsx("input",{...u,ref:s,defaultValue:e,onInput:()=>{A(l),l.current=setTimeout(a,n)},onBlur:()=>{A(l),a()}})};function se({onClick:e,...t}){return t.onClick=n=>{n.preventDefault(),e==null||e(n)},f.jsx("button",{type:"button",...t})}function S(e,t){const n=e instanceof Date?e:new Date(e);let u=`${n.getFullYear()}-${y(n.getMonth()+1)}-${y(n.getDate())}T${y(n.getHours())}:${y(n.getMinutes())}`;const s=(t==null?void 0:t.milliseconds)||(t==null?void 0:t.milliseconds)==null&&n.getMilliseconds()!==0;return((t==null?void 0:t.seconds)||(t==null?void 0:t.seconds)==null&&(n.getSeconds()!==0||s))&&(u+=`:${y(n.getSeconds())}`,s&&(u+=`.${y(n.getMilliseconds(),3)}`)),t!=null&&t.offset&&(u+=M(-n.getTimezoneOffset())),u}function M(e){if(e==null)return"";if(e===0)return"Z";const t=e>0?"+":"-",n=Math.floor(Math.abs(e)/60),u=Math.abs(e)%60;return`${t}${y(n)}:${y(u)}`}const le=/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?)(Z|[+-]\d{2}:\d{2})?$/,fe={offset:!1,seconds:!1,milliseconds:!1};function ce(e){return e==null||Number.isNaN(e)||e===""||Number.isNaN(+new Date(e))}function _(e){if(typeof e=="string"){const t=e.match(le);if(t)return t[1]}return ce(e)?"":S(e,fe)}const w={offset:!1};function ie({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){return e!==void 0&&(l.value=e===null?"":S(e,w)),t!=null&&(l.defaultValue=S(t,w)),n!=null&&(l.min=S(n,w)),u!=null&&(l.max=S(u,w)),s!=null&&(l.onChange=a=>{if(a.currentTarget.value.length){const i=new Date(a.currentTarget.valueAsNumber);s({isoString:S(i,{offset:!0}),value:i.valueOf(),date:i})}else s({isoString:null,value:null,date:null})}),f.jsx("input",{type:"datetime-local",...l})}function ae(e){const t=r.useRef(e);return t.current=e,t}function oe(e,t){const n=r.useRef(e),u=ae(t);return r.useEffect(()=>{Object.is(n.current,e)||(u.current(),n.current=e)},[u,e]),r.useCallback(s=>{n.current=s},[])}const de=[{value:-12*60,text:"-12:00"},{value:-11*60,text:"-11:00"},{value:-10*60,text:"-10:00"},{value:-9.5*60,text:"-09:30"},{value:-9*60,text:"-09:00"},{value:-8*60,text:"-08:00"},{value:-7*60,text:"-07:00"},{value:-6*60,text:"-06:00"},{value:-5*60,text:"-05:00"},{value:-4*60,text:"-04:00"},{value:-3.5*60,text:"-03:30"},{value:-3*60,text:"-03:00"},{value:-2*60,text:"-02:00"},{value:-1*60,text:"-01:00"},{value:0,text:"±00:00"},{value:1*60,text:"+01:00"},{value:2*60,text:"+02:00"},{value:3*60,text:"+03:00"},{value:3.5*60,text:"+03:30"},{value:4*60,text:"+04:00"},{value:4.5*60,text:"+04:30"},{value:5*60,text:"+05:00"},{value:5.5*60,text:"+05:30"},{value:5.75*60,text:"+05:45"},{value:6*60,text:"+06:00"},{value:6.5*60,text:"+06:30"},{value:7*60,text:"+07:00"},{value:8*60,text:"+08:00"},{value:8.75*60,text:"+08:45"},{value:9*60,text:"+09:00"},{value:9.5*60,text:"+09:30"},{value:10*60,text:"+10:00"},{value:10.5*60,text:"+10:30"},{value:11*60,text:"+11:00"},{value:12*60,text:"+12:00"},{value:12.75*60,text:"+12:45"},{value:13*60,text:"+13:00"},{value:14*60,text:"+14:00"}];function k(e){if(typeof e!="string"||e==="")return null;const t=e.match(/([+-])(\d{2}):(\d{2})|Z$/);if(!t)return null;if(t[0]==="Z")return 0;const[,n,u,s]=t,l=Number(u)*60+Number(s);return n==="+"?l:-l}function F(e){return e===""?null:-new Date(e).getTimezoneOffset()}function xe({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){const[a,i]=r.useState(()=>k(e??t)!==null),[m,o]=r.useState(()=>k(e??t)),[v,d]=r.useState(()=>_(e??t)),b=oe(e,()=>{i(k(e)!==null),o(k(e)),d(_(e))}),I=r.useCallback(h=>{b(h),s==null||s({value:h})},[s,b]);n!=null&&(l.min=_(n)),u!=null&&(l.max=_(u));const N=a?m:F(v),c=r.useCallback(h=>{const E=h.currentTarget.value;d(E),I(E+M(N))},[I,N]),g=r.useCallback(h=>{o(h.value),I(v+M(h.value))},[I,v]),O=r.useCallback(h=>{const E=h.currentTarget.checked;i(E);let T;E?v&&m===null?(T=F(v),o(T)):T=m:T=F(v),I(v+M(T))},[m,v,I]);return f.jsxs("span",{children:[f.jsx("input",{type:"datetime-local",...l,value:v,onChange:c}),f.jsx("input",{type:"checkbox",title:a?"Use UTC offset from this device":"Enable UTC offset selection",checked:a,onChange:O}),f.jsx(C,{value:N,onChange:g,disabled:!a,options:de})]})}const me=r.forwardRef(function({placeholder:t,formatOnChange:n=ee,onChange:u,value:s,...l},a){const i={inputMode:"decimal",...l,formatOnChange:n,type:"number"};return s!==void 0&&(i.value=V(s)),t!=null&&(i.placeholder=String(t)),u!=null&&(i.onChange=m=>{u({...m,value:R(m.value)})}),f.jsx($,{...i,ref:a})});x.ActionButton=se,x.DatetimeLocalInput=ie,x.DatetimeOffsetInput=xe,x.DebouncedInput=re,x.Input=$,x.NumberInput=me,x.RadioMenu=ue,x.Select=C,x.TextArea=ne,x.TextInput=te,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mpen/react-basic-inputs",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "files": ["dist"],
   "exports": {