meticulous-ui 3.11.4 → 3.11.5

package/cjs/components/Button/Button.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),M=require("react"),D=require("../Spinner/Spinner.cjs"),P=require("../../colors/colorMap.cjs"),w=require("../../colors/blue.cjs"),R=require("../Ripple/Ripple.cjs"),S=require("../../colors/white.cjs"),v=require("../../colors/grey.cjs"),y=require("./constants.cjs"),z=require("prop-types"),l=require("styled-components"),x=e=>e&&e.__esModule?e:{default:e},o=x(z),d=x(l),B=d.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),R=require("react"),D=require("../Spinner/Spinner.cjs"),P=require("../../colors/colorMap.cjs"),y=require("../../colors/blue.cjs"),S=require("../Ripple/Ripple.cjs"),z=require("../../colors/white.cjs"),v=require("../../colors/grey.cjs"),w=require("./constants.cjs"),B=require("prop-types"),l=require("styled-components"),x=e=>e&&e.__esModule?e:{default:e},o=x(B),d=x(l),E=d.default.button`
   height: ${({$height:e})=>e}rem;
   width: ${({$width:e})=>e}rem;
   border-radius: 0.96rem;
@@ -15,18 +15,18 @@
 
   ${({disabled:e,$isLoading:t})=>!(e||t)&&l.css`
       &:hover {
-        background-color: ${({$hoverColor:n})=>n};
+        background-color: ${({$hoverColor:r})=>r};
       }
 
       &:active {
-        background-color: ${({$activeColor:n})=>n};
+        background-color: ${({$activeColor:r})=>r};
       }
     `};
 
   &:focus-visible {
     outline: none;
   }
-`,E=d.default.div`
+`,K=d.default.div`
   font-size: ${({$font:e})=>e}rem;
   font-weight: 500;
   max-width: 100%;
@@ -34,7 +34,7 @@
   color: ${({$textColor:e})=>e};
   opacity: ${({$isLoading:e})=>e?0:1};
   transition: opacity 0.3s ease;
-`,K=d.default.div`
+`,O=d.default.div`
   height: ${({$height:e})=>e}rem;
   width: ${({$width:e})=>e}rem;
   display: inline-block;
@@ -53,7 +53,7 @@
         transform: translateY(-2px);
       }
     `};
-`,O=d.default.div`
+`,W=d.default.div`
   position: absolute;
   inset: 0;
   display: flex;
@@ -62,4 +62,4 @@
   opacity: ${({$isLoading:e})=>e?1:0};
   transition: opacity 0.3s ease;
   pointer-events: none;
-`,W=({theme:e,children:t})=>r.jsx(R.default,{rippleColor:e.m100,children:t}),C=e=>{var g;const{children:t,theme:n=w.blue,size:q=y.MEDIUM,width:c,leftIcon:U,rightIcon:Y,isLoading:i,textColor:u,onKeyDown:a,...j}=e||{},f=M.useRef(0),_=s=>{if(s.key==="Enter"||s.key===" "){const $=Date.now();if($-f.current<500){s.preventDefault(),s.stopPropagation();return}f.current=$}a==null||a(s)},{m400:T,m500:k,m600:I}=(g=P.default[n])!=null?g:w.blue,{height:h,width:p,font:L}=y.SIZE[q]||{},m=["white","yellow"].includes(n)?v.default.m600:S.default,b=r.jsxs(B,{type:"button",...j,onKeyDown:_,$hoverColor:k,$activeColor:I,$selectedColor:T,$height:h,$width:c||p,disabled:e.disabled,$isLoading:i,children:[r.jsx(O,{$isLoading:i,children:r.jsx(D.default,{size:"small",color:u||m})}),r.jsx(E,{$isLoading:i,$textColor:u||m,$font:L,children:t})]});return r.jsx(K,{$height:h,$width:c||p,disabled:e.disabled,$isLoading:i,children:i?b:r.jsx(W,{theme:n,children:b})})};C.propTypes={children:o.default.node,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),leftIcon:o.default.elementType,rightIcon:o.default.elementType,isLoading:o.default.bool,textColor:o.default.string,disabled:o.default.bool};exports.default=C;
+`,U=({theme:e,children:t})=>n.jsx(S.default,{rippleColor:e.m100,borderRadius:"0.96rem",children:t}),C=e=>{var g;const{children:t,theme:r=y.blue,size:q=w.MEDIUM,width:u,leftIcon:Y,rightIcon:Z,isLoading:i,textColor:c,onKeyDown:a,style:j,..._}=e||{},f=R.useRef(0),T=s=>{if(s.key==="Enter"||s.key===" "){const $=Date.now();if($-f.current<500){s.preventDefault(),s.stopPropagation();return}f.current=$}a==null||a(s)},{m400:k,m500:I,m600:L}=(g=P.default[r])!=null?g:y.blue,{height:h,width:p,font:M}=w.SIZE[q]||{},m=["white","yellow"].includes(r)?v.default.m600:z.default,b=n.jsxs(E,{type:"button",..._,onKeyDown:T,$hoverColor:I,$activeColor:L,$selectedColor:k,$height:h,$width:u||p,disabled:e.disabled,$isLoading:i,children:[n.jsx(W,{$isLoading:i,children:n.jsx(D.default,{size:"small",color:c||m})}),n.jsx(K,{$isLoading:i,$textColor:c||m,$font:M,children:t})]});return n.jsx(O,{style:j,$height:h,$width:u||p,disabled:e.disabled,$isLoading:i,children:i?b:n.jsx(U,{theme:r,children:b})})};C.propTypes={children:o.default.node,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),leftIcon:o.default.elementType,rightIcon:o.default.elementType,isLoading:o.default.bool,textColor:o.default.string,disabled:o.default.bool};exports.default=C;

