meticulous-ui 3.9.0 → 3.9.1

package/cjs/components/Form/Form.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),l=require("react"),D=require("styled-components"),E=require("../Button/Button.cjs"),S=require("./FormField.cjs"),$=t=>t&&t.__esModule?t:{default:t},m=$(D),A=m.default.form`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react/jsx-runtime"),a=require("react"),p=require("styled-components"),B=require("../Button/Button.cjs"),D=require("./FormField.cjs"),E=t=>t&&t.__esModule?t:{default:t},m=E(p),T=m.default.form`
   display: flex;
   flex-direction: column;
   gap: ${({$gap:t})=>t};
-`,H=m.default.div`
+`,$=m.default.div`
   align-self: flex-start;
-`,N=t=>Object.fromEntries(t.map(({id:c,validate:n,compProps:u})=>{var i;return n?[c,n((i=u==null?void 0:u.defaultValue)!=null?i:"")===null]:[c,!0]})),x=l.forwardRef(({fields:t=[],allProps:c={},onSubmit:n,submitLabel:u="Submit",disableUntilValid:i=!1,gap:F="2rem",labelMarginBottom:_="0.4rem",...h},M)=>{const b=l.useRef(Object.fromEntries(t.map(({id:e,compProps:r})=>{var a;return[e,(a=r==null?void 0:r.defaultValue)!=null?a:""]}))),V=l.useRef({}),q=l.useCallback(e=>(V.current[e]||(V.current[e]=r=>{b.current[e]=r}),V.current[e]),[]),[I,j]=l.useState(()=>N(t)),O=Object.values(I).every(Boolean),v=l.useRef({}),w=l.useCallback(e=>(v.current[e]||(v.current[e]=r=>{j(a=>({...a,[e]:r}))}),v.current[e]),[]),s=l.useRef({}),p=l.useCallback(e=>(s.current[e]||(s.current[e]={current:null}),s.current[e]),[]);l.useImperativeHandle(M,()=>({getValues:()=>({...b.current})}),[]);const B=l.useCallback(e=>{var f,o,d,y;e.preventDefault();let r=null;const a={};for(const{id:C}of t){const R=s.current[C],k=(o=(f=R==null?void 0:R.current)==null?void 0:f.triggerValidation())!=null?o:!0;a[C]=k,!k&&!r&&(r=C)}if(j(a),r){(y=(d=s.current[r])==null?void 0:d.current)==null||y.scrollIntoView();return}n==null||n({...b.current})},[t,n]);return g.jsxs(A,{onSubmit:B,$gap:F,...h,children:[t.map(({id:e,label:r,component:a,isMandatory:f,allProps:o,compProps:d,validate:y})=>g.jsx(S.default,{ref:p(e),label:r,component:a,isMandatory:f,sharedAllProps:c,allProps:o,compProps:d,validate:y,onValueChange:q(e),onValidityChange:w(e),labelMarginBottom:_},e)),n&&g.jsx(H,{children:g.jsx(E.default,{type:"submit",disabled:i&&!O,children:u})})]})});x.displayName="Form";exports.default=x;
+`,A=t=>Object.fromEntries(t.map(({id:i,validate:u,compProps:s})=>{var o;return u?[i,u((o=s==null?void 0:s.defaultValue)!=null?o:"")===null]:[i,!0]})),x=a.forwardRef(({fields:t=[],allProps:i={},onSubmit:u,submitLabel:s="Submit",disableUntilValid:o=!1,gap:h="2rem",labelMarginBottom:F="0.4rem",...R},_)=>{const V=a.useRef(Object.fromEntries(t.map(({id:e,compProps:r})=>{var n;return[e,(n=r==null?void 0:r.defaultValue)!=null?n:""]}))),b=a.useRef({}),M=a.useCallback(e=>(b.current[e]||(b.current[e]=r=>{V.current[e]=r}),b.current[e]),[]),[q,j]=a.useState(()=>A(t)),I=Object.values(q).every(Boolean),v=a.useRef({}),O=a.useCallback(e=>(v.current[e]||(v.current[e]=r=>{j(n=>({...n,[e]:r}))}),v.current[e]),[]),c=a.useRef({}),w=a.useCallback(e=>(c.current[e]||(c.current[e]={current:null}),c.current[e]),[]);a.useImperativeHandle(_,()=>({getValues:()=>({...V.current})}),[]);const S=a.useCallback(e=>{var f,d,g;e.preventDefault();let r=null;const n={};for(const{id:l}of t){const C=c.current[l],k=(d=(f=C==null?void 0:C.current)==null?void 0:f.triggerValidation())!=null?d:!0;n[l]=k,!k&&!r&&(r=l)}if(j(n),r){const l=(g=c.current[r])==null?void 0:g.current;l==null||l.scrollIntoView(),setTimeout(()=>l==null?void 0:l.triggerShake(),500);return}u==null||u({...V.current})},[t,u]);return y.jsxs(T,{onSubmit:S,$gap:h,noValidate:!0,...R,children:[t.map(({id:e,label:r,component:n,isMandatory:f,allProps:d,compProps:g,validate:l})=>y.jsx(D.default,{ref:w(e),label:r,component:n,isMandatory:f,sharedAllProps:i,allProps:d,compProps:g,validate:l,onValueChange:M(e),onValidityChange:O(e),labelMarginBottom:F},e)),u&&y.jsx($,{children:y.jsx(B.default,{type:"submit",disabled:o&&!I,children:s})})]})});x.displayName="Form";exports.default=x;

