@memobit/libs 3.9.0 → 3.10.0

package/README.md

@@ -1,95 +1,96 @@
-# @memobit/libs
-
-A TypeScript-first React component library — 100+ components, 70+ themes, plus the hooks and helpers needed to glue them together. Built for, and battle-tested across, the [Memobit](https://memobit.ro) family of apps.
-
-**📚 Live documentation & component playground → [react.memobit.ro](https://react.memobit.ro/)**
-
----
-
-## Install
-
-```bash
-npm install @memobit/libs
-```
-
-Peer dependencies (you provide these in your own app):
-
-```bash
-npm install react@^19 react-dom@^19
-```
-
-## Quick start
-
-```tsx
-import { Button, Card, ToastProvider, useToast } from '@memobit/libs';
-import '@memobit/libs/dist/index.css';
-import '@memobit/libs/dist/styles/themes.scss'; // optional — only if you want the bundled themes
-
-function App() {
-  return (
-    <ToastProvider>
-      <Demo />
-    </ToastProvider>
-  );
-}
-
-function Demo() {
-  const { showToast } = useToast();
-  return (
-    <Card>
-      <Button onClick={() => showToast({ type: 'success', message: 'Hello' })}>
-        Click me
-      </Button>
-    </Card>
-  );
-}
-```
-
-## What's in the box
-
-- **Components** — Buttons, forms (Input/Select/Checkbox/DatePicker/ColorPicker/EmojiPicker/FileDropzone…), navigation (Breadcrumb/AppHeader/ControlPanel/Tabs…), overlays (Drawer/Modal/ConfirmDialog/ContextMenu/Tooltip…), data (DataView/Table/Calendar/CalendarHeatmap/Chart…), feedback (Toast/Banner/Badge/Chip/EmptyState…), and many more.
-- **Icons** — 470+ stroke icons, each tree-shakeable.
-- **Themes** — 70+ ready-made SCSS themes (Arctic Blue, Midnight Atlas, Terracotta Kitchen, Neon Tokyo, …). Theme tokens are pure CSS custom properties, so you can author your own.
-- **Hooks** — `useBreakpoint`, `useBodyScrollLock`, `useComponentEffect`, `useAppPersistence`, `useAuth`.
-- **Helpers** — date formatting, number formatting, string utilities, search/highlight, pagination, URL helpers.
-
-See the [component reference](https://react.memobit.ro/) for props, variants, and live examples.
-
-## Theming
-
-Themes ship as standalone SCSS files. Pick what you need:
-
-```scss
-// import everything
-@use '@memobit/libs/dist/styles/themes.scss';
-
-// or a single theme
-@use '@memobit/libs/dist/styles/theming/arctic-blue.scss';
-```
-
-All tokens — spacing, typography, radii, transitions, colors — are exposed as CSS custom properties (`--spacing-8`, `--card-bg`, `--button-primary-bg`, etc.) so you can override per-component or per-route without forking the library.
-
-Token reference:
-
-- Sizing / spacing / radii / transitions → `@memobit/libs/dist/styles/variables.scss`
-- Theme colors → `@memobit/libs/dist/styles/theming/*.scss`
-
-## Requirements
-
-- React **19.2+** and React DOM **19.2+** (peer deps)
-- ESM-only (your bundler must support ESM — Vite, Next.js 13+, Webpack 5, esbuild, Rollup all do)
-- For SCSS imports: a Sass-capable bundler
-
-## TypeScript
-
-Type definitions are bundled (`dist/index.d.ts`). No `@types/...` package required.
-
-## License
-
-[Apache 2.0](./LICENSE) © Iulian Cristea
-
-## Links
-
-- 📚 Docs & playground — https://react.memobit.ro/
-- 🐙 Source — https://github.com/CristeaIulian/memobit-react-library
-- 📦 npm — https://www.npmjs.com/package/@memobit/libs
+# @memobit/libs
+
+A TypeScript-first React component library — 100+ components, 70+ themes, plus the hooks and helpers needed to glue them together. Built for, and battle-tested across, the [Memobit](https://memobit.ro) family of apps.
+
+**📚 Live documentation & component playground → [react.memobit.ro](https://react.memobit.ro/)**
+
+---
+
+## Install
+
+```bash
+npm install @memobit/libs
+```
+
+Peer dependencies (you provide these in your own app):
+
+```bash
+npm install react@^19 react-dom@^19
+```
+
+## Quick start
+
+```tsx
+import { Button, Card, ToastProvider, useToast } from '@memobit/libs';
+import '@memobit/libs/dist/index.css';
+import '@memobit/libs/dist/styles/themes.scss'; // optional — only if you want the bundled themes
+
+function App() {
+  return (
+    <ToastProvider>
+      <Demo />
+    </ToastProvider>
+  );
+}
+
+function Demo() {
+  const { showToast } = useToast();
+  return (
+    <Card>
+      <Button onClick={() => showToast({ type: 'success', message: 'Hello' })}>
+        Click me
+      </Button>
+    </Card>
+  );
+}
+```
+
+## What's in the box
+
+- **Components** — Buttons, forms (Input/Select/Checkbox/DatePicker/ColorPicker/EmojiPicker/FileDropzone…), navigation (Breadcrumb/AppHeader/ControlPanel/Tabs…), overlays (Drawer/Modal/ConfirmDialog/ContextMenu/Tooltip…), data (DataView/Table/Calendar/CalendarHeatmap/Chart…), feedback (Toast/Banner/Badge/Chip/EmptyState…), and many more.
+- **Icons** — 470+ stroke icons, each tree-shakeable.
+- **Themes** — 70+ ready-made SCSS themes (Arctic Blue, Midnight Atlas, Terracotta Kitchen, Neon Tokyo, …). Theme tokens are pure CSS custom properties, so you can author your own.
+- **Hooks** — `useBreakpoint`, `useBodyScrollLock`, `useComponentEffect`, `useAppPersistence`, `useAuth`.
+- **Helpers** — date formatting, number formatting, string utilities, search/highlight, pagination, URL helpers.
+- **Error reporting** — `@memobit/libs/errors` (React-free, works in Node too): `installErrorReporting` / `installNodeErrorReporting` send uncaught errors, unhandled rejections, `ErrorBoundary` crashes and `console.error` / `console.warn` to a collector endpoint, batched and throttled. `logger` stands in for `console.*`, and `reportError` reports errors you have handled.
+
+See the [component reference](https://react.memobit.ro/) for props, variants, and live examples.
+
+## Theming
+
+Themes ship as standalone SCSS files. Pick what you need:
+
+```scss
+// import everything
+@use '@memobit/libs/dist/styles/themes.scss';
+
+// or a single theme
+@use '@memobit/libs/dist/styles/theming/arctic-blue.scss';
+```
+
+All tokens — spacing, typography, radii, transitions, colors — are exposed as CSS custom properties (`--spacing-8`, `--card-bg`, `--button-primary-bg`, etc.) so you can override per-component or per-route without forking the library.
+
+Token reference:
+
+- Sizing / spacing / radii / transitions → `@memobit/libs/dist/styles/variables.scss`
+- Theme colors → `@memobit/libs/dist/styles/theming/*.scss`
+
+## Requirements
+
+- React **19.2+** and React DOM **19.2+** (peer deps)
+- ESM-only (your bundler must support ESM — Vite, Next.js 13+, Webpack 5, esbuild, Rollup all do)
+- For SCSS imports: a Sass-capable bundler
+
+## TypeScript
+
+Type definitions are bundled (`dist/index.d.ts`). No `@types/...` package required.
+
+## License
+
+[Apache 2.0](./LICENSE) © Iulian Cristea
+
+## Links
+
+- 📚 Docs & playground — https://react.memobit.ro/
+- 🐙 Source — https://github.com/CristeaIulian/memobit-react-library
+- 📦 npm — https://www.npmjs.com/package/@memobit/libs

package/dist/components/Confetti/Confetti2.js

@@ -1,8 +1,8 @@
 import './Confetti.css';
 /* empty css         */
 import { forwardRef as B, useCallback as E, useEffect as H, useImperativeHandle as L, useRef as v } from "react";
-import { jsx as O } from "react/jsx-runtime";
-var _ = [
+import { jsx as N } from "react/jsx-runtime";
+var O = [
   "#0891b2",
   "#06b6d4",
   "#16a34a",
@@ -11,7 +11,7 @@ var _ = [
   "#8b5cf6",
   "#ec4899",
   "#f97316"
-], j = (t) => {
+], _ = (t) => {
   if (t && t.length > 0) return t;
   const a = getComputedStyle(document.documentElement), s = [
     a.getPropertyValue("--body-accent-color").trim(),
@@ -25,7 +25,7 @@ var _ = [
     "#ec4899",
     "#f97316",
     "#06b6d4"
-  ] : _;
+  ] : O;
 }, I = () => {
   const t = Math.random();
   return t < 0.5 ? "rect" : t < 0.8 ? "circle" : "star";
@@ -40,7 +40,7 @@ var _ = [
   color: b(s),
   opacity: 1,
   shape: I()
-}), D = (t, a, s) => {
+}), j = (t, a, s) => {
   const o = Math.random() * Math.PI * 2, c = 3 + Math.random() * 10;
   return {
     x: t,
@@ -68,7 +68,7 @@ var _ = [
   trail: [],
   exploded: !1,
   children: []
-}), N = (t, a, s) => {
+}), D = (t, a, s) => {
   const o = Math.random() * Math.PI * 2, c = 1 + Math.random() * 5;
   return {
     x: t,
@@ -102,37 +102,37 @@ var _ = [
       U(t, 0, 0, a.size / 2);
   }
   t.restore();
-}, J = B(({ colors: t, duration: a = 3e3, scope: s = "fullscreen", variant: o = "confetti", particleCount: c }, P) => {
+}, W = B(({ colors: t, duration: a = 3e3, scope: s = "fullscreen", variant: o = "confetti", particleCount: c }, P) => {
   const h = v(null), f = v(0), d = v(0), M = v(!1), V = {
     confetti: 150,
     burst: 200,
     fireworks: 8
-  }, R = E(() => {
+  }, C = E(() => {
     M.current = !1, cancelAnimationFrame(f.current);
     const i = h.current;
     i && i.getContext("2d")?.clearRect(0, 0, i.width, i.height);
-  }, []), z = E(() => {
+  }, []), R = E(() => {
     const i = h.current;
     if (!i || M.current) return;
     const r = i.getContext("2d");
     if (!r) return;
     i.width = i.offsetWidth, i.height = i.offsetHeight;
-    const u = i.width, m = i.height, y = j(t), x = c ?? V[o];
+    const y = i.width, m = i.height, u = _(t), x = c ?? V[o];
     M.current = !0, d.current = performance.now();
     let l = [];
-    if (o === "confetti") l = Array.from({ length: x }, () => S(u, m, y));
+    if (o === "confetti") l = Array.from({ length: x }, () => S(y, m, u));
     else if (o === "burst") {
-      const k = u / 2, A = m / 2;
-      l = Array.from({ length: x }, () => D(k, A, y));
-    } else o === "fireworks" && (l = Array.from({ length: x }, () => F(u, m, y)));
-    const C = (k) => {
+      const k = y / 2, A = m / 2;
+      l = Array.from({ length: x }, () => j(k, A, u));
+    } else o === "fireworks" && (l = Array.from({ length: x }, () => F(y, m, u)));
+    const z = (k) => {
       if (!M.current) return;
       const A = k - d.current, g = Math.min(A / a, 1);
-      if (r.clearRect(0, 0, u, m), o === "confetti" ? (g < 0.6 && Math.random() < 0.3 && l.push(S(u, m, y)), l = l.filter((e) => e.opacity > 0 && e.y < m + 20), l.forEach((e) => {
+      if (r.clearRect(0, 0, y, m), o === "confetti" ? (g < 0.6 && Math.random() < 0.3 && l.push(S(y, m, u)), l = l.filter((e) => e.opacity > 0 && e.y < m + 20), l.forEach((e) => {
         e.x += e.vx, e.y += e.vy, e.vy += 0.08, e.vx += (Math.random() - 0.5) * 0.1, e.angle += e.spin, g > 0.6 && (e.opacity -= 0.015), w(r, e);
       })) : o === "burst" ? (l = l.filter((e) => e.opacity > 0), l.forEach((e) => {
         e.x += e.vx, e.y += e.vy, e.vy += 0.15, e.vx *= 0.98, e.angle += e.spin, e.opacity -= 0.012, w(r, e);
-      })) : o === "fireworks" && (g < 0.85 && Math.random() < 0.04 && l.push(F(u, m, y)), l = l.filter((e) => e.exploded ? e.children?.some((n) => n.opacity > 0) ?? !1 : e.y > -m * 0.1), l.forEach((e) => {
+      })) : o === "fireworks" && (g < 0.85 && Math.random() < 0.04 && l.push(F(y, m, u)), l = l.filter((e) => e.exploded ? e.children?.some((n) => n.opacity > 0) ?? !1 : e.y > -m * 0.1), l.forEach((e) => {
         if (e.exploded)
           e.children?.forEach((n) => {
             n.x += n.vx, n.y += n.vy, n.vy += 0.06, n.vx *= 0.97, n.angle += n.spin, n.opacity -= 0.014, w(r, n);
@@ -146,29 +146,30 @@ var _ = [
         }), r.save(), r.globalAlpha = 1, r.fillStyle = e.color, r.beginPath(), r.arc(e.x, e.y, 3, 0, Math.PI * 2), r.fill(), r.restore(), e.x += e.vx, e.y += e.vy, e.vy += 0.18, e.vy >= 0) {
           e.exploded = !0;
           const n = 60 + Math.floor(Math.random() * 40);
-          e.children = Array.from({ length: n }, () => N(e.x, e.y, y)), r.save(), r.globalAlpha = 0.8, r.fillStyle = "#ffffff", r.beginPath(), r.arc(e.x, e.y, 12, 0, Math.PI * 2), r.fill(), r.restore();
+          e.children = Array.from({ length: n }, () => D(e.x, e.y, u)), r.save(), r.globalAlpha = 0.8, r.fillStyle = "#ffffff", r.beginPath(), r.arc(e.x, e.y, 12, 0, Math.PI * 2), r.fill(), r.restore();
         }
       })), g >= 1 || l.length === 0) {
-        R();
+        C();
         return;
       }
-      f.current = requestAnimationFrame(C);
+      f.current = requestAnimationFrame(z);
     };
-    f.current = requestAnimationFrame(C);
+    f.current = requestAnimationFrame(z);
   }, [
     t,
     a,
     o,
     c,
-    R
+    C
   ]);
-  return L(P, () => ({ trigger: z }), [z]), H(() => () => {
+  return L(P, () => ({ trigger: R }), [R]), H(() => () => {
     cancelAnimationFrame(f.current);
-  }, []), /* @__PURE__ */ O("canvas", {
+  }, []), /* @__PURE__ */ N("canvas", {
     ref: h,
     className: `confetti-canvas confetti-canvas--${s}`
   });
 });
+W.displayName = "Confetti";
 export {
-  J as Confetti
+  W as Confetti
 };

package/dist/components/ErrorBoundary/ErrorBoundary2.js

@@ -1,9 +1,10 @@
 import './ErrorBoundary.css';
-import { EmptyState as i } from "../EmptyState/EmptyState2.js";
+import { EmptyState as s } from "../EmptyState/EmptyState2.js";
+import { reportError as a } from "../../helpers/ErrorReporting.js";
 /* empty css              */
-import { Component as a } from "react";
+import { Component as c } from "react";
 import { jsx as o } from "react/jsx-runtime";
-var u = class extends a {
+var h = class extends c {
   constructor(...r) {
     super(...r), this.state = { error: null }, this.reset = () => {
       this.setState({ error: null });
@@ -13,18 +14,18 @@ var u = class extends a {
     return { error: r };
   }
   componentDidCatch(r, t) {
-    console.error("ErrorBoundary caught:", r, t.componentStack), this.props.onError?.(r, t);
+    a(r, { componentStack: t.componentStack ?? void 0 }), console.error("ErrorBoundary caught:", r, t.componentStack), this.props.onError?.(r, t);
   }
   render() {
-    const { error: r } = this.state, { children: t, title: n, resetLabel: s, fallback: e } = this.props;
+    const { error: r } = this.state, { children: t, title: n, resetLabel: i, fallback: e } = this.props;
     return r ? e ? e(r, this.reset) : /* @__PURE__ */ o("div", {
       className: "error-boundary",
-      children: /* @__PURE__ */ o(i, {
+      children: /* @__PURE__ */ o(s, {
         icon: "warning",
         title: n ?? "Something went wrong",
         description: r.message || "An unexpected error occurred.",
         primary: {
-          text: s ?? "Try again",
+          text: i ?? "Try again",
           variant: "info",
           onClick: this.reset
         }
@@ -33,5 +34,5 @@ var u = class extends a {
   }
 };
 export {
-  u as ErrorBoundary
+  h as ErrorBoundary
 };

package/dist/components/InputDate/InputDate2.js

@@ -2,17 +2,17 @@ import './InputDate.css';
 import { Icon as f } from "../Icon/Icon2.js";
 import { Tooltip as N } from "../Tooltip/Tooltip2.js";
 /* empty css          */
-import { forwardRef as j, useRef as z } from "react";
+import { forwardRef as j, useRef as y } from "react";
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, error: c, highlighted: g, id: l, label: o, max: R, min: w, onBlur: x, onChange: p, onClick: C, onKeyDown: $, onKeyUp: I, readOnly: n = !1, required: d = !1, success: r, type: P = "date", value: u }, i) => {
-  const m = b && u && !a && !n, h = z(null);
+var z = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, error: c, highlighted: g, id: r, label: p, max: R, min: w, onBlur: x, onChange: o, onClick: C, onKeyDown: I, onKeyUp: $, readOnly: n = !1, required: d = !1, success: l, type: P = "date", value: u }, i) => {
+  const m = b && u && !a && !n, h = y(null);
   return /* @__PURE__ */ s("div", {
     className: `input-date-wrapper${g ? " input-date-highlighted" : ""}`,
     children: [
-      o && /* @__PURE__ */ s("label", {
-        htmlFor: l,
+      p && /* @__PURE__ */ s("label", {
+        htmlFor: r,
         className: "input-date-label",
-        children: [o, d && /* @__PURE__ */ e("span", {
+        children: [p, d && /* @__PURE__ */ e("span", {
           className: "input-date-required",
           children: "*"
         })]
@@ -24,8 +24,8 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
           autoFocus: k,
           disabled: a,
           type: P === "date" ? "date" : "datetime-local",
-          className: `input-date${c ? " input-date-error" : ""}${r ? " input-date-success" : ""}${m ? " input-date--clearable" : ""}`,
-          id: l,
+          className: `input-date${c ? " input-date-error" : ""}${l ? " input-date-success" : ""}${m ? " input-date--clearable" : ""}`,
+          id: r,
           max: R,
           min: w,
           ref: (t) => {
@@ -33,10 +33,10 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
           },
           value: u ?? "",
           onBlur: x,
-          onChange: (t) => p?.(t.target.value || void 0),
+          onChange: (t) => o?.(t.target.value || void 0),
           onClick: C,
-          onKeyDown: $,
-          onKeyUp: I,
+          onKeyDown: I,
+          onKeyUp: $,
           readOnly: n,
           required: d
         }), /* @__PURE__ */ s("div", {
@@ -46,7 +46,7 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
             children: /* @__PURE__ */ e("button", {
               type: "button",
               className: "input-date-clear",
-              onClick: () => p?.(void 0),
+              onClick: () => o?.(void 0),
               children: /* @__PURE__ */ e(f, {
                 name: "clear",
                 size: "sm"
@@ -75,13 +75,14 @@ var E = j(({ autoComplete: v = "on", autoFocus: k, clearable: b, disabled: a, er
         className: "input-date-error-message",
         children: c
       }),
-      r && /* @__PURE__ */ e("span", {
+      l && /* @__PURE__ */ e("span", {
         className: "input-date-success-message",
-        children: r
+        children: l
       })
     ]
   });
 });
+z.displayName = "InputDate";
 export {
-  E as InputDate
+  z as InputDate
 };

package/dist/components/InputEmail/InputEmail2.js

@@ -2,27 +2,27 @@ import './InputEmail.css';
 /* empty css           */
 import { forwardRef as F, useEffect as G, useState as N } from "react";
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
-var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.trim() === "" ? !0 : L.test(r.trim()), k = F(({ autoComplete: r = "on", autoFocus: A, disabled: I, error: $ = "Please enter a valid email address", highlighted: v, id: o, label: p, maxLength: x, onBlur: z, onChange: Z, onClick: j, onKeyDown: B, onKeyUp: C, onValidate: s, placeholder: R, readOnly: T = !1, required: a = !1, showValidation: h = !1, success: m, validateOn: i = "blur", value: l }, _) => {
-  const [f, u] = N(!0), [d, g] = N(!1), c = (e) => a && (!e || e.trim() === "") ? !1 : !e || e.trim() === "" ? !0 : M(e);
+var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.trim() === "" ? !0 : L.test(r.trim()), P = F(({ autoComplete: r = "on", autoFocus: I, disabled: A, error: $ = "Please enter a valid email address", highlighted: v, id: o, label: p, maxLength: x, onBlur: z, onChange: Z, onClick: j, onKeyDown: y, onKeyUp: B, onValidate: a, placeholder: C, readOnly: R = !1, required: s = !1, showValidation: h = !1, success: m, validateOn: i = "blur", value: l }, T) => {
+  const [f, u] = N(!0), [d, g] = N(!1), c = (e) => s && (!e || e.trim() === "") ? !1 : !e || e.trim() === "" ? !0 : M(e);
   G(() => {
     if (l !== void 0) {
       const e = c(l);
-      u(e), s?.(e);
+      u(e), a?.(e);
     }
   }, [
     l,
-    s,
-    a
+    a,
+    s
   ]);
-  const w = (e) => {
+  const _ = (e) => {
     if (Z?.(e), i === "change" || i === "both") {
       const t = c(e);
-      u(t), g(!0), s?.(t);
+      u(t), g(!0), a?.(t);
     }
-  }, y = (e) => {
+  }, w = (e) => {
     if (g(!0), i === "blur" || i === "both") {
       const t = c(e.target.value);
-      u(t), s?.(t);
+      u(t), a?.(t);
     }
     z?.(e);
   }, E = h && d && !f;
@@ -32,29 +32,29 @@ var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.t
       p && /* @__PURE__ */ b("label", {
         htmlFor: o,
         className: "input-email-label",
-        children: [p, a && /* @__PURE__ */ n("span", {
+        children: [p, s && /* @__PURE__ */ n("span", {
           className: "input-email-required",
           children: "*"
         })]
       }),
       /* @__PURE__ */ n("input", {
         autoComplete: r,
-        autoFocus: A,
-        disabled: I,
+        autoFocus: I,
+        disabled: A,
         type: "email",
         className: `input-email${E ? " input-email--error" : ""}${m ? " input-email-success" : f && d && h ? " input-email--valid" : ""}`,
         id: o,
         maxLength: x,
-        placeholder: R,
-        ref: _,
+        placeholder: C,
+        ref: T,
         value: l,
-        onBlur: y,
-        onChange: (e) => w(e.target.value),
+        onBlur: w,
+        onChange: (e) => _(e.target.value),
         onClick: j,
-        onKeyDown: B,
-        onKeyUp: C,
-        readOnly: T,
-        required: a
+        onKeyDown: y,
+        onKeyUp: B,
+        readOnly: R,
+        required: s
       }),
       E && /* @__PURE__ */ n("span", {
         className: "input-email-error-message",
@@ -67,7 +67,8 @@ var L = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, M = (r) => !r || r.t
     ]
   });
 });
+P.displayName = "InputEmail";
 export {
-  k as InputEmail,
+  P as InputEmail,
   M as validateEmail
 };

package/dist/components/InputFile/InputFile2.js

@@ -1,8 +1,8 @@
 import './InputFile.css';
 /* empty css          */
-import { forwardRef as N } from "react";
+import { forwardRef as g } from "react";
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-var v = N(({ accept: r, disabled: p, error: i, highlighted: t, id: a, label: s, onChange: f, onClick: m, onKeyDown: u, placeholder: c, required: h, success: l, value: o }, d) => /* @__PURE__ */ n("div", {
+var x = g(({ accept: p, disabled: r, error: i, highlighted: t, id: a, label: s, onChange: f, onClick: m, onKeyDown: u, placeholder: c, required: h, success: l, value: d }, o) => /* @__PURE__ */ n("div", {
   className: `input-file-wrapper${t ? " input-file-highlighted" : ""}`,
   children: [
     s && /* @__PURE__ */ n("label", {
@@ -14,15 +14,15 @@ var v = N(({ accept: r, disabled: p, error: i, highlighted: t, id: a, label: s,
       })]
     }),
     /* @__PURE__ */ e("input", {
-      accept: r,
-      disabled: p,
+      accept: p,
+      disabled: r,
       type: "file",
       className: `input-file${i ? " input-file-error" : ""}${l ? " input-file-success" : ""}`,
       id: a,
       placeholder: c,
-      ref: d,
-      value: o,
-      onChange: (g) => f?.(g.target.files),
+      ref: o,
+      value: d,
+      onChange: (N) => f?.(N.target.files),
       onClick: m,
       onKeyDown: u
     }),
@@ -36,6 +36,7 @@ var v = N(({ accept: r, disabled: p, error: i, highlighted: t, id: a, label: s,
     })
   ]
 }));
+x.displayName = "InputFile";
 export {
-  v as InputFile
+  x as InputFile
 };

package/dist/components/InputNumber/InputNumber2.js

@@ -2,7 +2,7 @@ import './InputNumber.css';
 /* empty css            */
 import { forwardRef as V } from "react";
 import { jsx as i, jsxs as o } from "react/jsx-runtime";
-var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNativeControls: h, highlighted: f, id: p, label: s, onChange: m, onClick: v, onKeyDown: N, required: g, success: l, value: n, min: u, max: t, placeholder: y, step: $ }, w) => {
+var j = V(({ autoComplete: d = "on", autoFocus: c, disabled: b, error: a, hideNativeControls: h, highlighted: f, id: p, label: s, onChange: m, onClick: N, onKeyDown: v, required: g, success: l, value: n, min: u, max: t, placeholder: y, step: $ }, w) => {
   const B = (e) => {
     if (e === void 0) return;
     let r = e;
@@ -20,8 +20,8 @@ var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNa
         })]
       }),
       /* @__PURE__ */ i("input", {
-        autoComplete: c,
-        autoFocus: d,
+        autoComplete: d,
+        autoFocus: c,
         disabled: b,
         className: `input-number${a ? " input-number-error" : ""}${l ? " input-number-success" : ""}${h ? " input-number-hide-native-controls" : ""}`,
         id: p,
@@ -34,9 +34,9 @@ var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNa
           }
         },
         onChange: (e) => m?.(e.target.value ? Number(e.target.value) : void 0),
-        onClick: v,
+        onClick: N,
         onKeyDown: (e) => {
-          (e.key === "e" || e.key === "E") && e.preventDefault(), N?.(e);
+          (e.key === "e" || e.key === "E") && e.preventDefault(), v?.(e);
         },
         placeholder: y,
         ref: w,
@@ -55,6 +55,7 @@ var E = V(({ autoComplete: c = "on", autoFocus: d, disabled: b, error: a, hideNa
     ]
   });
 });
+j.displayName = "InputNumber";
 export {
-  E as InputNumber
+  j as InputNumber
 };

package/dist/components/InputPassword/InputPassword2.js

@@ -2,7 +2,7 @@ import './InputPassword.css';
 /* empty css              */
 import { forwardRef as j } from "react";
 import { jsx as s, jsxs as o } from "react/jsx-runtime";
-var F = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highlighted: l, id: r, label: e, maxLength: m, onBlur: u, onChange: w, onClick: c, onKeyDown: h, onKeyUp: f, placeholder: g, readOnly: N = !1, required: n = !1, success: p, value: v }, x) => /* @__PURE__ */ o("div", {
+var y = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highlighted: l, id: r, label: e, maxLength: m, onBlur: u, onChange: w, onClick: c, onKeyDown: h, onKeyUp: N, placeholder: f, readOnly: g = !1, required: n = !1, success: p, value: v }, x) => /* @__PURE__ */ o("div", {
   className: `input-password-wrapper${l ? " input-password-highlighted" : ""}`,
   children: [
     e && /* @__PURE__ */ o("label", {
@@ -21,15 +21,15 @@ var F = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highli
       className: `input-password${a ? " input-password-error" : ""}${p ? " input-password-success" : ""}`,
       id: r,
       maxLength: m,
-      placeholder: g,
+      placeholder: f,
       ref: x,
       value: v,
       onBlur: u,
       onChange: ($) => w?.($.target.value),
       onClick: c,
       onKeyDown: h,
-      onKeyUp: f,
-      readOnly: N,
+      onKeyUp: N,
+      readOnly: g,
       required: n
     }),
     a && /* @__PURE__ */ s("span", {
@@ -42,6 +42,7 @@ var F = j(({ autoComplete: t = "on", autoFocus: i, disabled: d, error: a, highli
     })
   ]
 }));
+y.displayName = "InputPassword";
 export {
-  F as InputPassword
+  y as InputPassword
 };