package/cjs/components/Input/FileUploader/FileUploader.cjs

@@ -82,4 +82,4 @@
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
-`,V=({theme:e,children:t})=>r.jsx(L.default,{rippleColor:e.m100,children:t}),_=({label:e,labelColor:t,theme:n=v.blue,size:k=j.MEDIUM,width:z,isLoading:i,disabled:s,prefixIcon:p=F.default,suffixIcon:f,type:I="file",accept:M,isMultiple:R,onChange:T,...D})=>{var g;const h=b.useRef(null),{m400:P,m500:S,m600:W}=(g=H.default[n])!=null?g:v.blue,{height:$,width:E,font:a}=j.SIZE[k]||{},c=t||["white","yellow"].includes(n)?q.default.m600:B.default,m=b.useRef(0),K=u=>{var w;if(u.key==="Enter"||u.key===" "){u.preventDefault();const y=Date.now();if(y-m.current<500){u.stopPropagation();return}m.current=y,!s&&!i&&((w=h.current)==null||w.click())}},x=r.jsxs(A,{$selectedColor:P,$hoverColor:S,$height:$,$width:z||E,$activeColor:W,disabled:s,$isLoading:i,tabIndex:0,"aria-disabled":s,onKeyDown:K,children:[r.jsx(Q,{ref:h,type:I,accept:M,multiple:R,disabled:s,onChange:T,tabIndex:-1}),r.jsx(J,{$isLoading:i,children:r.jsx(O.default,{size:"small",color:c})}),r.jsxs(N,{$isLoading:i,children:[p&&r.jsx(p,{color:c,size:a+19}),r.jsx(G,{color:c,size:`${a}rem`,$prefixIcon:!!p,$suffixIcon:!!f,$iconSize:a+19,title:e,children:e}),f&&r.jsx(f,{color:c,size:a+19})]})]});return r.jsx(Z,{$height:$,disabled:s,$isLoading:i,...D,children:i||s?x:r.jsx(V,{theme:n,children:x})})};_.propTypes={label:o.default.string,labelColor:o.default.string,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),isLoading:o.default.bool,disabled:o.default.bool,prefixIcon:o.default.elementType,suffixIcon:o.default.elementType,type:o.default.string,accept:o.default.string,isMultiple:o.default.bool,onChange:o.default.func};exports.default=_;
+`,V=({theme:e,children:t})=>r.jsx(L.default,{rippleColor:e.m100,borderRadius:"0.96rem",children:t}),_=({label:e,labelColor:t,theme:n=v.blue,size:k=j.MEDIUM,width:R,isLoading:i,disabled:s,prefixIcon:p=F.default,suffixIcon:f,type:z="file",accept:I,isMultiple:M,onChange:T,...D})=>{var g;const h=b.useRef(null),{m400:P,m500:S,m600:W}=(g=H.default[n])!=null?g:v.blue,{height:m,width:E,font:a}=j.SIZE[k]||{},c=t||["white","yellow"].includes(n)?q.default.m600:B.default,$=b.useRef(0),K=u=>{var w;if(u.key==="Enter"||u.key===" "){u.preventDefault();const y=Date.now();if(y-$.current<500){u.stopPropagation();return}$.current=y,!s&&!i&&((w=h.current)==null||w.click())}},x=r.jsxs(A,{$selectedColor:P,$hoverColor:S,$height:m,$width:R||E,$activeColor:W,disabled:s,$isLoading:i,tabIndex:0,"aria-disabled":s,onKeyDown:K,children:[r.jsx(Q,{ref:h,type:z,accept:I,multiple:M,disabled:s,onChange:T,tabIndex:-1}),r.jsx(J,{$isLoading:i,children:r.jsx(O.default,{size:"small",color:c})}),r.jsxs(N,{$isLoading:i,children:[p&&r.jsx(p,{color:c,size:a+19}),r.jsx(G,{color:c,size:`${a}rem`,$prefixIcon:!!p,$suffixIcon:!!f,$iconSize:a+19,title:e,children:e}),f&&r.jsx(f,{color:c,size:a+19})]})]});return r.jsx(Z,{$height:m,disabled:s,$isLoading:i,...D,children:i||s?x:r.jsx(V,{theme:n,children:x})})};_.propTypes={label:o.default.string,labelColor:o.default.string,theme:o.default.string,size:o.default.string,width:o.default.oneOfType([o.default.string,o.default.number]),isLoading:o.default.bool,disabled:o.default.bool,prefixIcon:o.default.elementType,suffixIcon:o.default.elementType,type:o.default.string,accept:o.default.string,isMultiple:o.default.bool,onChange:o.default.func};exports.default=_;