package/cjs/components/Form/FormField.cjs

@@ -1,17 +1,25 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),e=require("react"),L=require("styled-components"),T=require("../../colors/red.cjs"),W=t=>t&&t.__esModule?t:{default:t},l=W(L),B=l.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),e=require("react"),F=require("styled-components"),C=require("../../colors/red.cjs"),D=t=>t&&t.__esModule?t:{default:t},l=D(F),H=F.keyframes`
+  0%   { transform: translateX(0); }
+  20%  { transform: translateX(-6px); }
+  40%  { transform: translateX(6px); }
+  60%  { transform: translateX(-4px); }
+  80%  { transform: translateX(4px); }
+  100% { transform: translateX(0); }
+`,N=l.default.div`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-`,D=l.default.div`
+  animation: ${({$shake:t})=>t?H:"none"} 0.35s ease;
+`,O=l.default.div`
   margin-bottom: ${({$labelMarginBottom:t})=>t};
-`,H=l.default.label`
+`,P=l.default.label`
   font-size: 1.6rem;
   font-weight: 600;
   margin-bottom: 0.2rem;
-`,N=l.default.span`
-  color: ${T.default.m600};
+`,A=l.default.span`
+  color: ${C.default.m600};
   vertical-align: super;
-`,O=l.default.span`
+`,G=l.default.span`
   font-size: 1.4rem;
   color: red;
-`,j=e.forwardRef(({label:t,component:_,isMandatory:F,compProps:q,validate:d,onValueChange:m,onValidityChange:f,labelMarginBottom:y="0.4rem",sharedAllProps:p,allProps:g},M)=>{const I=e.useMemo(()=>({...p,...g}),[p,g]),{defaultValue:n,onChange:b,...S}=q||{},[C,$]=e.useState(n!=null?n:""),[h,k]=e.useState(null),v=e.useRef(n!=null?n:""),x=e.useRef(null),u=e.useRef(d);u.current=d;const i=e.useRef(m);i.current=m;const z=e.useRef(f);z.current=f;const a=e.useRef(b);a.current=b,e.useImperativeHandle(M,()=>({triggerValidation:()=>{var o,c;const r=(c=(o=u.current)==null?void 0:o.call(u,v.current))!=null?c:null;return k(r),r===null},scrollIntoView:()=>{var r;return(r=x.current)==null?void 0:r.scrollIntoView({behavior:"smooth",block:"center"})}}));const E=e.useCallback(r=>{var c,R;const o=(r==null?void 0:r.target)!==void 0?r.target.value:r;v.current=o,$(o),(c=a.current)==null||c.call(a,o),(R=i.current)==null||R.call(i,o)},[]);return s.jsxs(B,{ref:x,children:[s.jsx(D,{$labelMarginBottom:y,children:s.jsxs(H,{children:[t,F&&s.jsx(N,{"aria-hidden":"true",children:" *"})]})}),s.jsx(_,{...I,...S,value:C,onChange:E}),h&&s.jsx(O,{role:"alert",children:h})]})});j.displayName="FormField";const P=e.memo(j);exports.default=P;
+`,X=e.forwardRef(({label:t,component:q,isMandatory:M,compProps:$,validate:f,onValueChange:p,onValidityChange:g,labelMarginBottom:I="0.4rem",sharedAllProps:x,allProps:h},z)=>{const E=e.useMemo(()=>({...x,...h}),[x,h]),{defaultValue:s,onChange:b,...K}=$||{},[L,T]=e.useState(s!=null?s:""),[v,R]=e.useState(null),[j,W]=e.useState(0),d=e.useRef(null),k=e.useRef(s!=null?s:""),S=e.useRef(null),a=e.useRef(f);a.current=f;const u=e.useRef(p);u.current=p;const i=e.useRef(g);i.current=g;const m=e.useRef(b);m.current=b,e.useImperativeHandle(z,()=>({triggerValidation:()=>{var n,c;const r=(c=(n=a.current)==null?void 0:n.call(a,k.current))!=null?c:null;return d.current=r,R(r),r===null},triggerShake:()=>W(r=>r+1),scrollIntoView:()=>{var r;return(r=S.current)==null?void 0:r.scrollIntoView({behavior:"smooth",block:"center"})}}));const B=e.useCallback(r=>{var c,_,y;const n=(r==null?void 0:r.target)!==void 0?r.target.value:r;k.current=n,T(n),(c=m.current)==null||c.call(m,n),(_=u.current)==null||_.call(u,n),d.current!==null&&(d.current=null,R(null),(y=i.current)==null||y.call(i,!0))},[]);return o.jsxs(N,{ref:S,$shake:j>0,children:[o.jsx(O,{$labelMarginBottom:I,children:o.jsxs(P,{children:[t,M&&o.jsx(A,{"aria-hidden":"true",children:" *"})]})}),o.jsx(q,{...E,...K,value:L,onChange:B}),v&&o.jsx(G,{role:"alert",children:v})]},j)});X.displayName="FormField";const J=e.memo(X);exports.default=J;

package/components/Form/Form.js

@@ -1,88 +1,89 @@
-import { jsxs as A, jsx as F } from "react/jsx-runtime";
-import { forwardRef as D, useRef as m, useCallback as y, useState as H, useImperativeHandle as N } from "react";
-import x from "styled-components";
-import W from "../Button/Button.js";
-import q from "./FormField.js";
-const z = x.form`
+import { jsxs as $, jsx as h } from "react/jsx-runtime";
+import { forwardRef as A, useRef as d, useCallback as g, useState as D, useImperativeHandle as H } from "react";
+import k from "styled-components";
+import N from "../Button/Button.js";
+import S from "./FormField.js";
+const T = k.form`
   display: flex;
   flex-direction: column;
-  gap: ${({ $gap: r }) => r};
-`, G = x.div`
+  gap: ${({ $gap: n }) => n};
+`, W = k.div`
   align-self: flex-start;
-`, J = (r) => Object.fromEntries(
-  r.map(({ id: c, validate: n, compProps: a }) => {
+`, q = (n) => Object.fromEntries(
+  n.map(({ id: s, validate: l, compProps: u }) => {
     var i;
-    return n ? [c, n((i = a == null ? void 0 : a.defaultValue) != null ? i : "") === null] : [c, !0];
+    return l ? [s, l((i = u == null ? void 0 : u.defaultValue) != null ? i : "") === null] : [s, !0];
   })
-), K = D(
+), z = A(
   ({
-    fields: r = [],
-    allProps: c = {},
-    onSubmit: n,
-    submitLabel: a = "Submit",
+    fields: n = [],
+    allProps: s = {},
+    onSubmit: l,
+    submitLabel: u = "Submit",
     disableUntilValid: i = !1,
-    gap: R = "2rem",
-    labelMarginBottom: j = "0.4rem",
-    ...k
+    gap: p = "2rem",
+    labelMarginBottom: x = "0.4rem",
+    ...j
   }, I) => {
-    const V = m(
-      Object.fromEntries(r.map(({ id: e, compProps: t }) => {
-        var l;
-        return [e, (l = t == null ? void 0 : t.defaultValue) != null ? l : ""];
+    const V = d(
+      Object.fromEntries(n.map(({ id: t, compProps: e }) => {
+        var a;
+        return [t, (a = e == null ? void 0 : e.defaultValue) != null ? a : ""];
       }))
-    ), g = m({}), w = y((e) => (g.current[e] || (g.current[e] = (t) => {
-      V.current[e] = t;
-    }), g.current[e]), []), [M, h] = H(() => J(r)), O = Object.values(M).every(Boolean), b = m({}), B = y((e) => (b.current[e] || (b.current[e] = (t) => {
-      h((l) => ({ ...l, [e]: t }));
-    }), b.current[e]), []), u = m({}), E = y((e) => (u.current[e] || (u.current[e] = { current: null }), u.current[e]), []);
-    N(
+    ), y = d({}), w = g((t) => (y.current[t] || (y.current[t] = (e) => {
+      V.current[t] = e;
+    }), y.current[t]), []), [M, C] = D(() => q(n)), O = Object.values(M).every(Boolean), b = d({}), R = g((t) => (b.current[t] || (b.current[t] = (e) => {
+      C((a) => ({ ...a, [t]: e }));
+    }), b.current[t]), []), c = d({}), B = g((t) => (c.current[t] || (c.current[t] = { current: null }), c.current[t]), []);
+    H(
       I,
       () => ({
         getValues: () => ({ ...V.current })
       }),
       []
     );
-    const $ = y(
-      (e) => {
-        var s, f, o, d;
-        e.preventDefault();
-        let t = null;
-        const l = {};
-        for (const { id: v } of r) {
-          const C = u.current[v], p = (f = (s = C == null ? void 0 : C.current) == null ? void 0 : s.triggerValidation()) != null ? f : !0;
-          l[v] = p, !p && !t && (t = v);
+    const E = g(
+      (t) => {
+        var o, f, m;
+        t.preventDefault();
+        let e = null;
+        const a = {};
+        for (const { id: r } of n) {
+          const v = c.current[r], F = (f = (o = v == null ? void 0 : v.current) == null ? void 0 : o.triggerValidation()) != null ? f : !0;
+          a[r] = F, !F && !e && (e = r);
         }
-        if (h(l), t) {
-          (d = (o = u.current[t]) == null ? void 0 : o.current) == null || d.scrollIntoView();
+        if (C(a), e) {
+          const r = (m = c.current[e]) == null ? void 0 : m.current;
+          r == null || r.scrollIntoView(), setTimeout(() => r == null ? void 0 : r.triggerShake(), 500);
           return;
         }
-        n == null || n({ ...V.current });
+        l == null || l({ ...V.current });
       },
-      [r, n]
+      [n, l]
     );
-    return /* @__PURE__ */ A(z, { onSubmit: $, $gap: R, ...k, children: [
-      r.map(({ id: e, label: t, component: l, isMandatory: s, allProps: f, compProps: o, validate: d }) => /* @__PURE__ */ F(
-        q,
+    return /* @__PURE__ */ $(T, { onSubmit: E, $gap: p, noValidate: !0, ...j, children: [
+      n.map(({ id: t, label: e, component: a, isMandatory: o, allProps: f, compProps: m, validate: r }) => /* @__PURE__ */ h(
+        S,
         {
-          ref: E(e),
-          label: t,
-          component: l,
-          isMandatory: s,
-          sharedAllProps: c,
+          ref: B(t),
+          label: e,
+          component: a,
+          isMandatory: o,
+          sharedAllProps: s,
           allProps: f,
-          compProps: o,
-          validate: d,
-          onValueChange: w(e),
-          onValidityChange: B(e),
-          labelMarginBottom: j
+          compProps: m,
+          validate: r,
+          onValueChange: w(t),
+          onValidityChange: R(t),
+          labelMarginBottom: x
         },
-        e
+        t
       )),
-      n && /* @__PURE__ */ F(G, { children: /* @__PURE__ */ F(W, { type: "submit", disabled: i && !O, children: a }) })
+      l && /* @__PURE__ */ h(W, { children: /* @__PURE__ */ h(N, { type: "submit", disabled: i && !O, children: u }) })
     ] });
   }
 );
-K.displayName = "Form";
+z.displayName = "Form";
 export {
-  K as default
+  z as default
 };

package/components/Form/FormField.js

@@ -1,74 +1,83 @@
-import { jsxs as I, jsx as m } from "react/jsx-runtime";
-import { memo as N, forwardRef as S, useMemo as T, useState as y, useRef as t, useImperativeHandle as A, useCallback as D } from "react";
-import c from "styled-components";
-import G from "../../colors/red.js";
-const J = c.div`
+import { jsxs as j, jsx as u } from "react/jsx-runtime";
+import { memo as T, forwardRef as A, useMemo as D, useState as d, useRef as e, useImperativeHandle as G, useCallback as J } from "react";
+import c, { keyframes as O } from "styled-components";
+import P from "../../colors/red.js";
+const Q = O`
+  0%   { transform: translateX(0); }
+  20%  { transform: translateX(-6px); }
+  40%  { transform: translateX(6px); }
+  60%  { transform: translateX(-4px); }
+  80%  { transform: translateX(4px); }
+  100% { transform: translateX(0); }
+`, U = c.div`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-`, K = c.div`
-  margin-bottom: ${({ $labelMarginBottom: a }) => a};
-`, O = c.label`
+  animation: ${({ $shake: o }) => o ? Q : "none"} 0.35s ease;
+`, Y = c.div`
+  margin-bottom: ${({ $labelMarginBottom: o }) => o};
+`, Z = c.label`
   font-size: 1.6rem;
   font-weight: 600;
   margin-bottom: 0.2rem;
-`, P = c.span`
-  color: ${G.m600};
+`, _ = c.span`
+  color: ${P.m600};
   vertical-align: super;
-`, Q = c.span`
+`, w = c.span`
   font-size: 1.4rem;
   color: red;
-`, C = S(
+`, z = A(
   ({
-    label: a,
-    component: R,
-    isMandatory: $,
-    compProps: j,
-    validate: d,
-    onValueChange: p,
-    onValidityChange: u,
-    labelMarginBottom: k = "0.4rem",
-    sharedAllProps: g,
-    allProps: f
-  }, z) => {
-    const E = T(
-      () => ({ ...g, ...f }),
-      [g, f]
-    ), { defaultValue: o, onChange: h, ...L } = j || {}, [M, W] = y(o != null ? o : ""), [b, q] = y(null), v = t(o != null ? o : ""), x = t(null), s = t(d);
-    s.current = d;
-    const i = t(p);
-    i.current = p;
-    const B = t(u);
-    B.current = u;
-    const l = t(h);
-    l.current = h, A(z, () => ({
+    label: o,
+    component: E,
+    isMandatory: K,
+    compProps: L,
+    validate: f,
+    onValueChange: h,
+    onValidityChange: g,
+    labelMarginBottom: M = "0.4rem",
+    sharedAllProps: x,
+    allProps: b
+  }, R) => {
+    const W = D(
+      () => ({ ...x, ...b }),
+      [x, b]
+    ), { defaultValue: n, onChange: k, ...q } = L || {}, [B, C] = d(n != null ? n : ""), [v, F] = d(null), [X, H] = d(0), p = e(null), $ = e(n != null ? n : ""), y = e(null), a = e(f);
+    a.current = f;
+    const l = e(h);
+    l.current = h;
+    const m = e(g);
+    m.current = g;
+    const i = e(k);
+    i.current = k, G(R, () => ({
       triggerValidation: () => {
-        var e, n;
-        const r = (n = (e = s.current) == null ? void 0 : e.call(s, v.current)) != null ? n : null;
-        return q(r), r === null;
+        var t, s;
+        const r = (s = (t = a.current) == null ? void 0 : t.call(a, $.current)) != null ? s : null;
+        return p.current = r, F(r), r === null;
       },
+      triggerShake: () => H((r) => r + 1),
       scrollIntoView: () => {
         var r;
-        return (r = x.current) == null ? void 0 : r.scrollIntoView({ behavior: "smooth", block: "center" });
+        return (r = y.current) == null ? void 0 : r.scrollIntoView({ behavior: "smooth", block: "center" });
       }
     }));
-    const H = D((r) => {
-      var n, F;
-      const e = (r == null ? void 0 : r.target) !== void 0 ? r.target.value : r;
-      v.current = e, W(e), (n = l.current) == null || n.call(l, e), (F = i.current) == null || F.call(i, e);
+    const N = J((r) => {
+      var s, I, S;
+      const t = (r == null ? void 0 : r.target) !== void 0 ? r.target.value : r;
+      $.current = t, C(t), (s = i.current) == null || s.call(i, t), (I = l.current) == null || I.call(l, t), p.current !== null && (p.current = null, F(null), (S = m.current) == null || S.call(m, !0));
     }, []);
-    return /* @__PURE__ */ I(J, { ref: x, children: [
-      /* @__PURE__ */ m(K, { $labelMarginBottom: k, children: /* @__PURE__ */ I(O, { children: [
-        a,
-        $ && /* @__PURE__ */ m(P, { "aria-hidden": "true", children: " *" })
+    return /* @__PURE__ */ j(U, { ref: y, $shake: X > 0, children: [
+      /* @__PURE__ */ u(Y, { $labelMarginBottom: M, children: /* @__PURE__ */ j(Z, { children: [
+        o,
+        K && /* @__PURE__ */ u(_, { "aria-hidden": "true", children: " *" })
       ] }) }),
-      /* @__PURE__ */ m(R, { ...E, ...L, value: M, onChange: H }),
-      b && /* @__PURE__ */ m(Q, { role: "alert", children: b })
-    ] });
+      /* @__PURE__ */ u(E, { ...W, ...q, value: B, onChange: N }),
+      v && /* @__PURE__ */ u(w, { role: "alert", children: v })
+    ] }, X);
   }
 );
-C.displayName = "FormField";
-const _ = N(C);
+z.displayName = "FormField";
+const nr = T(z);
 export {
-  _ as default
+  nr as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",