@mpen/react-basic-inputs 0.3.4 → 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,48 +1,48 @@
-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 x, jsxs as L } from "react/jsx-runtime";
-import { useDebugValue as G, useRef as h, useInsertionEffect as Z, useEffect as C, useMemo as K, useCallback as O, 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 ue() {
-  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 = ue();
-  C(function() {
+var U = function(e, t) {
+  var n = ne();
+  k(function() {
     if (!n)
       return e();
   }, t);
 };
-function re(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 re(e.uniqueKey, e, t);
+    return ue(e.uniqueKey, e, t);
   if (typeof e.value == "string")
     return e.value;
   if (typeof e.value == "number")
@@ -55,12 +55,12 @@ 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 u = se(t, n);
+    let u = re(t, n);
     for (; ; ) {
       let r = this._usedKeys.get(u);
       if (r === void 0) {
@@ -72,84 +72,84 @@ class H {
     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 fe({
+  key: le
+}), ce = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", le = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
+function ae({
   options: e,
   value: t,
-  invalidValueOption: n = ce,
+  invalidValueOption: n = se,
   onChange: u,
   placeholder: r,
   ...s
 }) {
-  const l = t == null, o = K(() => t != null && e.some((c) => c.value == t), [e, t]), i = K(() => t == null || !n ? null : n(t), [n, t]), a = K(() => {
-    if (o)
+  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 l ? r != null && c.unshift({ text: r, hidden: !0, value: null, key: le }) : i && c.push(i), c;
-  }, [o, e, l, i, r]), d = te((c) => {
-    const g = c.target.selectedIndex, S = a[g];
+    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
     });
-  }), f = h(null), m = O(() => {
-    f.current && (f.current.selectedIndex < 0 || a[f.current.selectedIndex].value != t) && (f.current.selectedIndex = a.findIndex((c) => c.value == t));
-  }, [a, t]), N = (c) => {
-    f.current = c, m();
+  }), 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(() => {
-    m();
-  }, [m]);
-  const v = new H();
-  return /* @__PURE__ */ x("select", { ...s, onChange: d, ref: N, children: a.map((c, g) => {
-    const { value: S, text: b, uniqueKey: y, ...T } = c, V = v.fix(c, g);
-    return /* @__PURE__ */ W("option", { ...T, key: V, value: V }, c.text);
+  U(() => {
+    x();
+  }, [x]);
+  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 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 me(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: u, onInput: r, onBlur: s, formatOnChange: l = ee, ...o }, i) {
-  const [a, d] = D(t), f = h(t), m = h(!1);
-  R(() => {
-    d(t), m.current = !1, f.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",
-    ...o,
+    ...f,
     ref: i,
-    value: a,
-    onChange: (v) => {
-      d(v.target.value);
+    value: c,
+    onChange: (a) => {
+      o(a.target.value);
     },
     // TODO: fire a change event onPaste ?
     // formatOnPaste?
@@ -167,118 +167,116 @@ const j = k(function({ value: t = "", onPaste: n, onChange: u, onInput: r, onBlu
     //     // ev.preventDefault()
     //     // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
     // },
-    onInput: (v) => {
-      m.current = !0, r == null || r(v);
+    onInput: (a) => {
+      d.current = !0, u == null || u(a);
     },
-    onBlur: (v) => {
-      const c = l(a);
-      m.current && (c !== f.current && (u == null || u({
+    onBlur: (a) => {
+      const N = s(c);
+      d.current && (N !== l.current && (n == null || n({
         type: "change",
-        value: c,
-        timeStamp: v.timeStamp,
-        target: v.target
-      }), f.current = c), c !== v.target.value && d(c)), s == null || s(v);
+        value: N,
+        timeStamp: a.timeStamp,
+        target: a.target
+      }), l.current = N), N !== a.target.value && o(N)), r == null || r(a);
     }
   };
-  return /* @__PURE__ */ x("input", { ...N });
-});
-function Ee({ formatOnChange: e = ie, ...t }) {
-  return /* @__PURE__ */ x(j, { formatOnChange: e, ...t, type: "text" });
+  return /* @__PURE__ */ v("input", { ...x });
 }
-const De = k(function({
-  onInput: t,
-  style: n,
-  initialHeight: u = "auto",
+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
-}, s) {
-  const l = h(null), [o, i] = D(u), a = O(() => {
-    const f = l.current;
-    if (!f)
+}) {
+  const s = b(null), [i, f] = O(n), c = T(() => {
+    const l = s.current;
+    if (!l)
       return;
-    f.style.height = u;
-    const m = `${f.scrollHeight}px`;
-    i(m), f.style.height = m;
-  }, [u]);
-  B(s, () => ({
-    element: l.current,
-    adjustHeight: a
-  }), [a]);
-  const d = _((f) => {
-    a(), t == null || t(f);
+    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(() => {
-    a();
-    const f = l.current;
-    if (!f)
+  return B(() => {
+    c();
+    const l = s.current;
+    if (!l)
       return;
-    const m = new ResizeObserver((N) => {
-      a();
+    const d = new ResizeObserver((x) => {
+      c();
     });
-    return m.observe(f), () => {
-      m.unobserve(f);
+    return d.observe(l), () => {
+      d.unobserve(l);
     };
-  }, [a]), /* @__PURE__ */ x("textarea", { ...r, 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: o
-  }, onInput: d, ref: l });
-});
-function _e(e) {
-  const t = X(), n = e.name ?? t, u = e.valueEquals ?? Object.is, r = e.options ?? [], s = new H(), l = _((o) => {
-    const i = Number(o.target.value), a = r[i];
-    a != null && e.onChange != null && e.onChange({
-      value: a.value,
-      index: i,
+    ...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: o.timeStamp,
-      target: o.target
+      timeStamp: f.timeStamp,
+      target: f.target
     });
   });
-  return /* @__PURE__ */ x("ul", { className: e.className, children: r.map((o, i) => {
-    const { value: a, text: d, key: f, itemClassName: m, labelClassName: N, inputClassName: v, textClassName: c, ...g } = o, S = s.fix(o, i);
-    return e.value !== void 0 && (g.checked = u(a, e.value)), /* @__PURE__ */ x("li", { className: m, "aria-disabled": g.disabled, children: /* @__PURE__ */ L("label", { className: N, children: [
-      /* @__PURE__ */ x("input", { ...g, className: v, value: i, onChange: l, name: n, type: "radio" }),
-      /* @__PURE__ */ x("span", { className: c, children: d })
+  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 A(e) {
+function V(e) {
   e.current != null && (clearTimeout(e.current), e.current = null);
 }
-const Me = ({
+const pe = ({
   value: e,
   onChange: t,
   debounce: n = 500,
   ...u
 }) => {
-  const r = U(), s = U();
-  R(() => {
-    A(s), r.current != null && (r.current.value = e);
+  const r = b(null), [s, i] = O(e);
+  k(() => {
+    V(r), i(e);
   }, [e]);
-  const l = () => {
-    r.current != null && r.current.value !== e && (t == null || t({ value: r.current.value }));
+  const f = () => {
+    s !== e && (t == null || t({ value: s }));
   };
-  return /* @__PURE__ */ x("input", { ...u, ref: r, defaultValue: e, onInput: () => {
-    A(s), s.current = setTimeout(l, n);
+  return /* @__PURE__ */ v("input", { ...u, value: s, onChange: (c) => {
+    i(c.currentTarget.value), V(r), r.current = setTimeout(f, n);
   }, onBlur: () => {
-    A(s), l();
+    V(r), f();
   } });
 };
-function pe({ onClick: e, ...t }) {
-  return t.onClick = (n) => {
-    n.preventDefault(), e == null || e(n);
-  }, /* @__PURE__ */ x("button", { type: "button", ...t });
+function _e({ onClick: e, ...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 u = `${n.getFullYear()}-${I(n.getMonth() + 1)}-${I(n.getDate())}T${I(n.getHours())}:${I(n.getMinutes())}`;
+  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 += `:${I(n.getSeconds())}`, r && (u += `.${I(n.getMilliseconds(), 3)}`)), t != null && t.offset && (u += F(-n.getTimezoneOffset())), u;
+  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 F(e) {
   if (e == null)
@@ -286,37 +284,41 @@ function F(e) {
   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)}`;
+  return `${t}${y(n)}:${y(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) {
+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(xe);
+    const t = e.match(me);
     if (t)
       return t[1];
   }
-  return Ne(e) ? "" : E(e, ve);
+  return ve(e) ? "" : D(e, xe);
 }
-const p = { offset: !1 };
-function we({ value: e, defaultValue: t, min: n, max: u, onChange: r, ...s }) {
-  return e !== void 0 && (s.value = e === null ? "" : E(e, p)), t != null && (s.defaultValue = E(t, p)), n != null && (s.min = E(n, p)), u != null && (s.max = E(u, p)), r != null && (s.onChange = (l) => {
+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: l.currentTarget.value
+      value: x,
+      date: a != null && !Number.isNaN(+a) ? a : null,
+      isoString: a != null && !Number.isNaN(+a) ? a.toISOString() : ""
     });
-  }), /* @__PURE__ */ x("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), u = ge(t);
-  return C(() => {
+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]), O((r) => {
+  }, [u, e]), T((r) => {
     n.current = r;
   }, []);
 }
@@ -412,13 +414,13 @@ function w(e) {
 function $(e) {
   return e === "" ? null : -new Date(e).getTimezoneOffset();
 }
-function Ie(e, t, n) {
+function be(e, t, n) {
   return e ? t : $(n);
 }
-function ye(e, t, n) {
-  return F(Ie(e, t, n));
+function Ie(e, t, n) {
+  return F(be(e, t, n));
 }
-function $e({
+function we({
   value: e,
   defaultValue: t,
   min: n,
@@ -426,87 +428,87 @@ function $e({
   onChange: r,
   ...s
 }) {
-  const [l, o] = D(() => w(e ?? t) !== null), [i, a] = D(() => w(e ?? t)), [d, f] = D(() => M(e ?? t)), m = be(e, () => {
-    o(w(e) !== null), a(w(e)), f(M(e));
-  }), N = O((b) => {
-    m(b), r == null || r({
-      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
     });
-  }, [r, m]);
-  n != null && (s.min = M(n)), u != null && (s.max = M(u));
-  const v = l ? i : $(d), c = O(
-    (b) => {
-      const y = b.currentTarget.value;
-      f(y), N(y + ye(l, i, y));
+  }, [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, l, i]
-  ), g = O(
-    (b) => {
-      a(b.value), N(d + F(b.value));
+    [a, i, c]
+  ), K = T(
+    (g) => {
+      o(g.value), a(l + F(g.value));
     },
-    [N, d]
-  ), S = O(
-    (b) => {
-      const y = b.currentTarget.checked;
-      o(y);
-      let T;
-      y ? d && i === null ? (T = $(d), a(T)) : T = i : T = $(d), N(d + F(T));
+    [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));
     },
-    [i, d, N]
+    [c, l, a]
   );
-  return /* @__PURE__ */ L("span", { children: [
-    /* @__PURE__ */ x(
+  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__ */ x(
+    /* @__PURE__ */ v(
       "input",
       {
         type: "checkbox",
-        title: l ? "Use UTC offset from this device" : "Enable UTC offset selection",
-        checked: l,
-        onChange: S
+        title: i ? "Use UTC offset from this device" : "Enable UTC offset selection",
+        checked: i,
+        onChange: A
       }
     ),
-    /* @__PURE__ */ x(
-      fe,
+    /* @__PURE__ */ v(
+      ae,
       {
-        value: v,
-        onChange: g,
-        disabled: !l,
+        value: h,
+        onChange: K,
+        disabled: !i,
         options: he
       }
     )
   ] });
 }
-const Fe = k(function({ placeholder: t, formatOnChange: n = me, onChange: u, value: r, ...s }, l) {
-  const o = {
+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 r !== void 0 && (o.value = Y(r)), t != null && (o.placeholder = String(t)), u != null && (o.onChange = (i) => {
-    u({
-      ...i,
-      value: de(i.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__ */ x(j, { ...o, ref: l });
-});
+  }), /* @__PURE__ */ v(Y, { ...i, ref: r });
+}
 export {
-  pe as ActionButton,
-  we as DatetimeLocalInput,
-  $e as DatetimeOffsetInput,
-  Me as DebouncedInput,
-  j as Input,
-  Fe as NumberInput,
-  _e as RadioMenu,
-  fe as Select,
-  De as TextArea,
-  Ee as TextInput
+  _e as ActionButton,
+  Me as DatetimeLocalInput,
+  we as DatetimeOffsetInput,
+  pe as DebouncedInput,
+  Y as Input,
+  $e as NumberInput,
+  De as RadioMenu,
+  ae as Select,
+  Ee as TextArea,
+  Oe as TextInput
 };

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

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