package/cjs/components/Pagination/Pagination.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),D=require("react"),y=require("styled-components"),L=require("../Icons/ChevronLeft.cjs"),b=require("../Icons/ChevronRight.cjs"),I=require("../Ripple/Ripple.cjs"),B=require("../../colors/colorMap.cjs"),P=require("../../colors/teal.cjs"),M=require("../../colors/grey.cjs"),q=require("../../colors/white.cjs"),O=require("../../colors/black.cjs"),o=require("./constants.cjs"),F=e=>e&&e.__esModule?e:{default:e},a=F(y),j=e=>({$shades:i})=>{if(["#FFFFFF"].includes(i))return O.black.m900;if(e===o.SELECTED_BG)return i.m600;if(e===o.NOT_SELECTED_BG)return i.m50;if(e===o.ACTIVE_NOT_SELECTED_BG)return i.m100},p=a.default.nav`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),D=require("react"),y=require("styled-components"),G=require("../Icons/ChevronLeft.cjs"),L=require("../Icons/ChevronRight.cjs"),I=require("../Ripple/Ripple.cjs"),B=require("../../colors/colorMap.cjs"),P=require("../../colors/teal.cjs"),M=require("../../colors/grey.cjs"),q=require("../../colors/white.cjs"),O=require("../../colors/black.cjs"),o=require("./constants.cjs"),F=e=>e&&e.__esModule?e:{default:e},a=F(y),j=e=>({$shades:i})=>{if(["#FFFFFF"].includes(i))return O.black.m900;if(e===o.SELECTED_BG)return i.m600;if(e===o.NOT_SELECTED_BG)return i.m50;if(e===o.ACTIVE_NOT_SELECTED_BG)return i.m100},p=a.default.nav`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -55,7 +55,7 @@
   color: ${M.default.m700};
   font-size: 1.4rem;
   user-select: none;
-`,G=a.default.button`
+`,b=a.default.button`
   border: none;
   background: none;
   padding: 0;
@@ -69,13 +69,13 @@
   &:focus-visible {
     outline: 1px solid ${({$shades:e})=>e==null?void 0:e.m600};
   }
-`,z=a.default(L.default)`
+`,z=a.default(G.default)`
   cursor: pointer;
