@code0-tech/pictor 0.10.7 → 0.10.9

package/dist/components/button/Button.js

@@ -1,32 +1,32 @@
-import { jsx as R } from "react/jsx-runtime";
-import { c as h } from "../../_virtual/compiler-runtime.js";
+import { jsx as h } from "react/jsx-runtime";
+import { c as y } from "../../_virtual/compiler-runtime.js";
 import '../../assets/components/button/Button.style.css';/* empty css                  */
 import z from "react";
 import "../../utils/contextStore.js";
 import { mergeComponentProps as S } from "../../utils/component.js";
 import "js-md5";
-const P = z.forwardRef((a, d) => {
-  const t = h.c(11);
-  let o, n, e, i;
-  if (t[0] !== a || t[1] !== d) {
+const k = z.forwardRef((d, l) => {
+  const t = y.c(13);
+  let o, r, e, i, n;
+  if (t[0] !== d || t[1] !== l) {
     const {
-      children: f,
-      variant: l,
-      color: c,
-      paddingSize: m,
-      active: u,
-      disabled: b,
-      ...p
-    } = a;
-    o = f;
-    const v = l === void 0 ? "normal" : l, $ = c === void 0 ? "secondary" : c, g = m === void 0 ? "xs" : m, x = u === void 0 ? !1 : u;
-    n = b === void 0 ? !1 : b, e = d, i = S(`button button--${$} ${x ? "button--active" : ""} ${n ? "button--disabled" : ""} button--${v} button--${g}`, p), t[0] = a, t[1] = d, t[2] = o, t[3] = n, t[4] = e, t[5] = i;
+      children: p,
+      variant: c,
+      color: m,
+      paddingSize: u,
+      active: b,
+      disabled: f,
+      ...v
+    } = d;
+    o = p;
+    const $ = c === void 0 ? "normal" : c, g = m === void 0 ? "secondary" : m, x = u === void 0 ? "xs" : u, R = b === void 0 ? !1 : b;
+    r = f === void 0 ? !1 : f, e = l, i = "button", n = S(`button button--${g} ${R ? "button--active" : ""} ${r ? "button--disabled" : ""} button--${$} button--${x}`, v), t[0] = d, t[1] = l, t[2] = o, t[3] = r, t[4] = e, t[5] = i, t[6] = n;
   } else
-    o = t[2], n = t[3], e = t[4], i = t[5];
-  const s = n ? "true" : "false";
-  let r;
-  return t[6] !== o || t[7] !== e || t[8] !== i || t[9] !== s ? (r = /* @__PURE__ */ R("button", { ref: e, ...i, "aria-disabled": s, children: o }), t[6] = o, t[7] = e, t[8] = i, t[9] = s, t[10] = r) : r = t[10], r;
+    o = t[2], r = t[3], e = t[4], i = t[5], n = t[6];
+  const s = r ? "true" : "false";
+  let a;
+  return t[7] !== o || t[8] !== e || t[9] !== i || t[10] !== n || t[11] !== s ? (a = /* @__PURE__ */ h("button", { ref: e, type: i, ...n, "aria-disabled": s, children: o }), t[7] = o, t[8] = e, t[9] = i, t[10] = n, t[11] = s, t[12] = a) : a = t[12], a;
 });
 export {
-  P as Button
+  k as Button
 };

package/dist/components/form/PasswordInput.js

@@ -1,68 +1,54 @@
-import { jsxs as i, Fragment as M, jsx as t } from "react/jsx-runtime";
-import u from "react";
-import { Input as V } from "./Input.js";
-import { IconX as s, IconCheck as c, IconEye as x } from "@tabler/icons-react";
-import { Button as p } from "../button/Button.js";
-import { clearInputElement as w } from "./Input.utils.js";
-import { Flex as o } from "../flex/Flex.js";
-import { Text as a } from "../text/Text.js";
-const v = u.forwardRef((n, e) => {
-  e = e || u.useRef(null);
+import { jsxs as l, Fragment as y, jsx as n } from "react/jsx-runtime";
+import c from "react";
+import { Input as b } from "./Input.js";
+import { IconEye as I, IconX as R } from "@tabler/icons-react";
+import { Button as u } from "../button/Button.js";
+import { clearInputElement as P } from "./Input.utils.js";
+import { Flex as z } from "../flex/Flex.js";
+import { Progress as D } from "../progress/Progress.js";
+import { InputMessage as A } from "./InputMessage.js";
+const L = c.forwardRef((r, t) => {
+  t = t || c.useRef(null);
   const {
-    clearable: m = !0,
-    visible: h = !0,
-    right: g,
-    formValidation: r,
+    clearable: p = !0,
+    visible: d = !0,
+    right: m,
+    formValidation: s,
     ...f
-  } = n, z = (l) => (w(e.current), l.stopPropagation(), l.preventDefault(), !1), y = (l) => (e.current instanceof HTMLInputElement && (e.current.type === "password" ? e.current.type = "text" : e.current.type === "text" && (e.current.type = "password")), !1), d = [g];
-  return h && d.push(/* @__PURE__ */ t(p, { variant: "none", onClick: (l) => y(), children: /* @__PURE__ */ t(x, { size: 13 }) })), m && d.push(/* @__PURE__ */ t(p, { variant: "none", onClick: (l) => z(l), children: /* @__PURE__ */ t(s, { size: 13 }) })), /* @__PURE__ */ i(M, { children: [
-    /* @__PURE__ */ t(V, { right: d, rightType: "action", type: "password", ref: e, ...r ? {
-      formValidation: {
-        setValue: r.setValue,
-        valid: r.valid
-      }
+  } = r, h = (e) => (P(t.current), e.stopPropagation(), e.preventDefault(), !1), g = (e) => (t.current instanceof HTMLInputElement && (t.current.type === "password" ? t.current.type = "text" : t.current.type === "text" && (t.current.type = "password")), e.stopPropagation(), e.preventDefault(), !1), o = [m];
+  d && o.push(/* @__PURE__ */ n(u, { variant: "none", onClick: (e) => g(e), children: /* @__PURE__ */ n(I, { size: 13 }) })), p && o.push(/* @__PURE__ */ n(u, { variant: "none", onClick: (e) => h(e), children: /* @__PURE__ */ n(R, { size: 13 }) }));
+  const a = s?.notValidMessage ?? "", i = /^[1-5]+$/.test(a), x = a.length, M = Math.max(0, 5 - x) / 5 * 100;
+  return /* @__PURE__ */ l(y, { children: [
+    /* @__PURE__ */ n(b, { right: o, rightType: "action", type: "password", ref: t, ...s ? {
+      formValidation: i ? {
+        setValue: s.setValue,
+        valid: s.valid
+      } : s
     } : {}, ...f }),
-    !r?.valid && /* @__PURE__ */ i(o, { mt: 0.7, style: {
+    i && !s?.valid && /* @__PURE__ */ l(z, { mt: 0.7, style: {
       flexDirection: "column"
     }, children: [
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("1") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must be at least 8 characters" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("2") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include a lowercase letter" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("3") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include an uppercase letter" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("4") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include a number" })
-      ] }),
-      /* @__PURE__ */ i(o, { align: "center", style: {
-        gap: "0.35rem"
-      }, children: [
-        r?.notValidMessage?.includes("5") ? /* @__PURE__ */ t(s, { color: "#D90429", size: 16 }) : /* @__PURE__ */ t(c, { color: "#29BF12", size: 16 }),
-        /* @__PURE__ */ t(a, { children: "Must include a special character" })
-      ] })
+      /* @__PURE__ */ n(D, { value: M, max: 100, color: "linear-gradient(to right, #D90429 0%, #29BF12 100%)" }),
+      (() => {
+        const e = ["2", "3", "4", "5", "1"].find((w) => a.includes(w));
+        if (!e) return null;
+        const V = {
+          1: "Must be at least 8 characters",
+          2: "Must include a lowercase letter",
+          3: "Must include an uppercase letter",
+          4: "Must include a number",
+          5: "Must include a special character"
+        }[e];
+        return /* @__PURE__ */ n(A, { children: V });
+      })()
     ] })
   ] });
-}), A = (n) => {
-  if (!n) return "12345";
-  let e = null;
-  return n.length < 8 && (e = (e ?? "") + "1"), /[a-z]/.test(n) || (e = (e ?? "") + "2"), /[A-Z]/.test(n) || (e = (e ?? "") + "3"), /[0-9]/.test(n) || (e = (e ?? "") + "4"), /[^A-Za-z0-9]/.test(n) || (e = (e ?? "") + "5"), e;
+}), X = (r) => {
+  if (!r) return "12345";
+  let t = null;
+  return r.length < 8 && (t = (t ?? "") + "1"), /[a-z]/.test(r) || (t = (t ?? "") + "2"), /[A-Z]/.test(r) || (t = (t ?? "") + "3"), /[0-9]/.test(r) || (t = (t ?? "") + "4"), /[^A-Za-z0-9]/.test(r) || (t = (t ?? "") + "5"), t;
 };
 export {
-  v as PasswordInput,
-  A as passwordValidation
+  L as PasswordInput,
+  X as passwordValidation
 };

package/dist/components/form/useForm.js

@@ -1,24 +1,24 @@
-import j, { useState as g, useRef as y, useCallback as w, useEffect as P } from "react";
-function o(i, e, t) {
-  return (e = O(e)) in i ? Object.defineProperty(i, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : i[e] = t, i;
+import O, { useState as w, useRef as b, useCallback as M, useEffect as F } from "react";
+function d(r, e, t) {
+  return (e = R(e)) in r ? Object.defineProperty(r, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : r[e] = t, r;
 }
-function O(i) {
-  var e = F(i, "string");
+function R(r) {
+  var e = _(r, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function F(i, e) {
-  if (typeof i != "object" || !i) return i;
-  var t = i[Symbol.toPrimitive];
+function _(r, e) {
+  if (typeof r != "object" || !r) return r;
+  var t = r[Symbol.toPrimitive];
   if (t !== void 0) {
-    var n = t.call(i, e);
-    if (typeof n != "object") return n;
+    var i = t.call(r, e);
+    if (typeof i != "object") return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (e === "string" ? String : Number)(i);
+  return (e === "string" ? String : Number)(r);
 }
-class f {
-  constructor(e, t, n, l = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map()) {
-    o(this, "changeValue", void 0), o(this, "currentValues", void 0), o(this, "currentValidations", void 0), o(this, "shouldValidate", void 0), o(this, "cachedMessages", void 0), this.changeValue = e, this.currentValues = t, this.currentValidations = n, this.shouldValidate = l, this.cachedMessages = u;
+class p {
+  constructor(e, t, i, l = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map()) {
+    d(this, "changeValue", void 0), d(this, "currentValues", void 0), d(this, "currentValidations", void 0), d(this, "shouldValidate", void 0), d(this, "cachedMessages", void 0), this.changeValue = e, this.currentValues = t, this.currentValidations = i, this.shouldValidate = l, this.cachedMessages = s;
   }
   isValid() {
     if (!this.currentValidations) return !0;
@@ -30,15 +30,15 @@ class f {
     return !0;
   }
   getInputProps(e) {
-    const t = this.currentValues[e], n = t ?? null, l = e, u = this.currentValidations && this.currentValidations[e] ? this.currentValidations[e] : (s) => null;
+    const t = this.currentValues[e], i = t ?? null, l = e, s = this.currentValidations && this.currentValidations[e] ? this.currentValidations[e] : (u) => null;
     let a = null;
-    return this.shouldValidate.has(e) ? (a = u(t, this.currentValues), this.cachedMessages.set(e, a)) : a = this.cachedMessages.get(e) ?? null, {
+    return this.shouldValidate.has(e) ? (a = s(t, this.currentValues), this.cachedMessages.set(e, a)) : a = this.cachedMessages.get(e) ?? null, {
       // @ts-ignore – z.B. wenn dein Input `defaultValue` kennt
-      defaultValue: n ?? void 0,
-      initialValue: n ?? void 0,
+      defaultValue: i ?? void 0,
+      initialValue: i ?? void 0,
       formValidation: {
-        setValue: (s) => {
-          this.changeValue(l, s);
+        setValue: (u) => {
+          this.changeValue(l, u);
         },
         notValidMessage: a,
         valid: a === null
@@ -49,28 +49,30 @@ class f {
     };
   }
 }
-const _ = (i) => {
+const I = (r) => {
   const {
     initialValues: e,
     validate: t = {},
-    truthyValidationBeforeSubmit: n = !0,
+    truthyValidationBeforeSubmit: i = !0,
     useInitialValidation: l = !0,
-    onSubmit: u
-  } = i, a = j.useMemo(() => e, [e]), [s, p] = g(a), d = y(/* @__PURE__ */ new Map()), c = w((r, h) => {
-    p((V) => ({
-      ...V,
-      [r]: h
-    }));
-  }, []), [b, v] = g(new f(c, s, t, l ? new Map(Object.keys(a).map((r) => [r, !0])) : /* @__PURE__ */ new Map(), d.current));
-  P(() => {
-    p(a), v(new f(c, a, t, l ? new Map(Object.keys(a).map((r) => [r, !0])) : /* @__PURE__ */ new Map(), d.current));
+    onSubmit: s
+  } = r, a = O.useMemo(() => e, [e]), [u, v] = w(a), V = b(/* @__PURE__ */ new Map()), c = b(u);
+  c.current = u;
+  const h = M((n, f) => {
+    c.current = {
+      ...c.current,
+      [n]: f
+    }, v(c.current);
+  }, []), [S, m] = w(() => new p(h, u, t, l ? new Map(Object.keys(a).map((n) => [n, !0])) : /* @__PURE__ */ new Map(), V.current));
+  F(() => {
+    c.current = a, v(a), m(new p(h, a, t, l ? new Map(Object.keys(a).map((n) => [n, !0])) : /* @__PURE__ */ new Map(), V.current));
   }, [a]);
-  const M = w((r, h = !0) => {
-    const V = r && new Set(Object.keys(s)).has(String(r)) ? /* @__PURE__ */ new Map([[r, !0]]) : new Map(Object.keys(s).map((S) => [String(S), !0])), m = new f(c, s, t, V, d.current);
-    v(m), h && !new Set(Object.keys(s)).has(String(r)) && u && (!n || m.isValid()) && u(s);
-  }, [c, t, u, n, s]);
-  return [b, M, s];
+  const j = M((n, f = !0) => {
+    const o = c.current, y = n && new Set(Object.keys(o)).has(String(n)) ? /* @__PURE__ */ new Map([[n, !0]]) : new Map(Object.keys(o).map((P) => [String(P), !0])), g = new p(h, o, t, y, V.current);
+    m(g), f && !new Set(Object.keys(o)).has(String(n)) && s && (!i || g.isValid()) && s(o);
+  }, [h, t, s, i]);
+  return [S, j, u];
 };
 export {
-  _ as useForm
+  I as useForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {