@monokai/monoco/dist/index.mjs

Custom (squircle) corners and borders for html elements

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