-`,g=a.default(b.default)`
+`,g=a.default(L.default)`
   cursor: pointer;
 `,w=a.default.div`
   min-width: ${({size:e})=>e};
   display: flex;
   align-items: center;
   justify-content: space-between;
-`,h=({size:e,selected:i,shades:n,changePage:C})=>t=>{const _=o.SIZE_REM_MAPPING[e],$=o.FONT_SIZE_MAPPING[e],f=n,s=i===t,l=()=>{C(t)},x=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),l())};return r.jsx(K,{"data-testid":s?"current-page":`test-${t}`,$isSelected:s,onClick:l,onKeyDown:x,tabIndex:s?0:-1,"aria-label":`Page ${t}`,"aria-current":s?"page":void 0,$shades:f,$individualRemSize:_,$fontRemSize:$,children:t},`page_${t}`)},T=()=>r.jsx(Z,{"aria-hidden":"true",children:"…"}),A=({iconSize:e,shades:i,setPrevPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Previous page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(z,{size:e,"aria-hidden":"true"})})}),k=({iconSize:e,shades:i,setNextPage:n})=>r.jsx(G,{onClick:n,"aria-label":"Next page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,children:r.jsx(g,{size:e,"aria-hidden":"true"})})}),U=({pageNumber:e,setPageNumber:i,totalPages:n,theme:C="lime",size:t=o.MEDIUM,isDisabled:_=!1,...$})=>{var R;const f=D.useRef(null),s=D.useRef(!1);D.useEffect(()=>{var d,v;s.current&&(s.current=!1,(v=(d=f.current)==null?void 0:d.querySelector('[aria-current="page"]'))==null||v.focus())},[e]);const l=d=>{d!==e&&i(d)},x=()=>{e>1&&l(e-1)},u=()=>{e<n&&l(e+1)},S=d=>{["ArrowLeft","ArrowUp"].includes(d.code)&&(s.current=!0,x()),["ArrowRight","ArrowDown"].includes(d.code)&&(s.current=!0,u())},c=(R=B.default[C])!=null?R:P.default,m=o.SIZE_REM_MAPPING[t],E=o.ICON_SIZE_MAPPING[t];return n<=7?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsx(w,{size:`${n*m}rem`,children:Array.from({length:n},(d,v)=>v+1).map(h({size:t,selected:e,shades:c,changePage:l}))}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):n<10||e<4||e>n-3&&e<=n?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2,3,4].map(h({size:t,selected:e,shades:c,changePage:l})),T(),[n-3,n-2,n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]}):r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2].map(h({size:t,selected:e,shades:c,changePage:l})),e>4&&T(),[e-1,e,e+1].map(h({size:t,selected:e,shades:c,changePage:l})),e<n-3&&T(),[n-1,n].map(h({size:t,selected:e,shades:c,changePage:l}))]}),r.jsx(k,{iconSize:E,shades:c,setNextPage:u})]})};exports.default=U;
+`,h=({size:e,selected:i,shades:n,changePage:C})=>t=>{const _=o.SIZE_REM_MAPPING[e],$=o.FONT_SIZE_MAPPING[e],f=n,l=i===t,s=()=>{C(t)},x=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),s())};return r.jsx(K,{"data-testid":l?"current-page":`test-${t}`,$isSelected:l,onClick:s,onKeyDown:x,tabIndex:l?0:-1,"aria-label":`Page ${t}`,"aria-current":l?"page":void 0,$shades:f,$individualRemSize:_,$fontRemSize:$,children:t},`page_${t}`)},T=()=>r.jsx(Z,{"aria-hidden":"true",children:"…"}),A=({iconSize:e,shades:i,setPrevPage:n})=>r.jsx(b,{onClick:n,"aria-label":"Previous page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,borderRadius:"50%",children:r.jsx(z,{size:e,"aria-hidden":"true"})})}),R=({iconSize:e,shades:i,setNextPage:n})=>r.jsx(b,{onClick:n,"aria-label":"Next page",$shades:i,children:r.jsx(I.default,{rippleColor:i.m50,borderRadius:"50%",children:r.jsx(g,{size:e,"aria-hidden":"true"})})}),U=({pageNumber:e,setPageNumber:i,totalPages:n,theme:C="lime",size:t=o.MEDIUM,isDisabled:_=!1,...$})=>{var k;const f=D.useRef(null),l=D.useRef(!1);D.useEffect(()=>{var d,v;l.current&&(l.current=!1,(v=(d=f.current)==null?void 0:d.querySelector('[aria-current="page"]'))==null||v.focus())},[e]);const s=d=>{d!==e&&i(d)},x=()=>{e>1&&s(e-1)},u=()=>{e<n&&s(e+1)},S=d=>{["ArrowLeft","ArrowUp"].includes(d.code)&&(l.current=!0,x()),["ArrowRight","ArrowDown"].includes(d.code)&&(l.current=!0,u())},c=(k=B.default[C])!=null?k:P.default,m=o.SIZE_REM_MAPPING[t],E=o.ICON_SIZE_MAPPING[t];return n<=7?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsx(w,{size:`${n*m}rem`,children:Array.from({length:n},(d,v)=>v+1).map(h({size:t,selected:e,shades:c,changePage:s}))}),r.jsx(R,{iconSize:E,shades:c,setNextPage:u})]}):n<10||e<4||e>n-3&&e<=n?r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,...$,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2,3,4].map(h({size:t,selected:e,shades:c,changePage:s})),T(),[n-3,n-2,n-1,n].map(h({size:t,selected:e,shades:c,changePage:s}))]}),r.jsx(R,{iconSize:E,shades:c,setNextPage:u})]}):r.jsxs(p,{ref:f,onKeyDown:S,"aria-label":"Pagination",$isDisabled:_,children:[r.jsx(A,{iconSize:E,shades:c,setPrevPage:x}),r.jsxs(w,{size:`${9*m}rem`,children:[[1,2].map(h({size:t,selected:e,shades:c,changePage:s})),e>4&&T(),[e-1,e,e+1].map(h({size:t,selected:e,shades:c,changePage:s})),e<n-3&&T(),[n-1,n].map(h({size:t,selected:e,shades:c,changePage:s}))]}),r.jsx(R,{iconSize:E,shades:c,setNextPage:u})]})};exports.default=U;

package/cjs/components/Ripple/Ripple.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react/jsx-runtime"),c=require("react"),g=".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}",h=({children:a,rippleColor:p="rgba(255, 255, 255, 0.3)",className:u="",...d})=>{const i=c.useRef(null);c.useEffect(()=>{if(!document.getElementById("meticulous-ripple-styles")){const e=document.createElement("style");e.id="meticulous-ripple-styles",e.textContent=g,document.head.appendChild(e)}},[]);const l=(e,n)=>{const r=i.current;if(!r)return;const t=document.createElement("span"),s=r.getBoundingClientRect(),o=Math.max(s.width,s.height);t.style.width=t.style.height=`${o}px`,t.style.left=`${e-o/2}px`,t.style.top=`${n-o/2}px`,t.style.backgroundColor=p,t.classList.add("ripple-effect"),r.appendChild(t),t.addEventListener("animationend",()=>t.remove())},m=e=>{if(e.detail===0)return;const n=i.current.getBoundingClientRect();l(e.clientX-n.left,e.clientY-n.top)},f=e=>{if(e.key!=="Enter"&&e.key!==" ")return;const n=i.current.getBoundingClientRect();l(n.width/2,n.height/2)};return y.jsx("div",{ref:i,className:`ripple-container ${u}`,onClick:m,onKeyDown:f,...d,children:a})};exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),a=require("react"),h=".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}",R=({children:p,rippleColor:u="rgba(255, 255, 255, 0.3)",borderRadius:d,className:m="",...l})=>{const i=a.useRef(null);a.useEffect(()=>{if(!document.getElementById("meticulous-ripple-styles")){const e=document.createElement("style");e.id="meticulous-ripple-styles",e.textContent=h,document.head.appendChild(e)}},[]);const s=(e,n)=>{const r=i.current;if(!r)return;const t=document.createElement("span"),c=r.getBoundingClientRect(),o=Math.max(c.width,c.height);t.style.width=t.style.height=`${o}px`,t.style.left=`${e-o/2}px`,t.style.top=`${n-o/2}px`,t.style.backgroundColor=u,t.classList.add("ripple-effect"),r.appendChild(t),t.addEventListener("animationend",()=>t.remove())},f=e=>{if(e.detail===0)return;const n=i.current.getBoundingClientRect();s(e.clientX-n.left,e.clientY-n.top)},y=e=>{if(e.key!=="Enter"&&e.key!==" ")return;const n=i.current.getBoundingClientRect();s(n.width/2,n.height/2)};return g.jsx("div",{ref:i,className:`ripple-container ${m}`,onClick:f,onKeyDown:y,...l,style:{borderRadius:d,...l.style},children:p})};exports.default=R;

