@monokai/monoco/dist/index.cjs

Custom (squircle) corners and borders for html elements

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=new class{elements;observer;constructor(){this.elements=null,this.observer=null}onElementResize(e){for(const t of e){const e=t.target.getBoundingClientRect(),r=this.elements?.get(t.target);if(!r)continue;const{previousW:n,previousH:s,draw:i,onResize:o}=r;n===e.width&&s===e.height||(i?.({width:e.width,height:e.height}),o?.(e,t.target),r.previousW=e.width,r.previousH=e.height)}}getDrawOptions(e){return this.elements?.get(e)?.cornerOptions??null}setCornerOptions(e,t){const r=this.elements?.get(e);r&&(r.cornerOptions=t,this.elements?.set(e,r))}addElement(e,t,r){this.elements||(this.elements=new Map),this.observer||(this.observer=new ResizeObserver((e=>this.onElementResize(e)))),this.unobserve(e);const{observe:n=!0,onResize:s}=t;if(n){this.observer.observe(e);const n=null,i=null;this.elements.set(e,{draw:r,cornerOptions:t,onResize:s,previousW:n,previousH:i,element:e})}return r}draw(e,t){e?(t&&this.setCornerOptions(e,t),this.elements?.get(e)?.draw?.()):this.elements?.forEach((e=>e.draw?.()))}unobserve(e){const t=t=>{this.observer?.unobserve(e),this.elements?.delete(e)};e?t():this.elements?.keys().forEach((e=>t()))}};function t(e,t,r,n,s,i,o,a){return r?[e?["c",...n]:[],s?["a",r,r,0,0,t,...i.map((e=>e*s))]:[],e?["c",...o]:[]]:[["l",...a]]}function r({width:e,height:r,radii:n,offsets:s,smoothing:i=1,preserveSmoothing:o=!0,sweepFlag:a=1}){const[h,,,c]=s,[d,p,l,u]=n.map((t=>function(e,t,r,n){let s=(1+t)*e;r||(t=Math.min(t,n/e-1),s=Math.min(s,n));const i=.5*Math.PI*(1-t),o=Math.sin(i/2)*e*2**.5,a=.25*Math.PI*t,h=e*Math.tan(.25*(.5*Math.PI-i))*Math.cos(a),c=h*Math.tan(a);let d=(s-o-h-c)/3,p=2*d;if(r&&s>n){const e=n-c-o-h,t=e-e/6;d=Math.min(d,t),p=e-d,s=Math.min(s,n)}return{a:p,b:d,c:h,d:c,p:s,arcLength:o,radius:e,ab:p+d,bc:d+h,abc:p+d+h}}(t,i,o,Math.max(t,.5*Math.min(e,r)))));return[["M",e-p.p+c,h],...t(i,a,p.radius,[p.a,0,p.ab,0,p.abc,p.d],p.arcLength,[1,1],[p.d,p.c,p.d,p.bc,p.d,p.abc],[p.p,0]),["L",e+c,r-l.p+h],...t(i,a,l.radius,[0,l.a,0,l.ab,-l.d,l.abc],l.arcLength,[-1,1],[-l.c,l.d,-l.bc,l.d,-l.abc,l.d],[0,l.p]),["L",u.p+c,r+h],...t(i,a,u.radius,[-u.a,0,-u.ab,0,-u.abc,-u.d],u.arcLength,[-1,-1],[-u.d,-u.c,-u.d,-u.bc,-u.d,-u.abc],[-u.p,0]),["L",c,d.p+h],...t(i,a,d.radius,[0,-d.a,0,-d.ab,d.d,-d.abc],d.arcLength,[1,-1],[d.c,-d.d,d.bc,-d.d,d.abc,-d.d],[0,-d.p]),["Z"]]}function n({width:e=0,height:t=0,borderRadius:n=0,offset:s=0,smoothing:i=1,cornerType:o=r,precision:a=3,isArray:h=!1}){if(!e||!t)return h?[]:"";const c=Array.isArray(s)?s:[s,s,s,s],[d,p,l,u]=c,g=e-u-p,m=t-d-l;let f,b;if(Array.isArray(n)){const e=n.map(((e,t)=>e+n[(t+1)%4])),t=Math.min(...e.map(((e,t)=>(t%2==0?g:m)/e)));f=t<1?n.map((e=>e*t)):n}else f=[n,n,n,n].map(((e,t)=>Math.max(0,Math.min(e-c[t],.5*Math.min(g,m)))));return b=o?o({width:g,height:m,radii:f,offsets:c,smoothing:i}):[[]],b=b.filter((e=>e[0])).map((([e,...t])=>{const r=t.map((e=>Number.isFinite(e)?Number(e.toFixed(a)):e)),n=[e,h?r:r.join(" ")];return h?n:n.join("")})),h?b:b.join("")}exports.FigmaSquircle=function(e){return r({...e,preserveSmoothing:!1,sweepFlag:1})},exports.Flat=function({width:e,height:t,radii:r,offsets:n}){const[s,,,i]=n,[o,a,h,c]=r;return[["M",i+o,s],["L",e-a+i,s],["L",e+i,s+a],["L",e+i,t-h+s],["L",e-h+i,t+s],["L",i+c,t+s],["L",i,t-c+s],["L",i,s+o],["Z"]]},exports.Inset=function({width:e,height:t,radii:r,offsets:n}){const[s,,,i]=n,[o,a,h,c]=r;return[["M",i+c,s],["L",e-a+i,s],["L",e-a+i,s+a],["L",e+i,s+a],["L",e+i,t-h+s],["L",e-h+i,t-h+s],["L",e-h+i,t+s],["L",i+c,t+s],["L",i+c,t-c+s],["L",i,t-c+s],["L",i,s+o],["L",i+o,s+o],["L",i+o,s],["Z"]]},exports.Round=function(e){return r({...e,smoothing:0,preserveSmoothing:!1,sweepFlag:1})},exports.RoundInverse=function(e){return r({...e,smoothing:0,preserveSmoothing:!1,sweepFlag:0})},exports.Squircle=r,exports.addCorners=function(t,r){e.setCornerOptions(t,r);const s=r=>{const s=e.getDrawOptions(t)??{};if(!s.width||!s.height){const e=t.getBoundingClientRect();s.width=e.width,s.height=e.height}const i={...s,...r};i.isRounded&&(i.width=i.width?Math.round(i.width):void 0,i.height=i.height?Math.round(i.height):void 0),t.style.clipPath=s.clip?`path('${n(i)}')`:"",(s.background||s.border)&&(t.style.backgroundImage=function(e){const{border:t=[],offset:r=0,strokeDrawType:s=0,background:i,clip:o,clipID:a,width:h,height:c}=e,d=[],p=Array.isArray(t?.[0])?t:[t],l=Array.isArray(r)?r:[r,r,r,r],u=o?null:n(e);if(p?.length){let t=0;const a=[];for(let i=0;i<p.length;i++){const[o,h]=p[i],c=0===s?2*(t+o):o;o&&(a.push(`<path d="${n({...e,offset:0===s?r:l.map((e=>e+t+.5*o))})}" fill="none" stroke="${h}" stroke-width="${c}" />`),t+=o)}i&&(o?d.push(`<rect width="${h}" height="${c}" fill="${i}" />`):d.push(`<path d="${u}" fill="${i}" />`)),d.push(...a.reverse())}return d.length?((e,t,r="c")=>{return`url('data:image/svg+xml,${(e=>encodeURIComponent(e).replace(/%20/g," ").replace(/%3D/g,"=").replace(/%3A/g,":").replace(/%2F/g,"/").replace(/%2C/g,",").replace(/%3B/g,";"))((n=(t?[`<defs><clipPath id="${r}"><path d="${t}" /></clipPath></defs>`,`<g clip-path="url(#${r})">${e.join("")}</g>`]:e).join(""),`<svg xmlns="http://www.w3.org/2000/svg">${n}</svg>`))}')`;var n})(d,u,a):"none"}(i))};return s(),e.addElement(t,r,s)},exports.createPath=n,exports.draw=function(t,r){e.draw(t,r)},exports.unobserve=function(t){e.unobserve(t)};