@mpen/react-basic-inputs 0.3.3 → 0.4.0

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

@@ -1,23 +1,22 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { DetailedHTMLProps } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
-import { ForwardRefExoticComponent } from 'react';
-import { InputHTMLAttributes } from 'react';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { Key } from 'react';
 import { ReactNode } from 'react';
-import { RefAttributes } from 'react';
-import { TextareaHTMLAttributes } from 'react';
+import { Ref } from 'react';
 
-export declare function ActionButton({ onClick, ...props }: ActionButtonProps): JSX_2.Element;
+export declare function ActionButton({ onClick, ...props }: ActionButtonProps): JSX.Element;
 
 export declare type ActionButtonProps = RequiredKeys<ComponentPropsWithoutRef<'button'>, 'onClick'>;
 
-export declare function DatetimeLocalInput({ value, defaultValue, min, max, onChange, ...props }: DatetimeLocalInputProps): JSX_2.Element;
+export declare function DatetimeLocalInput({ value, defaultValue, min, max, onChange, ...props }: DatetimeLocalInputProps): JSX.Element;
 
 export declare type DatetimeLocalInputChangeEvent = {
     value: string;
+    date: Date | null;
+    isoString: string;
 };
 
 export declare type DatetimeLocalInputProps = OverrideProps<'input', {
@@ -28,7 +27,7 @@ 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 function DatetimeOffsetInput({ value, defaultValue, min, max, onChange, ...props }: DatetimeOffsetInputProps): JSX.Element;
 
 export declare type DatetimeOffsetInputChangeEvent = {
     value: string;
@@ -72,14 +71,7 @@ declare type HtmlSelectElement = HTMLElementTagNameMap['select'];
 /** Hack to de-conflict React's HTMLInputElement vs the standard dom lib */
 declare type HtmlTextAreaElement = HTMLElementTagNameMap['textarea'];
 
-export declare const Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange" | "formatOnChange"> & {
-onChange?: InputChangeEventHandler | undefined;
-value?: string | undefined;
-/**
-* Function used to format value on blur.
-*/
-formatOnChange?: ((value: string) => string) | undefined;
-} & RefAttributes<HTMLInputElement>>;
+export declare function Input({ value: initialValue, onPaste, onChange, onInput, onBlur, formatOnChange, ref, ...otherProps }: InputProps): JSX.Element;
 
 export declare type InputChangeEvent = {
     value: string;
@@ -93,6 +85,7 @@ export declare type InputChangeEventHandler = EventCallback<InputChangeEvent>;
 export declare type InputProps = OverrideProps<'input', {
     onChange?: InputChangeEventHandler;
     value?: string;
+    ref?: ComponentPropsWithRef<'input'>['ref'];
     /**
      * Function used to format value on blur.
      */
@@ -115,27 +108,20 @@ export declare type NumberChangeEvent = {
 
 export declare type NumberChangeEventHandler = EventCallback<NumberChangeEvent>;
 
-export declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange" | "formatOnChange"> & {
-onChange?: InputChangeEventHandler | undefined;
-value?: string | undefined;
-formatOnChange?: ((value: string) => string) | undefined;
-} & RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange" | "placeholder" | "type"> & {
-value?: number | undefined;
-placeholder?: string | number | undefined;
-onChange?: NumberChangeEventHandler | undefined;
-} & RefAttributes<HTMLInputElement>>;
+export declare function NumberInput({ placeholder, formatOnChange, onChange, value, ref, ...otherProps }: NumberInputProps): JSX.Element;
 
 export declare type NumberInputProps = OverrideProps<typeof Input, {
     value?: number;
     placeholder?: string | number;
     onChange?: NumberChangeEventHandler;
+    ref?: ComponentPropsWithRef<typeof Input>['ref'];
 }, 'type'>;
 
 declare type Override<Base, Extension, DeleteKeys extends PropertyKey = never> = Omit<Base, keyof Extension | DeleteKeys> & Extension;
 
 declare type OverrideProps<Base extends ElementType, Extension, DeleteKeys extends PropertyKey = never> = Override<ComponentPropsWithoutRef<Base>, Extension, DeleteKeys>;
 
-export declare function RadioMenu<T extends NonNil>(menu: RadioMenuProps<T>): JSX_2.Element;
+export declare function RadioMenu<T extends NonNil>(menu: RadioMenuProps<T>): JSX.Element;
 
 export declare type RadioMenuChangeEvent<T> = {
     value: T;
@@ -173,7 +159,7 @@ declare type RequiredKeys<Type, Key extends keyof Type> = Omit<Type, Key> & Requ
 
 declare type Resolvable<TValue = unknown, TArgs extends ReadonlyArray<unknown> = []> = TValue extends any ? TValue | ((...args: TArgs) => TValue) : never;
 
-export declare function Select<T extends NonNil>({ options, value, invalidValueOption, onChange, placeholder, ...selectAttrs }: SelectProps<T>): JSX_2.Element;
+export declare function Select<T extends NonNil>({ options, value, invalidValueOption, onChange, placeholder, ...selectAttrs }: SelectProps<T>): JSX.Element;
 
 export declare interface SelectChangeEvent<T> {
     value: T;
@@ -207,14 +193,12 @@ export declare type SelectProps<T extends NonNil> = OverrideProps<'select', {
     placeholder?: ReactNode;
 }, 'children' | 'defaultValue'>;
 
-export declare const TextArea: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "initialHeight"> & {
-/** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
-initialHeight?: string | undefined;
-} & RefAttributes<TextAreaRef>>;
+export declare function TextArea({ onInput, style, initialHeight, ref: fwdRef, ...rest }: TextAreaProps): JSX.Element;
 
 export declare type TextAreaProps = OverrideProps<'textarea', {
     /** Initial/minimum height. "0" or "auto" are good choices. Defaults to "auto" */
     initialHeight?: string;
+    ref?: Ref<TextAreaRef>;
 }>;
 
 export declare type TextAreaRef = {
@@ -222,7 +206,7 @@ export declare type TextAreaRef = {
     adjustHeight: VoidFn;
 };
 
-export declare function TextInput({ formatOnChange, ...otherProps }: TextInputProps): JSX_2.Element;
+export declare function TextInput({ formatOnChange, ...otherProps }: TextInputProps): JSX.Element;
 
 export declare type TextInputProps = Omit<InputProps, 'text'>;
 

package/dist/react-basic-inputs.js

@@ -1,38 +1,38 @@
-var z = Object.defineProperty;
-var q = (e, t, n) => t in e ? z(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 C, 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(() => {
+var j = Object.defineProperty;
+var z = (e, t, n) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var C = (e, t, n) => (z(e, typeof t != "symbol" ? t + "" : t, n), n);
+import { jsx as v, jsxs as R } from "react/jsx-runtime";
+import { useDebugValue as q, useRef as b, useInsertionEffect as G, useEffect as k, useMemo as P, useCallback as T, createElement as Z, useState as O, useImperativeHandle as W, useLayoutEffect as B, useId as J } from "react";
+const X = Object.freeze(() => {
 });
-function ee(e) {
+function Q(e) {
   return e;
 }
-let _;
-typeof window < "u" ? _ = (e) => {
-  G(e);
-  const t = h(ne);
-  Z(() => {
+let p;
+typeof window < "u" ? p = (e) => {
+  q(e);
+  const t = b(te);
+  G(() => {
     t.current = e;
   }, [e]);
-  const n = h(null);
+  const n = b(null);
   return n.current || (n.current = function() {
     return t.current.apply(this, arguments);
   }), n.current;
-} : _ = Q;
-function te(e) {
-  return _(e);
+} : p = X;
+function ee(e) {
+  return p(e);
 }
-function ne() {
+function te() {
   throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
 }
-function re() {
-  var e = h(!0);
+function ne() {
+  var e = b(!0);
   return e.current ? (e.current = !1, !0) : e.current;
 }
-var R = function(e, t) {
-  var n = re();
-  C(function() {
+var U = function(e, t) {
+  var n = ne();
+  k(function() {
     if (!n)
       return e();
   }, t);
@@ -40,7 +40,7 @@ var R = function(e, t) {
 function ue(e, ...t) {
   return typeof e == "function" ? e(...t) : e;
 }
-function se(e, t) {
+function re(e, t) {
   if (e.uniqueKey != null)
     return ue(e.uniqueKey, e, t);
   if (typeof e.value == "string")
@@ -55,101 +55,101 @@ function se(e, t) {
   }
   return String(t);
 }
-class H {
+class L {
   constructor() {
-    P(this, "_usedKeys", /* @__PURE__ */ new Map());
+    C(this, "_usedKeys", /* @__PURE__ */ new Map());
   }
   fix(t, n) {
-    let r = se(t, n);
+    let u = re(t, n);
     for (; ; ) {
-      let u = this._usedKeys.get(r);
-      if (u === void 0) {
-        this._usedKeys.set(r, 1);
+      let r = this._usedKeys.get(u);
+      if (r === void 0) {
+        this._usedKeys.set(u, 1);
         break;
       }
-      this._usedKeys.set(r, ++u), r = `${r}(${u})`;
+      this._usedKeys.set(u, ++r), u = `${u}(${r})`;
     }
-    return r;
+    return u;
   }
 }
-const ce = (e) => ({
+const se = (e) => ({
   value: e,
   text: String(e),
   disabled: !0,
-  key: ae
-}), le = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", ae = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
-function ie({
+  key: le
+}), ce = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", le = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
+function ae({
   options: e,
   value: t,
-  invalidValueOption: n = ce,
-  onChange: r,
-  placeholder: u,
+  invalidValueOption: n = se,
+  onChange: u,
+  placeholder: r,
   ...s
 }) {
-  const i = t == null, f = F(() => t != null && e.some((c) => c.value == t), [e, t]), o = F(() => t == null || !n ? null : n(t), [n, t]), l = F(() => {
+  const i = t == null, f = P(() => t != null && e.some((m) => m.value == t), [e, t]), c = P(() => t == null || !n ? null : n(t), [n, t]), o = P(() => {
     if (f)
       return e;
-    const c = [...e];
-    return i ? u != null && c.unshift({ text: u, hidden: !0, value: null, key: le }) : o && c.push(o), c;
-  }, [f, e, i, o, u]), d = te((c) => {
-    const g = c.target.selectedIndex, O = l[g];
-    r == null || r({
-      value: O.value,
+    const m = [...e];
+    return i ? r != null && m.unshift({ text: r, hidden: !0, value: null, key: ce }) : c && m.push(c), m;
+  }, [f, e, i, c, r]), l = ee((m) => {
+    const h = m.target.selectedIndex, S = o[h];
+    u == null || u({
+      value: S.value,
       // option: opt,
       // event: ev,
-      index: g,
+      index: h,
       type: "change",
-      timeStamp: c.timeStamp,
-      target: c.target
+      timeStamp: m.timeStamp,
+      target: m.target
     });
-  }), a = h(null), x = T(() => {
-    a.current && (a.current.selectedIndex < 0 || l[a.current.selectedIndex].value != t) && (a.current.selectedIndex = l.findIndex((c) => c.value == t));
-  }, [l, t]), N = (c) => {
-    a.current = c, x();
+  }), d = b(null), x = T(() => {
+    d.current && (d.current.selectedIndex < 0 || o[d.current.selectedIndex].value != t) && (d.current.selectedIndex = o.findIndex((m) => m.value == t));
+  }, [o, t]), a = (m) => {
+    d.current = m, x();
   };
-  R(() => {
+  U(() => {
     x();
   }, [x]);
-  const m = new H();
-  return /* @__PURE__ */ v("select", { ...s, onChange: d, ref: N, children: l.map((c, g) => {
-    const { value: O, text: b, uniqueKey: S, ...y } = c, V = m.fix(c, g);
-    return /* @__PURE__ */ W("option", { ...y, key: V, value: V }, c.text);
+  const N = new L();
+  return /* @__PURE__ */ v("select", { ...s, onChange: l, ref: a, children: o.map((m, h) => {
+    const { value: S, text: K, uniqueKey: A, ...g } = m, I = N.fix(m, h);
+    return /* @__PURE__ */ Z("option", { ...g, key: I, value: I }, m.text);
   }) });
 }
-function fe(e) {
+function ie(e) {
   return e ? String(e).replace(/\s+/gu, " ").trim() : "";
 }
-function oe(e) {
+function fe(e) {
   try {
     return e.toLocaleString("en-US", { useGrouping: !1, maximumFractionDigits: 20 });
   } catch {
     return e.toFixed(14).replace(/\.?0+$/, "");
   }
 }
-function de(e) {
+function oe(e) {
   return e ? e === "∞" || e === "+∞" ? Number.POSITIVE_INFINITY : e === "-∞" ? Number.NEGATIVE_INFINITY : Number.parseFloat(e) : Number.NaN;
 }
-function Y(e) {
-  return Number.isNaN(e) ? "" : e === Number.POSITIVE_INFINITY ? "∞" : e === Number.NEGATIVE_INFINITY ? "-∞" : oe(e);
+function H(e) {
+  return Number.isNaN(e) ? "" : e === Number.POSITIVE_INFINITY ? "∞" : e === Number.NEGATIVE_INFINITY ? "-∞" : fe(e);
 }
-function xe(e) {
-  return e ? Y(Number.parseFloat(e)) : "";
+function de(e) {
+  return e ? H(Number.parseFloat(e)) : "";
 }
-function I(e, t = 2) {
+function y(e, t = 2) {
   return String(e).padStart(t, "0");
 }
-const j = k(function({ value: t = "", onPaste: n, onChange: r, onInput: u, onBlur: s, formatOnChange: i = ee, ...f }, o) {
-  const [l, d] = D(t), a = h(t), x = h(!1);
-  R(() => {
-    d(t), x.current = !1, a.current = t;
-  }, [t]);
-  const N = {
+function Y({ value: e = "", onPaste: t, onChange: n, onInput: u, onBlur: r, formatOnChange: s = Q, ref: i, ...f }) {
+  const [c, o] = O(e), l = b(e), d = b(!1);
+  U(() => {
+    o(e), d.current = !1, l.current = e;
+  }, [e]);
+  const x = {
     type: "text",
     ...f,
-    ref: o,
-    value: l,
-    onChange: (m) => {
-      d(m.target.value);
+    ref: i,
+    value: c,
+    onChange: (a) => {
+      o(a.target.value);
     },
     // TODO: fire a change event onPaste ?
     // formatOnPaste?
@@ -167,157 +167,159 @@ const j = k(function({ value: t = "", onPaste: n, onChange: r, onInput: u, onBlu
     //     // ev.preventDefault()
     //     // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
     // },
-    onInput: (m) => {
-      x.current = !0, u == null || u(m);
+    onInput: (a) => {
+      d.current = !0, u == null || u(a);
     },
-    onBlur: (m) => {
-      const c = i(l);
-      x.current && (c !== a.current && (r == null || r({
+    onBlur: (a) => {
+      const N = s(c);
+      d.current && (N !== l.current && (n == null || n({
         type: "change",
-        value: c,
-        timeStamp: m.timeStamp,
-        target: m.target
-      }), a.current = c), c !== m.target.value && d(c)), s == null || s(m);
+        value: N,
+        timeStamp: a.timeStamp,
+        target: a.target
+      }), l.current = N), N !== a.target.value && o(N)), r == null || r(a);
     }
   };
-  return /* @__PURE__ */ v("input", { ...N });
-});
-function Oe({ formatOnChange: e = fe, ...t }) {
-  return /* @__PURE__ */ v(j, { formatOnChange: e, ...t, type: "text" });
+  return /* @__PURE__ */ v("input", { ...x });
 }
-const Se = k(function({
-  onInput: t,
-  style: n,
-  initialHeight: r = "auto",
-  ...u
-}, s) {
-  const i = h(null), [f, o] = D(r), l = T(() => {
-    const a = i.current;
-    if (!a)
+function Oe({ formatOnChange: e = ie, ...t }) {
+  return /* @__PURE__ */ v(Y, { formatOnChange: e, ...t, type: "text" });
+}
+function Ee({
+  onInput: e,
+  style: t,
+  initialHeight: n = "auto",
+  ref: u,
+  ...r
+}) {
+  const s = b(null), [i, f] = O(n), c = T(() => {
+    const l = s.current;
+    if (!l)
       return;
-    a.style.height = r;
-    const x = `${a.scrollHeight}px`;
-    o(x), a.style.height = x;
-  }, [r]);
-  B(s, () => ({
-    element: i.current,
-    adjustHeight: l
-  }), [l]);
-  const d = _((a) => {
-    l(), t == null || t(a);
+    l.style.height = n;
+    const d = `${l.scrollHeight}px`;
+    f(d), l.style.height = d;
+  }, [n]);
+  W(u, () => ({
+    element: s.current,
+    adjustHeight: c
+  }), [c]);
+  const o = p((l) => {
+    c(), e == null || e(l);
   });
-  return J(() => {
-    l();
-    const a = i.current;
-    if (!a)
+  return B(() => {
+    c();
+    const l = s.current;
+    if (!l)
       return;
-    const x = new ResizeObserver((N) => {
-      l();
+    const d = new ResizeObserver((x) => {
+      c();
     });
-    return x.observe(a), () => {
-      x.unobserve(a);
+    return d.observe(l), () => {
+      d.unobserve(l);
     };
-  }, [l]), /* @__PURE__ */ v("textarea", { ...u, style: {
+  }, [c]), /* @__PURE__ */ v("textarea", { ...r, style: {
     overflow: "hidden",
     // these 2 styles aren't needed if the caller sets them in CSS.
     resize: "none",
-    ...n,
-    height: f
-  }, onInput: d, ref: i });
-});
-function Ee(e) {
-  const t = X(), n = e.name ?? t, r = e.valueEquals ?? Object.is, u = e.options ?? [], s = new H(), i = _((f) => {
-    const o = Number(f.target.value), l = u[o];
-    l != null && e.onChange != null && e.onChange({
-      value: l.value,
-      index: o,
+    ...t,
+    height: i
+  }, onInput: o, ref: s });
+}
+function De(e) {
+  const t = J(), n = e.name ?? t, u = e.valueEquals ?? Object.is, r = e.options ?? [], s = new L(), i = p((f) => {
+    const c = Number(f.target.value), o = r[c];
+    o != null && e.onChange != null && e.onChange({
+      value: o.value,
+      index: c,
       type: "change",
       timeStamp: f.timeStamp,
       target: f.target
     });
   });
-  return /* @__PURE__ */ v("ul", { className: e.className, children: u.map((f, o) => {
-    const { value: l, text: d, key: a, itemClassName: x, labelClassName: N, inputClassName: m, textClassName: c, ...g } = f, O = s.fix(f, o);
-    return e.value !== void 0 && (g.checked = r(l, e.value)), /* @__PURE__ */ v("li", { className: x, "aria-disabled": g.disabled, children: /* @__PURE__ */ L("label", { className: N, children: [
-      /* @__PURE__ */ v("input", { ...g, className: m, value: o, onChange: i, name: n, type: "radio" }),
-      /* @__PURE__ */ v("span", { className: c, children: d })
-    ] }) }, O);
+  return /* @__PURE__ */ v("ul", { className: e.className, children: r.map((f, c) => {
+    const { value: o, text: l, key: d, itemClassName: x, labelClassName: a, inputClassName: N, textClassName: m, ...h } = f, S = s.fix(f, c);
+    return e.value !== void 0 && (h.checked = u(o, e.value)), /* @__PURE__ */ v("li", { className: x, "aria-disabled": h.disabled, children: /* @__PURE__ */ R("label", { className: a, children: [
+      /* @__PURE__ */ v("input", { ...h, className: N, value: c, onChange: i, name: n, type: "radio" }),
+      /* @__PURE__ */ v("span", { className: m, children: l })
+    ] }) }, S);
   }) });
 }
-function U() {
-  return h(null);
-}
-function K(e) {
+function V(e) {
   e.current != null && (clearTimeout(e.current), e.current = null);
 }
-const De = ({
+const pe = ({
   value: e,
   onChange: t,
   debounce: n = 500,
-  ...r
+  ...u
 }) => {
-  const u = U(), s = U();
-  R(() => {
-    K(s), u.current != null && (u.current.value = e);
+  const r = b(null), [s, i] = O(e);
+  k(() => {
+    V(r), i(e);
   }, [e]);
-  const i = () => {
-    u.current != null && u.current.value !== e && (t == null || t({ value: u.current.value }));
+  const f = () => {
+    s !== e && (t == null || t({ value: s }));
   };
-  return /* @__PURE__ */ v("input", { ...r, ref: u, defaultValue: e, onInput: () => {
-    K(s), s.current = setTimeout(i, n);
+  return /* @__PURE__ */ v("input", { ...u, value: s, onChange: (c) => {
+    i(c.currentTarget.value), V(r), r.current = setTimeout(f, n);
   }, onBlur: () => {
-    K(s), i();
+    V(r), f();
   } });
 };
 function _e({ onClick: e, ...t }) {
-  return t.onClick = (n) => {
-    n.preventDefault(), e == null || e(n);
-  }, /* @__PURE__ */ v("button", { type: "button", ...t });
+  return /* @__PURE__ */ v("button", { type: "button", ...t, onClick: (u) => {
+    u.preventDefault(), e == null || e(u);
+  } });
 }
-function E(e, t) {
+function D(e, t) {
   const n = e instanceof Date ? e : new Date(e);
-  let r = `${n.getFullYear()}-${I(n.getMonth() + 1)}-${I(n.getDate())}T${I(n.getHours())}:${I(n.getMinutes())}`;
-  const u = (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 || u)) && (r += `:${I(n.getSeconds())}`, u && (r += `.${I(n.getMilliseconds(), 3)}`)), t != null && t.offset && (r += p(-n.getTimezoneOffset())), r;
+  let u = `${n.getFullYear()}-${y(n.getMonth() + 1)}-${y(n.getDate())}T${y(n.getHours())}:${y(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 += `:${y(n.getSeconds())}`, r && (u += `.${y(n.getMilliseconds(), 3)}`)), t != null && t.offset && (u += F(-n.getTimezoneOffset())), u;
 }
-function p(e) {
+function F(e) {
   if (e == null)
     return "";
   if (e === 0)
     return "Z";
-  const t = e > 0 ? "+" : "-", n = Math.floor(Math.abs(e) / 60), r = Math.abs(e) % 60;
-  return `${t}${I(n)}:${I(r)}`;
+  const t = e > 0 ? "+" : "-", n = Math.floor(Math.abs(e) / 60), u = Math.abs(e) % 60;
+  return `${t}${y(n)}:${y(u)}`;
 }
-const me = /^(\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) {
+const me = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?)(Z|[+-]\d{2}:\d{2})?$/, xe = { offset: !1, seconds: !1, milliseconds: !1 };
+function ve(e) {
   return e == null || Number.isNaN(e) || e === "" || Number.isNaN(+new Date(e));
 }
-function M(e) {
+function _(e) {
   if (typeof e == "string") {
     const t = e.match(me);
     if (t)
       return t[1];
   }
-  return Ne(e) ? "" : E(e, ve);
+  return ve(e) ? "" : D(e, xe);
 }
-const w = { offset: !1 };
-function Me({ value: e, defaultValue: t, min: n, max: r, onChange: u, ...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)), r != null && (s.max = E(r, w)), u != null && (s.onChange = (i) => {
-    u({
-      value: i.currentTarget.value
+const M = { offset: !1 };
+function Me({ value: e, defaultValue: t, min: n, max: u, onChange: r, ...s }) {
+  const i = e !== void 0 ? e === null ? "" : D(e, M) : s.value, f = t != null ? D(t, M) : s.defaultValue, c = n != null ? D(n, M) : s.min, o = u != null ? D(u, M) : s.max, l = r == null ? s.onChange : (d) => {
+    const x = d.currentTarget.value, a = x === "" ? null : new Date(x);
+    r({
+      value: x,
+      date: a != null && !Number.isNaN(+a) ? a : null,
+      isoString: a != null && !Number.isNaN(+a) ? a.toISOString() : ""
     });
-  }), /* @__PURE__ */ v("input", { type: "datetime-local", ...s });
+  };
+  return /* @__PURE__ */ v("input", { type: "datetime-local", ...s, value: i, defaultValue: f, min: c, max: o, onChange: l });
 }
-function ge(e) {
-  const t = h(e);
+function Ne(e) {
+  const t = b(e);
   return t.current = e, t;
 }
-function be(e, t) {
-  const n = h(e), r = ge(t);
-  return C(() => {
-    Object.is(n.current, e) || (r.current(), n.current = e);
-  }, [r, e]), T((u) => {
-    n.current = u;
+function ge(e, t) {
+  const n = b(e), u = Ne(t);
+  return k(() => {
+    Object.is(n.current, e) || (u.current(), n.current = e);
+  }, [u, e]), T((r) => {
+    n.current = r;
   }, []);
 }
 const he = [
@@ -398,7 +400,7 @@ const he = [
   // Kiribati
   { value: 14 * 60, text: "+14:00" }
 ];
-function $(e) {
+function w(e) {
   if (typeof e != "string" || e === "")
     return null;
   const t = e.match(/([+-])(\d{2}):(\d{2})|Z$/);
@@ -406,56 +408,62 @@ function $(e) {
     return null;
   if (t[0] === "Z")
     return 0;
-  const [, n, r, u] = t, s = Number(r) * 60 + Number(u);
+  const [, n, u, r] = t, s = Number(u) * 60 + Number(r);
   return n === "+" ? s : -s;
 }
-function A(e) {
+function $(e) {
   return e === "" ? null : -new Date(e).getTimezoneOffset();
 }
+function be(e, t, n) {
+  return e ? t : $(n);
+}
+function Ie(e, t, n) {
+  return F(be(e, t, n));
+}
 function we({
   value: e,
   defaultValue: t,
   min: n,
-  max: r,
-  onChange: u,
+  max: u,
+  onChange: r,
   ...s
 }) {
-  const [i, f] = D(() => $(e ?? t) !== null), [o, l] = D(() => $(e ?? t)), [d, a] = D(() => M(e ?? t)), x = be(e, () => {
-    f($(e) !== null), l($(e)), a(M(e));
-  }), N = T((b) => {
-    x(b), u == null || u({
-      value: b
+  const [i, f] = O(() => w(e ?? t) !== null), [c, o] = O(() => w(e ?? t)), [l, d] = O(() => _(e ?? t)), x = ge(e, () => {
+    f(w(e) !== null), o(w(e)), d(_(e));
+  }), a = T((g) => {
+    x(g), r == null || r({
+      value: g
     });
-  }, [u, x]);
-  n != null && (s.min = M(n)), r != null && (s.max = M(r));
-  const m = i ? o : A(d), c = T(
-    (b) => {
-      const S = b.currentTarget.value;
-      a(S), N(S + p(m));
+  }, [r, x]), N = n != null ? _(n) : s.min, m = u != null ? _(u) : s.max, h = i ? c : $(l), S = T(
+    (g) => {
+      const I = g.currentTarget.value;
+      d(I), a(I + Ie(i, c, I));
     },
-    [N, m]
-  ), g = T(
-    (b) => {
-      l(b.value), N(d + p(b.value));
+    [a, i, c]
+  ), K = T(
+    (g) => {
+      o(g.value), a(l + F(g.value));
     },
-    [N, d]
-  ), O = T(
-    (b) => {
-      const S = b.currentTarget.checked;
-      f(S);
-      let y;
-      S ? d && o === null ? (y = A(d), l(y)) : y = o : y = A(d), N(d + p(y));
+    [a, l]
+  ), A = T(
+    (g) => {
+      const I = g.currentTarget.checked;
+      f(I);
+      let E;
+      I ? l && c === null ? (E = $(l), o(E)) : E = c : E = $(l), a(l + F(E));
     },
-    [o, d, N]
+    [c, l, a]
   );
-  return /* @__PURE__ */ L("span", { children: [
+  return /* @__PURE__ */ R("span", { children: [
     /* @__PURE__ */ v(
       "input",
       {
         type: "datetime-local",
         ...s,
-        value: d,
-        onChange: c
+        min: N,
+        max: m,
+        value: l,
+        onChange: S
       }
     ),
     /* @__PURE__ */ v(
@@ -464,43 +472,43 @@ function we({
         type: "checkbox",
         title: i ? "Use UTC offset from this device" : "Enable UTC offset selection",
         checked: i,
-        onChange: O
+        onChange: A
       }
     ),
     /* @__PURE__ */ v(
-      ie,
+      ae,
       {
-        value: m,
-        onChange: g,
+        value: h,
+        onChange: K,
         disabled: !i,
         options: he
       }
     )
   ] });
 }
-const $e = k(function({ placeholder: t, formatOnChange: n = xe, onChange: r, value: u, ...s }, i) {
-  const f = {
+function $e({ placeholder: e, formatOnChange: t = de, onChange: n, value: u, ref: r, ...s }) {
+  const i = {
     inputMode: "decimal",
     ...s,
-    formatOnChange: n,
+    formatOnChange: t,
     type: "number"
   };
-  return u !== void 0 && (f.value = Y(u)), t != null && (f.placeholder = String(t)), r != null && (f.onChange = (o) => {
-    r({
-      ...o,
-      value: de(o.value)
+  return u !== void 0 && (i.value = H(u)), e != null && (i.placeholder = String(e)), n != null && (i.onChange = (f) => {
+    n({
+      ...f,
+      value: oe(f.value)
     });
-  }), /* @__PURE__ */ v(j, { ...f, ref: i });
-});
+  }), /* @__PURE__ */ v(Y, { ...i, ref: r });
+}
 export {
   _e as ActionButton,
   Me as DatetimeLocalInput,
   we as DatetimeOffsetInput,
-  De as DebouncedInput,
-  j as Input,
+  pe as DebouncedInput,
+  Y as Input,
   $e as NumberInput,
-  Ee as RadioMenu,
-  ie as Select,
-  Se as TextArea,
+  De as RadioMenu,
+  ae as Select,
+  Ee as TextArea,
   Oe as TextInput
 };

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

@@ -1 +1 @@
-(function(o,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):(o=typeof globalThis<"u"?globalThis:o||self,f(o["@mpen/react-basic-inputs"]={},o.jsxRuntime,o.React))})(this,function(o,f,r){"use strict";var ve=Object.defineProperty;var be=(o,f,r)=>f in o?ve(o,f,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[f]=r;var L=(o,f,r)=>(be(o,typeof f!="symbol"?f+"":f,r),r);const U=Object.freeze(()=>{});function q(e){return e}let E;typeof window<"u"?E=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}:E=U;function H(e){return E(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 d=t==null,x=r.useMemo(()=>t!=null&&e.some(c=>c.value==t),[e,t]),m=r.useMemo(()=>t==null||!n?null:n(t),[n,t]),i=r.useMemo(()=>{if(x)return e;const c=[...e];return d?s!=null&&c.unshift({text:s,hidden:!0,value:null,key:W}):m&&c.push(m),c},[x,e,d,m,s]),v=H(c=>{const h=c.target.selectedIndex,S=i[h];u==null||u({value:S.value,index:h,type:"change",timeStamp:c.timeStamp,target:c.target})}),a=r.useRef(null),b=r.useCallback(()=>{a.current&&(a.current.selectedIndex<0||i[a.current.selectedIndex].value!=t)&&(a.current.selectedIndex=i.findIndex(c=>c.value==t))},[i,t]),I=c=>{a.current=c,b()};p(()=>{b()},[b]);const N=new K;return f.jsx("select",{...l,onChange:v,ref:I,children:i.map((c,h)=>{const{value:S,text:g,uniqueKey:O,...T}=c,P=N.fix(c,h);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:d=q,...x},m){const[i,v]=r.useState(t),a=r.useRef(t),b=r.useRef(!1);p(()=>{v(t),b.current=!1,a.current=t},[t]);const I={type:"text",...x,ref:m,value:i,onChange:N=>{v(N.target.value)},onInput:N=>{b.current=!0,s==null||s(N)},onBlur:N=>{const c=d(i);b.current&&(c!==a.current&&(u==null||u({type:"change",value:c,timeStamp:N.timeStamp,target:N.target}),a.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 d=r.useRef(null),[x,m]=r.useState(u),i=r.useCallback(()=>{const a=d.current;if(!a)return;a.style.height=u;const b=`${a.scrollHeight}px`;m(b),a.style.height=b},[u]);r.useImperativeHandle(l,()=>({element:d.current,adjustHeight:i}),[i]);const v=E(a=>{i(),t==null||t(a)});return r.useLayoutEffect(()=>{i();const a=d.current;if(!a)return;const b=new ResizeObserver(I=>{i()});return b.observe(a),()=>{b.unobserve(a)}},[i]),f.jsx("textarea",{...s,style:{overflow:"hidden",resize:"none",...n,height:x},onInput:v,ref:d})});function ue(e){const t=r.useId(),n=e.name??t,u=e.valueEquals??Object.is,s=e.options??[],l=new K,d=E(x=>{const m=Number(x.target.value),i=s[m];i!=null&&e.onChange!=null&&e.onChange({value:i.value,index:m,type:"change",timeStamp:x.timeStamp,target:x.target})});return f.jsx("ul",{className:e.className,children:s.map((x,m)=>{const{value:i,text:v,key:a,itemClassName:b,labelClassName:I,inputClassName:N,textClassName:c,...h}=x,S=l.fix(x,m);return e.value!==void 0&&(h.checked=u(i,e.value)),f.jsx("li",{className:b,"aria-disabled":h.disabled,children:f.jsxs("label",{className:I,children:[f.jsx("input",{...h,className:N,value:m,onChange:d,name:n,type:"radio"}),f.jsx("span",{className:c,children:v})]})},S)})})}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 d=()=>{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(d,n)},onBlur:()=>{A(l),d()}})};function se({onClick:e,...t}){return t.onClick=n=>{n.preventDefault(),e==null||e(n)},f.jsx("button",{type:"button",...t})}function D(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)?"":D(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?"":D(e,w)),t!=null&&(l.defaultValue=D(t,w)),n!=null&&(l.min=D(n,w)),u!=null&&(l.max=D(u,w)),s!=null&&(l.onChange=d=>{s({value:d.currentTarget.value})}),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[d,x]=r.useState(()=>k(e??t)!==null),[m,i]=r.useState(()=>k(e??t)),[v,a]=r.useState(()=>_(e??t)),b=oe(e,()=>{x(k(e)!==null),i(k(e)),a(_(e))}),I=r.useCallback(g=>{b(g),s==null||s({value:g})},[s,b]);n!=null&&(l.min=_(n)),u!=null&&(l.max=_(u));const N=d?m:F(v),c=r.useCallback(g=>{const O=g.currentTarget.value;a(O),I(O+M(N))},[I,N]),h=r.useCallback(g=>{i(g.value),I(v+M(g.value))},[I,v]),S=r.useCallback(g=>{const O=g.currentTarget.checked;x(O);let T;O?v&&m===null?(T=F(v),i(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:d?"Use UTC offset from this device":"Enable UTC offset selection",checked:d,onChange:S}),f.jsx(C,{value:N,onChange:h,disabled:!d,options:de})]})}const me=r.forwardRef(function({placeholder:t,formatOnChange:n=ee,onChange:u,value:s,...l},d){const x={inputMode:"decimal",...l,formatOnChange:n,type:"number"};return s!==void 0&&(x.value=V(s)),t!=null&&(x.placeholder=String(t)),u!=null&&(x.onChange=m=>{u({...m,value:R(m.value)})}),f.jsx($,{...x,ref:d})});o.ActionButton=se,o.DatetimeLocalInput=ie,o.DatetimeOffsetInput=xe,o.DebouncedInput=re,o.Input=$,o.NumberInput=me,o.RadioMenu=ue,o.Select=C,o.TextArea=ne,o.TextInput=te,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,f(m["@mpen/react-basic-inputs"]={},m.jsxRuntime,m.React))})(this,function(m,f,r){"use strict";var be=Object.defineProperty;var ge=(m,f,r)=>f in m?be(m,f,{enumerable:!0,configurable:!0,writable:!0,value:r}):m[f]=r;var L=(m,f,r)=>(ge(m,typeof f!="symbol"?f+"":f,r),r);const U=Object.freeze(()=>{});function q(e){return e}let O;typeof window<"u"?O=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}:O=U;function H(e){return O(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 F{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 V({options:e,value:t,invalidValueOption:n=B,onChange:u,placeholder:s,...l}){const o=t==null,d=r.useMemo(()=>t!=null&&e.some(N=>N.value==t),[e,t]),c=r.useMemo(()=>t==null||!n?null:n(t),[n,t]),x=r.useMemo(()=>{if(d)return e;const N=[...e];return o?s!=null&&N.unshift({text:s,hidden:!0,value:null,key:W}):c&&N.push(c),N},[d,e,o,c,s]),a=H(N=>{const I=N.target.selectedIndex,T=x[I];u==null||u({value:T.value,index:I,type:"change",timeStamp:N.timeStamp,target:N.target})}),v=r.useRef(null),b=r.useCallback(()=>{v.current&&(v.current.selectedIndex<0||x[v.current.selectedIndex].value!=t)&&(v.current.selectedIndex=x.findIndex(N=>N.value==t))},[x,t]),i=N=>{v.current=N,b()};P(()=>{b()},[b]);const g=new F;return f.jsx("select",{...l,onChange:a,ref:i,children:x.map((N,I)=>{const{value:T,text:K,uniqueKey:j,...h}=N,S=g.fix(N,I);return r.createElement("option",{...h,key:S,value:S},N.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 A(e){return Number.isNaN(e)?"":e===Number.POSITIVE_INFINITY?"∞":e===Number.NEGATIVE_INFINITY?"-∞":Q(e)}function ee(e){return e?A(Number.parseFloat(e)):""}function y(e,t=2){return String(e).padStart(t,"0")}function C({value:e="",onPaste:t,onChange:n,onInput:u,onBlur:s,formatOnChange:l=q,ref:o,...d}){const[c,x]=r.useState(e),a=r.useRef(e),v=r.useRef(!1);P(()=>{x(e),v.current=!1,a.current=e},[e]);const b={type:"text",...d,ref:o,value:c,onChange:i=>{x(i.target.value)},onInput:i=>{v.current=!0,u==null||u(i)},onBlur:i=>{const g=l(c);v.current&&(g!==a.current&&(n==null||n({type:"change",value:g,timeStamp:i.timeStamp,target:i.target}),a.current=g),g!==i.target.value&&x(g)),s==null||s(i)}};return f.jsx("input",{...b})}function te({formatOnChange:e=X,...t}){return f.jsx(C,{formatOnChange:e,...t,type:"text"})}function ne({onInput:e,style:t,initialHeight:n="auto",ref:u,...s}){const l=r.useRef(null),[o,d]=r.useState(n),c=r.useCallback(()=>{const a=l.current;if(!a)return;a.style.height=n;const v=`${a.scrollHeight}px`;d(v),a.style.height=v},[n]);r.useImperativeHandle(u,()=>({element:l.current,adjustHeight:c}),[c]);const x=O(a=>{c(),e==null||e(a)});return r.useLayoutEffect(()=>{c();const a=l.current;if(!a)return;const v=new ResizeObserver(b=>{c()});return v.observe(a),()=>{v.unobserve(a)}},[c]),f.jsx("textarea",{...s,style:{overflow:"hidden",resize:"none",...t,height:o},onInput:x,ref:l})}function ue(e){const t=r.useId(),n=e.name??t,u=e.valueEquals??Object.is,s=e.options??[],l=new F,o=O(d=>{const c=Number(d.target.value),x=s[c];x!=null&&e.onChange!=null&&e.onChange({value:x.value,index:c,type:"change",timeStamp:d.timeStamp,target:d.target})});return f.jsx("ul",{className:e.className,children:s.map((d,c)=>{const{value:x,text:a,key:v,itemClassName:b,labelClassName:i,inputClassName:g,textClassName:N,...I}=d,T=l.fix(d,c);return e.value!==void 0&&(I.checked=u(x,e.value)),f.jsx("li",{className:b,"aria-disabled":I.disabled,children:f.jsxs("label",{className:i,children:[f.jsx("input",{...I,className:g,value:c,onChange:o,name:n,type:"radio"}),f.jsx("span",{className:N,children:a})]})},T)})})}function $(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const re=({value:e,onChange:t,debounce:n=500,...u})=>{const s=r.useRef(null),[l,o]=r.useState(e);r.useEffect(()=>{$(s),o(e)},[e]);const d=()=>{l!==e&&(t==null||t({value:l}))};return f.jsx("input",{...u,value:l,onChange:c=>{o(c.currentTarget.value),$(s),s.current=setTimeout(d,n)},onBlur:()=>{$(s),d()}})};function se({onClick:e,...t}){const n=u=>{u.preventDefault(),e==null||e(u)};return f.jsx("button",{type:"button",...t,onClick:n})}function E(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+=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}${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})?$/,ce={offset:!1,seconds:!1,milliseconds:!1};function ae(e){return e==null||Number.isNaN(e)||e===""||Number.isNaN(+new Date(e))}function M(e){if(typeof e=="string"){const t=e.match(le);if(t)return t[1]}return ae(e)?"":E(e,ce)}const _={offset:!1};function fe({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){const o=e!==void 0?e===null?"":E(e,_):l.value,d=t!=null?E(t,_):l.defaultValue,c=n!=null?E(n,_):l.min,x=u!=null?E(u,_):l.max,a=s==null?l.onChange:v=>{const b=v.currentTarget.value,i=b===""?null:new Date(b);s({value:b,date:i!=null&&!Number.isNaN(+i)?i:null,isoString:i!=null&&!Number.isNaN(+i)?i.toISOString():""})};return f.jsx("input",{type:"datetime-local",...l,value:o,defaultValue:d,min:c,max:x,onChange:a})}function ie(e){const t=r.useRef(e);return t.current=e,t}function oe(e,t){const n=r.useRef(e),u=ie(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 w(e){return e===""?null:-new Date(e).getTimezoneOffset()}function me(e,t,n){return e?t:w(n)}function xe(e,t,n){return p(me(e,t,n))}function ve({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){const[o,d]=r.useState(()=>k(e??t)!==null),[c,x]=r.useState(()=>k(e??t)),[a,v]=r.useState(()=>M(e??t)),b=oe(e,()=>{d(k(e)!==null),x(k(e)),v(M(e))}),i=r.useCallback(h=>{b(h),s==null||s({value:h})},[s,b]),g=n!=null?M(n):l.min,N=u!=null?M(u):l.max,I=o?c:w(a),T=r.useCallback(h=>{const S=h.currentTarget.value;v(S),i(S+xe(o,c,S))},[i,o,c]),K=r.useCallback(h=>{x(h.value),i(a+p(h.value))},[i,a]),j=r.useCallback(h=>{const S=h.currentTarget.checked;d(S);let D;S?a&&c===null?(D=w(a),x(D)):D=c:D=w(a),i(a+p(D))},[c,a,i]);return f.jsxs("span",{children:[f.jsx("input",{type:"datetime-local",...l,min:g,max:N,value:a,onChange:T}),f.jsx("input",{type:"checkbox",title:o?"Use UTC offset from this device":"Enable UTC offset selection",checked:o,onChange:j}),f.jsx(V,{value:I,onChange:K,disabled:!o,options:de})]})}function Ne({placeholder:e,formatOnChange:t=ee,onChange:n,value:u,ref:s,...l}){const o={inputMode:"decimal",...l,formatOnChange:t,type:"number"};return u!==void 0&&(o.value=A(u)),e!=null&&(o.placeholder=String(e)),n!=null&&(o.onChange=d=>{n({...d,value:R(d.value)})}),f.jsx(C,{...o,ref:s})}m.ActionButton=se,m.DatetimeLocalInput=fe,m.DatetimeOffsetInput=ve,m.DebouncedInput=re,m.Input=C,m.NumberInput=Ne,m.RadioMenu=ue,m.Select=V,m.TextArea=ne,m.TextInput=te,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mpen/react-basic-inputs",
   "private": false,
-  "version": "0.3.3",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "dist"
@@ -17,32 +17,34 @@
     "dev": "bun run --bun vite",
     "build": "run-p 'build:*'",
     "build:libs": "bun run --bun vite build",
+    "build:docs": "typedoc && hg addremove docs",
     "lint": "run-s 'lint:*'",
     "lint:ts": "bun run --bun tsc",
-    "lint:es": "bun run --bun eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:es": "bun run --bun eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "preview": "bun run --bun vite preview",
     "_prepublishOnly": "bun run --bun build",
     "_publish": "npm publish --access=public",
-    "build:docs": "typedoc && hg addremove docs",
-    "bump": "npm version patch && bun.exe run build && npm publish"
+    "bump": "npm version patch && bun run build && npm publish"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": ">=18"
   },
   "devDependencies": {
     "@mpen/is-type": "^0.1.11",
     "@types/bun": "^1.1.2",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-unused-imports": "^4.3.0",
     "npm-run-all": "^4.1.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19",
+    "react-dom": "^19",
     "react-use": "^17.5.0",
     "sass": "^1.77.2",
     "typedoc": "^0.26.6",