package/components/Button/Button.js

@@ -1,15 +1,15 @@
 import { jsxs as z, jsx as i } from "react/jsx-runtime";
 import { useRef as D } from "react";
-import R from "../Spinner/Spinner.js";
-import j from "../../colors/colorMap.js";
+import j from "../Spinner/Spinner.js";
+import B from "../../colors/colorMap.js";
 import { blue as w } from "../../colors/blue.js";
-import B from "../Ripple/Ripple.js";
-import E from "../../colors/white.js";
+import E from "../Ripple/Ripple.js";
+import P from "../../colors/white.js";
 import y from "../../colors/grey.js";
-import { MEDIUM as P, SIZE as S } from "./constants.js";
+import { MEDIUM as S, SIZE as K } from "./constants.js";
 import t from "prop-types";
 import l, { css as a } from "styled-components";
-const K = l.button`
+const M = l.button`
   height: ${({ $height: o }) => o}rem;
   width: ${({ $width: o }) => o}rem;
   border-radius: 0.96rem;
@@ -37,7 +37,7 @@ const K = l.button`
   &:focus-visible {
     outline: none;
   }
-`, M = l.div`
+`, W = l.div`
   font-size: ${({ $font: o }) => o}rem;
   font-weight: 500;
   max-width: 100%;
@@ -45,7 +45,7 @@ const K = l.button`
   color: ${({ $textColor: o }) => o};
   opacity: ${({ $isLoading: o }) => o ? 0 : 1};
   transition: opacity 0.3s ease;
