cosmic-ui-lite/dist/index.esm.js

A lightweight, futuristic, space-themed UI component library built with TypeScript and vanilla JavaScript

const e="M 265.95318,319.32816 H 448.53221 V 83.2702 L 388.18033,22.91834 H 12.563998 v 232.299 H 199.28437 c 1.70635,0 3.25149,0.6935 4.36769,1.81279 z",t="M 265.95318,319.32816 H 448.53221 V 83.2702 L 388.18033,22.91834 H 12.563998 v 232.299 H 199.28437 c 1.70635,0 3.25149,0.6935 4.36769,1.81279 z M 87.602309,318.31528 H 57.655818 L 20.263785,280.55635 h 29.946494 z m 46.857081,0 H 104.5129 L 67.119839,280.55635 h 29.947526 z m 46.86226,0 h -29.94856 l -37.38997,-37.75893 h 29.94753 z m 46.86226,0 h -29.94753 l -37.39099,-37.75893 h 29.94546 z M 442.30106,46.18823 395.70235,-0.40943956 H 342.34643 L 331.48613,10.55733 H 6.3824633 c -3.413744,0 -6.18153394,2.7678 -6.18153394,6.1805 v 244.65999 c 0,3.41583 2.76778994,6.18361 6.18153394,6.18361 H 196.72225 l 61.4557,61.45154 c 1.11619,1.60612 2.97344,2.65721 5.07669,2.65721 h 191.45805 c 3.41273,0 6.18051,-2.76778 6.18051,-6.18154 V 147.25906 l 13.61054,-13.47722 V 78.39091 L 442.30106,46.18823",n="M 77.484816,21.569251 H 105.32498 L 117.80174,9.0935273 h 347.5581 V 146.188 l -12.47777,12.47779 v 93.39481 l -56.60845,56.60741 H 368.43244 L 355.9567,321.14579 H 8.3985972 V 184.04927 L 20.875357,171.57456 V 78.178714 L 77.484816,21.569251",o="m 70.54467,0.53487593 h 399.09296 c 2.36265,0 4.27881,1.91822907 4.27881,4.28087607 V 259.00075 c 0,1.18028 -0.47956,2.25205 -1.25161,3.02411 l -66.42695,66.42385 c -0.83614,0.83611 -1.93064,1.25368 -3.02411,1.25368 H 4.1197872 c -2.36265,0 -4.27880996,-1.91513 -4.27880996,-4.27778 V 71.239603 c 0,-1.18029 0.47956,-2.252059 1.25366996,-3.024105 L 67.519533,1.788546 C 68.354624,0.95552393 69.449131,0.53694493 70.54467,0.53694493 Z M 77.484816,21.569251 H 105.32498 L 117.80174,9.0935273 h 347.5581 V 146.188 l -12.47777,12.47779 v 93.39481 l -56.60845,56.60741 H 368.43244 L 355.9567,321.14579 H 8.3985972 V 184.04927 L 20.875357,171.57456 V 78.178714 L 77.484816,21.569251",c="M16 8L8 16M8.00003 8L10 10M16 16L12 12",a="0 0 474 332",s="0 0 474 329",d="0 0 24 24";function r(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg","svg");return n.setAttribute("class",e),n.setAttribute("preserveAspectRatio","none"),n.setAttribute("viewBox",t),n}function l(e,t){const n=document.createElementNS("http://www.w3.org/2000/svg","linearGradient");return n.setAttribute("id",e),n.setAttribute("x1","0%"),n.setAttribute("y1","0%"),n.setAttribute("x2","100%"),n.setAttribute("y2","100%"),n.setAttribute("gradientUnits","objectBoundingBox"),t.forEach(e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","stop");t.setAttribute("offset",e.offset),t.setAttribute("stop-color",e.color),n.appendChild(t)}),n}function i(e,t,n,o){const c=document.createElementNS("http://www.w3.org/2000/svg","path");return c.setAttribute("fill-rule","evenodd"),c.setAttribute("d",e),void 0!==t&&c.setAttribute("fill",t),void 0!==n&&c.setAttribute("stroke",n),void 0!==o&&c.setAttribute("stroke-width",o),c}function m(e){switch(e){case"modal":case"tag":return[{offset:"0%",color:"#1a1a2e"},{offset:"30%",color:"#2a2a4e"},{offset:"50%",color:"#1a1a2e"},{offset:"70%",color:"#3a1a4e"},{offset:"100%",color:"#1a1a2e"}];case"info":return[{offset:"0%",color:"#1a2a3e"},{offset:"30%",color:"#2a3a5e"},{offset:"50%",color:"#1a2a3e"},{offset:"70%",color:"#3a4a6e"},{offset:"100%",color:"#1a2a3e"}];case"button":return[{offset:"0%",color:"#1a1a2e"},{offset:"25%",color:"#2a2a4e"},{offset:"50%",color:"#1a1a2e"},{offset:"75%",color:"#4a2a3e"},{offset:"100%",color:"#1a1a2e"}];default:return[{offset:"0%",color:"#1a1a2e"},{offset:"30%",color:"#1a3a2e"},{offset:"70%",color:"#3a2a1e"},{offset:"100%",color:"#1a1a2e"}]}}function p(n,o="#333333",c="card"){const s=r("cosmic-bg",a),d=document.createElementNS("http://www.w3.org/2000/svg","defs"),p=l(n,m(c));d.appendChild(p),s.appendChild(d);const u=i(e,`url(#${n})`);s.appendChild(u);const f=r("cosmic-border",a),h=i(t,"transparent",o,"2");return f.appendChild(h),{backgroundSvg:s,borderSvg:f,backgroundPath:u,borderPath:h}}class u{static create(e){const t=document.createElement("div");t.className="cosmic-btn-wrapper";const c=r("cosmic-btn-bg",s),a=document.createElementNS("http://www.w3.org/2000/svg","defs"),d=l("buttonGradient",m("button"));a.appendChild(d),c.appendChild(a);const p=i(n,"url(#buttonGradient)");c.appendChild(p);const u=r("cosmic-btn-border",s),f=i(o,"transparent","#333333","2");u.appendChild(f);const h=document.createElement("button");return h.className=`cosmic-btn ${e.variant||"default"}`,e.className&&(h.className+=` ${e.className}`),h.textContent=e.text,h.disabled=e.disabled||!1,e.onClick&&h.addEventListener("click",e.onClick),t.addEventListener("mouseenter",()=>{f.setAttribute("stroke","#00d4ff"),p.setAttribute("fill","#2a2a4e")}),t.addEventListener("mouseleave",()=>{f.setAttribute("stroke","#333333"),p.setAttribute("fill","#1a1a2e")}),t.appendChild(c),t.appendChild(u),t.appendChild(h),t}}class f{static create(e){const t=document.createElement("div");t.className="cosmic-modal-overlay";const n=document.createElement("div");n.className="cosmic-modal-wrapper";const{backgroundSvg:o,borderSvg:a}=p("modalGradient","#00d4ff","modal"),s=document.createElement("div");s.className="cosmic-content",e.className&&(s.className+=` ${e.className}`);const l=document.createElement("div");l.className="cosmic-header-bordered";const m=document.createElement("h2");if(m.className="cosmic-title-enhanced",m.textContent=e.title,l.appendChild(m),!1!==e.showCloseButton){const n=document.createElement("button");n.className="cosmic-modal-close";const o=function(){const e=r("cosmic-close-icon",d);e.style.width="40px",e.style.height="40px",e.style.cursor="pointer";const t=i(c,"none","#ffffff","1.5");return t.setAttribute("stroke-linecap","round"),t.setAttribute("stroke-linejoin","round"),e.appendChild(t),e}();n.appendChild(o),n.addEventListener("click",()=>{f.close(t),e.onClose&&e.onClose()}),s.appendChild(n)}const h=document.createElement("div");if(h.className="cosmic-modal-body","string"==typeof e.content?h.innerHTML=e.content:e.content instanceof HTMLElement?h.appendChild(e.content):h.innerHTML=String(e.content||"No content provided"),e.buttons&&e.buttons.length>0){const n=document.createElement("div");n.className="cosmic-modal-footer",e.buttons.forEach(e=>{const o=u.create({...e,onClick:()=>{var n;e.onClick&&e.onClick(),(null===(n=e.className)||void 0===n?void 0:n.includes("no-auto-close"))||f.close(t)}});n.appendChild(o)}),s.appendChild(l),s.appendChild(h),s.appendChild(n)}else console.warn("No buttons provided for modal, that may breaks the layout of modals"),s.appendChild(l),s.appendChild(h);n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{f.close(t),e.onClose&&e.onClose()});const C=n=>{"Escape"===n.key&&(f.close(t),e.onClose&&e.onClose(),document.removeEventListener("keydown",C))};return document.addEventListener("keydown",C),n.appendChild(o),n.appendChild(a),n.appendChild(s),t.appendChild(n),t}static show(e){document.body.appendChild(e)}static close(e){e.style.animation="modalFadeIn 0.2s ease-out reverse",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},200)}}class h{static create(e){const t=document.createElement("div");t.className="cosmic-card-wrapper";const{backgroundSvg:n,borderSvg:o,backgroundPath:c,borderPath:a}=p("cardGradient","#333333","card"),s=document.createElement("div");if(s.className="cosmic-card",e.className&&(s.className+=` ${e.className}`),e.title){const t=document.createElement("h3");t.className="cosmic-card-title",t.textContent=e.title,s.appendChild(t)}const d=document.createElement("div");return d.className="cosmic-card-content","string"==typeof e.content?d.innerHTML=e.content:e.content instanceof HTMLElement?d.appendChild(e.content):d.innerHTML=String(e.content||"No content provided"),s.appendChild(d),t.addEventListener("mouseenter",()=>{a.setAttribute("stroke","#00d4ff"),c.setAttribute("fill","#2a2a4e")}),t.addEventListener("mouseleave",()=>{a.setAttribute("stroke","#333333"),c.setAttribute("fill","#1a1a2e")}),t.appendChild(n),t.appendChild(o),t.appendChild(s),t}}class C{static create(e){const t=document.createElement("div");t.className="cosmic-info-overlay";const n=document.createElement("div");n.className="cosmic-info-wrapper";const{backgroundSvg:o,borderSvg:c}=p("infoGradient","#00d4ff","info"),a=document.createElement("div");let s;if(a.className="cosmic-content",e.className&&(a.className+=` ${e.className}`),e.title){s=document.createElement("div"),s.className="cosmic-header-bordered";const t=document.createElement("h2");t.className="cosmic-info-title cosmic-title-enhanced"+(e.titleColor?" "+e.titleColor:""),t.textContent=e.title,s.appendChild(t)}const d=document.createElement("div");return d.className="cosmic-modal-body","string"==typeof e.content?d.innerHTML=e.content:e.content instanceof HTMLElement?d.appendChild(e.content):d.innerHTML=String(e.content||"No content provided"),s&&a.appendChild(s),a.appendChild(d),n.addEventListener("click",e=>{e.stopPropagation()}),t.addEventListener("click",()=>{e.onClose&&e.onClose(),t.parentNode&&t.parentNode.removeChild(t)}),n.appendChild(o),n.appendChild(c),n.appendChild(a),t.appendChild(n),t}}class v{static create(e){const t=document.createElement("div");t.className=!1!==e.flipped?"cosmic-tag-wrapper flipped":"cosmic-tag-wrapper";const{backgroundSvg:n,borderSvg:o}=p("tagGradient","#00d4ff","modal"),c=document.createElement("div");if(c.className="cosmic-content",e.className&&(c.className+=` ${e.className}`),e.title){const t=document.createElement("div");t.className="cosmic-header-bordered";const n=document.createElement("h2");n.className="cosmic-title-enhanced",n.textContent=e.title,t.appendChild(n),c.appendChild(t)}return"string"==typeof e.content?c.innerHTML=e.content:e.content instanceof HTMLElement?c.appendChild(e.content):c.innerHTML=String(e.content||"No content provided"),t.appendChild(n),t.appendChild(o),t.appendChild(c),t}}class b{static showConfirmation(e,t,n,o){const c=b.createModal({title:e,content:t,buttons:[{text:"Cancel",variant:"secondary",onClick:o||(()=>{})},{text:"Confirm",variant:"danger",onClick:n}]});b.showModal(c)}static showNotification(e,t,n){const o=b.createModal({title:e,content:t,onClose:n,buttons:[{text:"OK",onClick:n||(()=>{})}]});b.showModal(o)}static showError(e,t,n){const o=b.createModal({title:e,content:t,buttons:[{text:"OK",variant:"danger",onClick:n||(()=>{})}],onClose:n});b.showModal(o)}}b.createButton=u.create,b.createModal=f.create,b.createCard=h.create,b.createInfo=C.create,b.createTag=v.create,b.showModal=f.show,b.closeModal=f.close;export{u as CosmicButton,h as CosmicCard,C as CosmicInfo,f as CosmicModal,v as CosmicTag,b as CosmicUI,b as default};