-`, W = l.div`
+`, O = l.div`
   height: ${({ $height: o }) => o}rem;
   width: ${({ $width: o }) => o}rem;
   display: inline-block;
@@ -64,7 +64,7 @@ const K = l.button`
         transform: translateY(-2px);
       }
     `};
-`, O = l.div`
+`, U = l.div`
   position: absolute;
   inset: 0;
   display: flex;
@@ -73,20 +73,21 @@ const K = l.button`
   opacity: ${({ $isLoading: o }) => o ? 1 : 0};
   transition: opacity 0.3s ease;
   pointer-events: none;
-`, U = ({ theme: o, children: e }) => /* @__PURE__ */ i(B, { rippleColor: o.m100, children: e }), Y = (o) => {
+`, Y = ({ theme: o, children: e }) => /* @__PURE__ */ i(E, { rippleColor: o.m100, borderRadius: "0.96rem", children: e }), Z = (o) => {
   var b;
   const {
     children: e,
     theme: r = w,
-    size: v = P,
+    size: v = S,
     width: c,
-    leftIcon: Z,
-    rightIcon: q,
+    leftIcon: q,
+    rightIcon: A,
     isLoading: n,
     textColor: m,
     onKeyDown: d,
-    ...C
-  } = o || {}, p = D(0), x = (s) => {
+    style: C,
+    ...x
+  } = o || {}, p = D(0), k = (s) => {
     if (s.key === "Enter" || s.key === " ") {
       const g = Date.now();
       if (g - p.current < 500) {
@@ -96,37 +97,38 @@ const K = l.button`
       p.current = g;
     }
     d == null || d(s);
-  }, { m400: k, m500: I, m600: L } = (b = j[r]) != null ? b : w, { height: h, width: f, font: T } = S[v] || {}, $ = ["white", "yellow"].includes(r) ? y.m600 : E, u = /* @__PURE__ */ z(
-    K,
+  }, { m400: I, m500: L, m600: R } = (b = B[r]) != null ? b : w, { height: h, width: f, font: T } = K[v] || {}, u = ["white", "yellow"].includes(r) ? y.m600 : P, $ = /* @__PURE__ */ z(
+    M,
     {
       type: "button",
-      ...C,
-      onKeyDown: x,
-      $hoverColor: I,
-      $activeColor: L,
-      $selectedColor: k,
+      ...x,
+      onKeyDown: k,
+      $hoverColor: L,
+      $activeColor: R,
+      $selectedColor: I,
       $height: h,
       $width: c || f,
       disabled: o.disabled,
       $isLoading: n,
       children: [
-        /* @__PURE__ */ i(O, { $isLoading: n, children: /* @__PURE__ */ i(R, { size: "small", color: m || $ }) }),
-        /* @__PURE__ */ i(M, { $isLoading: n, $textColor: m || $, $font: T, children: e })
+        /* @__PURE__ */ i(U, { $isLoading: n, children: /* @__PURE__ */ i(j, { size: "small", color: m || u }) }),
+        /* @__PURE__ */ i(W, { $isLoading: n, $textColor: m || u, $font: T, children: e })
       ]
     }
   );
   return /* @__PURE__ */ i(
-    W,
+    O,
     {
+      style: C,
       $height: h,
       $width: c || f,
       disabled: o.disabled,
       $isLoading: n,
-      children: n ? u : /* @__PURE__ */ i(U, { theme: r, children: u })
+      children: n ? $ : /* @__PURE__ */ i(Y, { theme: r, children: $ })
     }
   );
 };
-Y.propTypes = {
+Z.propTypes = {
   /** Button label or content */
   children: t.node,
   /** Color theme key from the meticulous-ui color map. Defaults to `'blue'` */
@@ -147,5 +149,5 @@ Y.propTypes = {
   disabled: t.bool
 };
 export {
-  Y as default
+  Z as default
 };

package/components/Input/FileUploader/FileUploader.js

@@ -98,7 +98,7 @@ const Z = l.div`
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
-`, Q = ({ theme: e, children: o }) => /* @__PURE__ */ t(H, { rippleColor: e.m100, children: o }), V = ({
+`, Q = ({ theme: e, children: o }) => /* @__PURE__ */ t(H, { rippleColor: e.m100, borderRadius: "0.96rem", children: o }), V = ({
   label: e,
   labelColor: o,
   theme: i = C,

package/components/Pagination/Pagination.js

@@ -9,13 +9,13 @@ import U from "../../colors/teal.js";
 import j from "../../colors/grey.js";
 import L from "../../colors/white.js";
 import { black as q } from "../../colors/black.js";
-import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as g, SIZE_REM_MAPPING as G, SELECTED_BG as I, NOT_SELECTED_BG as T, ACTIVE_NOT_SELECTED_BG as K } from "./constants.js";
+import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as g, SIZE_REM_MAPPING as G, SELECTED_BG as I, NOT_SELECTED_BG as b, ACTIVE_NOT_SELECTED_BG as K } from "./constants.js";
 const v = (e) => ({ $shades: i }) => {
   if (["#FFFFFF"].includes(i))
     return q.m900;
   if (e === I)
     return i.m600;
-  if (e === T)
+  if (e === b)
     return i.m50;
   if (e === K)
     return i.m100;
@@ -60,7 +60,7 @@ const v = (e) => ({ $shades: i }) => {
           background-color: transparent;
 
           &:hover {
-            background-color: ${v(T)};
+            background-color: ${v(b)};
           }
 
           &:active {
@@ -69,7 +69,7 @@ const v = (e) => ({ $shades: i }) => {
           }
 
           &:focus-visible {
-            outline: 1px solid ${v(T)};
+            outline: 1px solid ${v(b)};
           }
         `}
 `, Q = f.span`
@@ -122,7 +122,7 @@ const v = (e) => ({ $shades: i }) => {
     },
     `page_${n}`
   );
-}, D = () => /* @__PURE__ */ o(Q, { "aria-hidden": "true", children: "…" }), S = ({ iconSize: e, shades: i, setPrevPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Previous page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, children: /* @__PURE__ */ o(W, { size: e, "aria-hidden": "true" }) }) }), _ = ({ iconSize: e, shades: i, setNextPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Next page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, children: /* @__PURE__ */ o(X, { size: e, "aria-hidden": "true" }) }) }), fe = ({
+}, D = () => /* @__PURE__ */ o(Q, { "aria-hidden": "true", children: "…" }), S = ({ iconSize: e, shades: i, setPrevPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Previous page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, borderRadius: "50%", children: /* @__PURE__ */ o(W, { size: e, "aria-hidden": "true" }) }) }), _ = ({ iconSize: e, shades: i, setNextPage: r }) => /* @__PURE__ */ o(P, { onClick: r, "aria-label": "Next page", $shades: i, children: /* @__PURE__ */ o(M, { rippleColor: i.m50, borderRadius: "50%", children: /* @__PURE__ */ o(X, { size: e, "aria-hidden": "true" }) }) }), fe = ({
   pageNumber: e,
   setPageNumber: i,
   totalPages: r,
@@ -131,7 +131,7 @@ const v = (e) => ({ $shades: i }) => {
   isDisabled: p = !1,
   ...y
 }) => {
-  var b;
+  var T;
   const a = F(null), l = F(!1);
   B(() => {
     var s, w;
@@ -145,7 +145,7 @@ const v = (e) => ({ $shades: i }) => {
     e < r && c(e + 1);
   }, E = (s) => {
     ["ArrowLeft", "ArrowUp"].includes(s.code) && (l.current = !0, u()), ["ArrowRight", "ArrowDown"].includes(s.code) && (l.current = !0, d());
-  }, t = (b = Z[x]) != null ? b : U, C = G[n], m = H[n];
+  }, t = (T = Z[x]) != null ? T : U, C = G[n], m = H[n];
   return r <= 7 ? /* @__PURE__ */ $(
     k,
     {

package/components/Ripple/Ripple.js

@@ -1,44 +1,46 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as y, useEffect as h } from "react";
-const g = ".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}", x = ({
-  children: c,
+import { jsx as y } from "react/jsx-runtime";
+import { useRef as h, useEffect as g } from "react";
+const C = ".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}", E = ({
+  children: a,
   rippleColor: p = "rgba(255, 255, 255, 0.3)",
-  className: a = "",
-  ...d
+  borderRadius: d,
+  className: u = "",
+  ...l
 }) => {
-  const i = y(null);
-  h(() => {
+  const i = h(null);
+  g(() => {
     if (!document.getElementById("meticulous-ripple-styles")) {
       const e = document.createElement("style");
-      e.id = "meticulous-ripple-styles", e.textContent = g, document.head.appendChild(e);
+      e.id = "meticulous-ripple-styles", e.textContent = C, document.head.appendChild(e);
     }
   }, []);
-  const l = (e, n) => {
+  const s = (e, n) => {
     const o = i.current;
     if (!o) return;
-    const t = document.createElement("span"), s = o.getBoundingClientRect(), r = Math.max(s.width, s.height);
+    const t = document.createElement("span"), c = o.getBoundingClientRect(), r = Math.max(c.width, c.height);
     t.style.width = t.style.height = `${r}px`, t.style.left = `${e - r / 2}px`, t.style.top = `${n - r / 2}px`, t.style.backgroundColor = p, t.classList.add("ripple-effect"), o.appendChild(t), t.addEventListener("animationend", () => t.remove());
-  }, u = (e) => {
+  }, m = (e) => {
     if (e.detail === 0) return;
     const n = i.current.getBoundingClientRect();
-    l(e.clientX - n.left, e.clientY - n.top);
-  }, m = (e) => {
+    s(e.clientX - n.left, e.clientY - n.top);
+  }, f = (e) => {
     if (e.key !== "Enter" && e.key !== " ") return;
     const n = i.current.getBoundingClientRect();
-    l(n.width / 2, n.height / 2);
+    s(n.width / 2, n.height / 2);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: i,
-      className: `ripple-container ${a}`,
-      onClick: u,
-      onKeyDown: m,
-      ...d,
-      children: c
+      className: `ripple-container ${u}`,
+      onClick: m,
+      onKeyDown: f,
+      ...l,
+      style: { borderRadius: d, ...l.style },
+      children: a
     }
   );
 };
 export {
-  x as default
+  E as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.11.4",
+  "version": "3.11.5",
   "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",