libreria-vite-juanma
Version:
Una biblioteca de componentes hecha con Vite.
588 lines (546 loc) • 38 kB
JavaScript
class i extends HTMLElement {
constructor() {
super();
const e = this.attachShadow({ mode: "open" });
this.button = document.createElement("button"), this.button.className = "x-button", this.button.addEventListener("click", (t) => {
const o = this.getAttribute("variant");
o == "light" || o == "success" || o == "warning" || o == "primary" || o == "error" || this.addRipple(t);
}), e.appendChild(this.createStyles()), e.appendChild(this.button);
}
// Cuando el componente se monta
connectedCallback() {
this.button.textContent = this.getAttribute("title") || "Button";
const e = this.getAttribute("variant"), t = this.getAttribute("size");
e && this.button.classList.add(e), t && this.button.classList.add(t);
}
// Efecto ripple simplificado
addRipple(e) {
const t = document.createElement("span");
t.className = "ripple";
const o = this.button.getBoundingClientRect(), r = Math.max(o.width, o.height);
t.style.width = t.style.height = `${r}px`, t.style.left = `${e.clientX - o.left - r / 2}px`, t.style.top = `${e.clientY - o.top - r / 2}px`, this.button.appendChild(t), t.addEventListener("animationend", () => t.remove());
}
// Estilos del componente
createStyles() {
const e = document.createElement("style");
return e.textContent = `
.x-button {
display: flex;
justify-content: center;
align-items: center;
padding: 1px;
cursor: pointer;
background-color: #161617;
background-image: linear-gradient(#ffffff0f, #fff0);
border-radius: 7px;
border: 1px solid #ffffff29;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #bdb6b657;
font-weight: 500;
color: #fff;
overflow: hidden;
position: relative;
user-select: none;
min-width: fit-content;
letter-spacing: 0px;
transition: opacity 0.3s ease;
}
.x-button:hover {
opacity: 0.8;
}
.x-button:active {
opacity: 0.6;
}
/* Tamaños */
.xs { padding: 0 0.6rem; height: 2rem; font-size: 12px; }
.sm { padding: 8px 16px; font-size: 14px; }
.md { padding: 10px 20px; font-size: 16px; }
.lg { padding: 12px 24px; font-size: 18px; }
/* Variantes */
.primary { background: #0084ff; }
.success { background: #28ae39; }
.error { background: #ff322e; }
.warning { background-color: #fde50b; color: #000000; }
.light { color: #000; background-image: linear-gradient(#f0f0f0f0, #ececec); border: 1px solid #00000029; border-top-width: 2px; border-top-color: #ababab74; }
.outline {
background: transparent;
border: 1px solid currentColor;
}
/* Honda Al Clicar un Boton */
.ripple {
position: absolute;
border-radius: 50%;
/* background: rgba(124, 124, 124, 0.7); */
background: rgba(228, 228, 228, 0.7);
transform: scale(0.1);
animation: ripple-animation 0.6s ease-out;
pointer-events: none;
}
/* Animación */
ripple-animation {
0% {
transform: scale(0.01);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}
`, e;
}
}
customElements.define("x-button", i);
class l extends HTMLElement {
constructor() {
super();
const e = this.attachShadow({ mode: "open" });
this.badge = document.createElement("div"), e.appendChild(this.createStyles()), e.appendChild(this.badge);
}
// Cuando el componente se monta
connectedCallback() {
this.badge.textContent = this.getAttribute("variant") || "default";
const e = this.getAttribute("type") || "solid", t = this.getAttribute("variant") || "default", o = this.getAttribute("size") || "md";
this.badge.className = `${e} ${t} ${o}`;
}
// Estilos del componente
createStyles() {
const e = document.createElement("style");
return e.textContent = `
/* Tamaños base */
.sm {
min-width: fit-content;
width: 3.4rem;
height: 1.1rem;
font-size: 0.7rem;
padding: 2px 0.5rem;
line-height: 1.3rem;
}
.md {
min-width: fit-content;
width: 4.6rem;
height: 1.4rem;
font-size: 0.8rem;
padding: 2px 8px;
line-height: 1.25rem;
}
.lg {
min-width: fit-content;
width: 6.8rem;
height: 2rem;
font-size: 1.2rem;
padding: 2px 0.5rem;
line-height: 2rem;
}
/* Estilos base compartidos */
.solid, .outline, .subtle {
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
}
/* Variantes para type="solid" */
.solid.default { background-color: rgba(168, 168, 168, 0.10); color: rgb(168, 168, 168); }
.solid.success { background-color: rgba(34, 197, 94, 0.10); color: rgb(34, 197, 94); }
.solid.share { background-color: rgba(59, 130, 246, 0.10); color: rgb(59, 130, 246); }
.solid.error { background-color: rgba(239, 68, 68, 0.10); color: rgb(239, 68, 68); }
.solid.warning { background-color: rgba(234, 179, 8, 0.10); color: rgb(234, 179, 8); }
/* Variantes para type="outline" */
.outline { background-color: rgb(14, 14, 14); }
.outline.default { color: rgb(168, 168, 168); border: 1px solid rgb(168, 168, 168); }
.outline.success { color: rgb(34, 197, 94); border: 1px solid rgb(34, 197, 94); }
.outline.share { color: rgb(59, 130, 246); border: 1px solid rgb(59, 130, 246); }
.outline.error { color: rgb(239, 68, 68); border: 1px solid rgb(239, 68, 68); }
.outline.warning { color: rgb(234, 179, 8); border: 1px solid rgb(234, 179, 8); }
/* Variantes para type="subtle" */
.subtle.default {
background-color: rgba(168, 168, 168, 0.10);
color: rgb(168, 168, 168);
border: 1px solid rgb(168, 168, 168);
}
.subtle.success {
background-color: rgba(34, 197, 94, 0.10);
color: rgb(34, 197, 94);
border: 1px solid rgb(34, 197, 94);
}
.subtle.share {
background-color: rgba(59, 130, 246, 0.10);
color: rgb(59, 130, 246);
border: 1px solid rgb(59, 130, 246);
}
.subtle.error {
background-color: rgba(239, 68, 68, 0.10);
color: rgb(239, 68, 68);
border: 1px solid rgb(239, 68, 68);
}
.subtle.warning {
background-color: rgba(234, 179, 8, 0.10);
color: rgb(234, 179, 8);
border: 1px solid rgb(234, 179, 8);
}
// /* Estilos base para badges de lenguajes */
// .lang-outline, .lang-solid, .lang-subtle {
// display: flex;
// align-items: center;
// justify-content: center;
// width: fit-content;
// font-weight: bold;
// gap: 0.3rem;
// font-size: 0.8rem;
// border-radius: 0.375rem;
// padding: 12px 8px;
// user-select: none;
// height: 1.4rem;
// line-height: 1.25rem;
// color: #fff;
// }
// /* Lenguajes - solo algunos ejemplos, puedes añadir más */
// .lang-outline.html { border: 1px solid #E34F26; }
// .lang-solid.html { background-color: rgba(227, 79, 38, 0.2); }
// .lang-subtle.html {
// border: 1px solid #E34F26;
// background-color: rgba(227, 79, 38, 0.1);
// }
// .lang-outline.javascript { border: 1px solid #f0db4f; }
// .lang-solid.javascript { background-color: rgba(240, 219, 79, 0.2); }
// .lang-subtle.javascript {
// border: 1px solid #f0db4f;
// background-color: rgba(240, 219, 79, 0.1);
// }
// .lang-outline.react { border: 1px solid #009CB8; }
// .lang-solid.react { background-color: rgba(0, 156, 184, 0.2); }
// .lang-subtle.react {
// border: 1px solid #009CB8;
// background-color: rgba(0, 156, 184, 0.1);
// }
`, e;
}
}
customElements.get("x-badge") || customElements.define("x-badge", l);
class s extends HTMLElement {
constructor() {
super(), this.shadow = this.attachShadow({ mode: "open" }), this.badge = document.createElement("div"), this.shadow.appendChild(this.createStyles()), this.shadow.appendChild(this.badge);
}
// Cuando el componente se monta
connectedCallback() {
const e = [
"HTML",
"CSS",
"JavaScript",
"TypeScript",
"Mongo",
"Java",
"Python",
"Angular",
"React",
"Vue",
"Node",
"Next",
"Spring",
"Bootstrap",
"Tailwind",
"Material"
], t = this.getAttribute("type") || "Unknown", o = this.getAttribute("variant") || "solid", r = this.getAttribute("size") || "md";
this.render(t), e.includes(t) ? (this.badge.className = `${o} ${r} ${t.toLowerCase()}`.trim(), this.badge.innerHTML = this.icons(t)) : (this.badge.textContent = "Unknown", this.badge.className = "unknown");
}
// Crear estilos
createStyles() {
const e = document.createElement("style");
return e.textContent = `
/* Tamaños */
.sm {
width: 3.4rem;
height: 1.1rem;
// font-size: 0.5rem;
font-size: 12px;
padding: 3px 0.5rem;
line-height: 1.3rem;
}
.md {
width: 3.3rem;
height: 1.4rem;
// font-size: 0.8rem;
font-size: 16px;
padding: 3px 0px;
line-height: 1.25rem;
}
.lg {
width: 6rem;
height: 2rem;
// font-size: 2rem;
font-size: 26px;
padding: 2px 0.5rem;
line-height: 2rem;
}
.outline, .solid, .subtle , .unknown{
display: flex;
align-items: center;
justify-content: center;
min-width: fit-content;
width: fit-content;
font-weight: bold;
gap: 0.3rem;
font-size: 0.8rem;
border-radius: 0.375rem;
padding: 3px 8px;
color: #fff;
}
svg {
width: 0.9rem;
height: 0.9rem;
}
.unknown {
background-color:rgb(29, 31, 29); /* Rojo para 'Unknown' */
border: 1px solid black;
}
.solid{
background-color: #1b1b1b !important;
border: 1px solid rgba(184, 184, 184, 0.4);
border-radius: 50px;
font-weight: 600;
color: #c6c2c2;
display: flex;
align-items: center;
justify-content: center;
line-height: 1rem;
}
.outline { background-color: rgb(14, 14, 14); }
// .solid { background-color: rgba(255, 255, 255, 0.1); }
.subtle { background-color: rgba(255, 255, 255, 0.05); }
.outline.html { border: 1px solid #E34F26; }
// .solid.html { background-color: rgba(227, 79, 38, 0.2); }
.subtle.html { background-color: rgba(227, 79, 38, 0.1); border: 1px solid #E34F26; }
.outline.css { border: 1px solid #5c78e6; }
// .solid.css { background-color: rgba(92, 120, 230, 0.2); }
.subtle.css { background-color: rgba(92, 120, 230, 0.1); border: 1px solid #5c78e6; }
.outline.javascript { border: 1px solid #f0db4f; }
// .solid.javascript { background-color: rgba(240, 219, 79, 0.2); }
.subtle.javascript { background-color: rgba(240, 219, 79, 0.1); border: 1px solid #f0db4f; }
.outline.typescript { border: 1px solid #3178c6; }
// .solid.typescript { background-color: rgba(49, 120, 198, 0.2); }
.subtle.typescript { background-color: rgba(49, 120, 198, 0.1); border: 1px solid #3178c6; }
.outline.mongo { border: 1px solid #01ec64; }
// .solid.mongo { background-color: rgba(1, 236, 100, 0.2); }
.subtle.mongo { background-color: rgba(1, 236, 100, 0.1); border: 1px solid #01ec64;}
.outline.java { border: 1px solid #5382a1; }
// .solid.java { background-color: rgba(83, 130, 161, 0.2); }
.subtle.java { background-color: rgba(83, 130, 161, 0.1);border: 1px solid #5382a1; }
.outline.python { border: 1px solid #3671A2; }
// .solid.python { background-color: rgba(83, 130, 161, 0.2); }
.subtle.python { background-color: rgba(83, 130, 161, 0.1); border: 1px solid #3671A2;}
.outline.angular { border: 1px solid rgb(195, 0, 47); }
// .solid.angular { background-color: rgba(195, 0, 47, 0.2); }
.subtle.angular { background-color: rgba(195, 0, 47, 0.1); border: 1px solid rgb(195, 0, 47); }
.outline.react { border: 1px solid #009CB8; }
// .solid.react { background-color: rgba(0, 156, 184, 0.2); }
.subtle.react { background-color: rgba(0, 156, 184, 0.1); border: 1px solid #009CB8; }
.outline.vue { border: 1px solid #38a275; }
// .solid.vue { background-color: rgba(56, 162, 117, 0.2); }
.subtle.vue { background-color: rgba(56, 162, 117, 0.1); border: 1px solid #38a275; }
.outline.node { border: 1px solid #86c049; }
// .solid.node { background-color: rgba(134, 192, 73, 0.2); }
.subtle.node { background-color: rgba(134, 192, 73, 0.1); border: 1px solid #86c049; }
.outline.next { border: 1px solid #fff; }
// .solid.next { background-color: rgba(0, 0, 0, 0.9); }
.subtle.next { background-color: rgba(0, 0, 0, 0.8); border: 1px solid #fff; }
.outline.spring { border: 1px solid #68bd45; }
// .solid.spring { background-color: rgba(104, 189, 69, 0.2); }
.subtle.spring { background-color: rgba(104, 189, 69, 0.1); border: 1px solid #68bd45; }
.outline.bootstrap { border: 1px solid #7e13f8; }
// .solid.bootstrap { background-color: rgba(126, 19, 248, 0.2); }
.subtle.bootstrap { background-color: rgba(126, 19, 248, 0.1); border: 1px solid #7e13f8; }
.outline.tailwind { border: 1px solid #16c0b8; }
// .solid.tailwind { background-color: rgba(22, 192, 184, 0.2); }
.subtle.tailwind { background-color: rgba(22, 192, 184, 0.1); border: 1px solid #16c0b8; }
.outline.material { border: 1px solid #0558a4; }
// .solid.material { background-color: rgba(5, 88, 164, 0.2); }
.subtle.material { background-color: rgba(5, 88, 164, 0.1); border: 1px solid #0558a4; }
`, e;
}
render(e) {
this.getIcon(e) || (this.badge.innerHTML = "<p>Unknown</p>");
}
icons(e) {
return {
HTML: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520">
<path fill="#e34f26" d="M41 460L0 0h451l-41 460-185 52" />
<path fill="#ef652a" d="M226 472l149-41 35-394H226" />
<path fill="#ecedee" d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147l-64-17-4-45h-56l7 89 117 32z" />
<path fill="#fff" d="M226 265h69l-7 73-62 17v59l115-32 16-174H226zm0-171v56h136l5-56z" />
</svg> <p>HTML</p>`,
CSS: `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<path fill="#264de4" d="M71.357 460.819 30.272 0h451.456l-41.129 460.746L255.724 512z" />
<path fill="#2965f1" d="m405.388 431.408 35.148-393.73H256v435.146z" />
<path fill="#ebebeb"
d="m124.46 208.59 5.065 56.517H256V208.59zm-5.041-57.875H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z" />
<path fill="#fff"
d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z" />
</svg> <p>CSS</p>`,
JavaScript: `<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 1052 1052">
<path fill="#f0db4f" d="M0 0h1052v1052H0z" />
<path
d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z"
fill="#323330" />
</svg> <p>JavaScript</p>`,
TypeScript: '<svg viewBox="0 0 256 256" width="256" height="256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z" fill="#3178C6"/><path d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z" fill="#FFF"/></svg> <p>TypeScript</p>',
Mongo: `<svg viewBox="0 0 256 549" xmlns="http://www.w3.org/2000/svg" width="256" height="549"
preserveAspectRatio="xMidYMid">
<path fill="#01EC64"
d="M175.622 61.108C152.612 33.807 132.797 6.078 128.749.32a1.03 1.03 0 0 0-1.492 0c-4.048 5.759-23.863 33.487-46.874 60.788-197.507 251.896 31.108 421.89 31.108 421.89l1.917 1.28c1.704 26.234 5.966 63.988 5.966 63.988h17.045s4.26-37.54 5.965-63.987l1.918-1.494c.213.214 228.828-169.78 31.32-421.677Zm-47.726 418.05s-10.227-8.744-12.997-13.222v-.428l12.358-274.292c0-.853 1.279-.853 1.279 0l12.357 274.292v.428c-2.77 4.478-12.997 13.223-12.997 13.223Z" />
</svg> <p>MongoDB</p>`,
Java: `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 346">
<path
d="M83 267s-14 8 9 11c27 3 41 2 71-3 0 0 8 5 19 9-67 29-153-2-99-17M74 230s-15 11 8 13c29 3 52 3 92-4 0 0 6 5 15 8-82 24-173 2-115-17"
fill="#5382A1" />
<path d="M144 166c17 19-4 36-4 36s42-22 22-49c-18-26-32-38 44-82 0 0-119 29-62 95" fill="#E76F00" />
<path
d="M233 295s10 8-10 15c-39 12-163 15-197 0-12-5 11-13 18-14l12-2c-14-9-89 19-38 28 138 22 251-10 215-27M89 190s-63 15-22 21c17 2 51 2 83-1 26-2 52-7 52-7l-16 9c-64 16-187 8-151-9 30-14 54-13 54-13M202 253c64-33 34-66 13-61l-7 2s2-3 6-5c41-14 73 43-14 66l2-2"
fill="#5382A1" />
<path d="M162 0s36 36-34 91c-56 45-12 70 0 99-32-30-56-56-40-80 23-35 89-53 74-110" fill="#E76F00" />
<path d="M95 345c62 4 158-3 160-32 0 0-4 11-51 20-53 10-119 9-158 2 0 0 8 7 49 10" fill="#5382A1" />
</svg> <p>Java</p>`,
Python: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="16 16 32 32"><path fill="url(#a)" d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454a1.394 1.394 0 1 1 0 2.79 1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z"/><path fill="url(#b)" d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395 1.394 1.394 0 1 1 1.395 1.395z"/><defs><linearGradient id="a" x1="19.075" x2="34.898" y1="18.782" y2="34.658" gradientUnits="userSpaceOnUse"><stop stop-color="#387EB8"/><stop offset="1" stop-color="#366994"/></linearGradient><linearGradient id="b" x1="28.809" x2="45.803" y1="28.882" y2="45.163" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE052"/><stop offset="1" stop-color="#FFC331"/></linearGradient></defs></svg> <p>Python</p>',
Angular: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 242 256">
<g clip-path="url(#a)">
<mask id="b" width="242" height="256" x="0" y="0" maskUnits="userSpaceOnUse"
style="mask-type:luminance">
<path fill="#fff" d="M0 0h242v256H0V0Z" />
</mask>
<g mask="url(#b)">
<path fill="url(#c)"
d="m241 43-9 136L149 0l92 43Zm-58 176-62 36-63-36 12-31h101l12 31ZM121 68l32 80H88l33-80ZM9 179 0 43 92 0 9 179Z" />
<path fill="url(#d)"
d="m241 43-9 136L149 0l92 43Zm-58 176-62 36-63-36 12-31h101l12 31ZM121 68l32 80H88l33-80ZM9 179 0 43 92 0 9 179Z" />
</g>
</g>
<defs>
<linearGradient id="c" x1="53.2" x2="245" y1="231.9" y2="140.7" gradientUnits="userSpaceOnUse">
<stop stop-color="#E40035" />
<stop offset=".2" stop-color="#F60A48" />
<stop offset=".4" stop-color="#F20755" />
<stop offset=".5" stop-color="#DC087D" />
<stop offset=".7" stop-color="#9717E7" />
<stop offset="1" stop-color="#6C00F5" />
</linearGradient>
<linearGradient id="d" x1="44.5" x2="170" y1="30.7" y2="174" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF31D9" />
<stop offset="1" stop-color="#FF5BE1" stop-opacity="0" />
</linearGradient>
<clipPath id="a">
<path fill="#fff" d="M0 0h242v256H0z" />
</clipPath>
</defs>
</svg> <p>Angular</p>`,
React: `<svg viewBox="0 0 256 228" width="256" height="228" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid">
<path
d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621 6.238-30.281 2.16-54.676-11.769-62.708-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848 155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233 50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165 167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266 13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923 168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586 13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488 29.348-9.723 48.443-25.443 48.443-41.52 0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345-3.24-10.257-7.612-21.163-12.963-32.432 5.106-11 9.31-21.767 12.459-31.957 2.619.758 5.16 1.557 7.61 2.4 23.69 8.156 38.14 20.213 38.14 29.504 0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787-1.524 8.219-4.59 13.698-8.382 15.893-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246 12.376-1.098 24.068-2.894 34.671-5.345.522 2.107.986 4.173 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994 7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863-6.35-5.437-9.555-10.836-9.555-15.216 0-9.322 13.897-21.212 37.076-29.293 2.813-.98 5.757-1.905 8.812-2.773 3.204 10.42 7.406 21.315 12.477 32.332-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789 8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152 7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793 2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433 4.902.192 9.899.29 14.978.29 5.218 0 10.376-.117 15.453-.343-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026 347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815 329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627 310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695 358.489 358.489 0 0 1 11.036 20.54 329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026-.344 1.668-.73 3.367-1.15 5.09-10.622-2.452-22.155-4.275-34.23-5.408-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86-22.86-10.235-22.86-22.86 10.235-22.86 22.86-22.86Z"
fill="#00D8FF" />
</svg> <p>React</p>`,
Vue: `<svg viewBox="0 0 256 221" width="256" height="221" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid">
<path d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z" fill="#41B883" />
<path d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z" fill="#41B883" />
<path d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z" fill="#35495E" />
</svg> <p>Vue</p>`,
Node: ` <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"
preserveAspectRatio="xMidYMid" fill="#8cc84b">
<path
d="M14.656.427c.8-.453 1.82-.455 2.6 0L29.2 7.16c.747.42 1.247 1.253 1.24 2.114v13.5c.005.897-.544 1.748-1.332 2.16l-11.88 6.702a2.6 2.6 0 0 1-2.639-.073l-3.565-2.06c-.243-.145-.516-.26-.688-.495.152-.204.422-.23.642-.32.496-.158.95-.4 1.406-.656.115-.08.256-.05.366.022l3.04 1.758c.217.125.437-.04.623-.145l11.665-6.583c.144-.07.224-.222.212-.38V9.334c.016-.18-.087-.344-.25-.417L16.19 2.244a.41.41 0 0 0-.465-.001L3.892 8.93c-.16.073-.27.235-.25.415v13.37c-.014.158.07.307.215.375l3.162 1.785c.594.32 1.323.5 1.977.265a1.5 1.5 0 0 0 .971-1.409l.003-13.29c-.014-.197.172-.36.363-.34h1.52c.2-.005.357.207.33.405L12.18 23.88c.001 1.188-.487 2.48-1.586 3.063-1.354.7-3.028.553-4.366-.12l-3.4-1.88c-.8-.4-1.337-1.264-1.332-2.16v-13.5a2.46 2.46 0 0 1 1.282-2.141L14.656.427zM18.1 9.785c1.727-.1 3.576-.066 5.13.785 1.203.652 1.87 2.02 1.892 3.358-.034.18-.222.28-.394.267-.5-.001-1.002.007-1.504-.003-.213.008-.336-.188-.363-.376-.144-.64-.493-1.273-1.095-1.582-.924-.463-1.996-.44-3.004-.43-.736.04-1.527.103-2.15.535-.48.328-.624 1-.453 1.522.16.383.603.506.964.62 2.082.544 4.287.5 6.33 1.207.845.292 1.672.86 1.962 1.745.378 1.186.213 2.604-.63 3.556-.684.784-1.68 1.2-2.675 1.442-1.323.295-2.695.302-4.038.17-1.263-.144-2.577-.476-3.552-1.336-.834-.724-1.24-1.852-1.2-2.94.01-.184.193-.312.37-.297h1.5c.202-.014.35.16.36.35.093.6.322 1.25.854 1.6 1.026.662 2.313.616 3.487.635.973-.043 2.065-.056 2.86-.7.42-.367.543-.98.43-1.508-.123-.446-.6-.653-1-.8-2.055-.65-4.285-.414-6.32-1.15-.826-.292-1.625-.844-1.942-1.693-.443-1.2-.24-2.687.693-3.607.9-.915 2.22-1.268 3.47-1.394z" />
</svg> <p>Node.JS</p>`,
Next: ` <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_408_139" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="180"
height="180">
<circle cx="90" cy="90" r="90" fill="black" />
</mask>
<g mask="url(#mask0_408_139)">
<circle cx="90" cy="90" r="87" fill="black" stroke="white" stroke-width="6" />
<path
d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
fill="url(#paint0_linear_408_139)" />
<rect x="115" y="54" width="12" height="72" fill="url(#paint1_linear_408_139)" />
</g>
<defs>
<linearGradient id="paint0_linear_408_139" x1="109" y1="116.5" x2="144.5" y2="160.5"
gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_408_139" x1="121" y1="54" x2="120.799" y2="106.875"
gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg> <p>Next</p>`,
Spring: `<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<path
d="M58.2 3.365a29.503 29.503 0 0 1-3.419 6.064A32.094 32.094 0 1 0 9.965 55.372l1.186 1.047a32.08 32.08 0 0 0 52.67-22.253c.875-8.17-1.524-18.51-5.62-30.8zM14.53 55.558a2.744 2.744 0 1 1-.404-3.857 2.744 2.744 0 0 1 .404 3.857zm43.538-9.61c-7.92 10.55-24.83 6.99-35.672 7.502 0 0-1.922.113-3.857.43 0 0 .73-.31 1.663-.663 7.614-2.65 11.213-3.16 15.838-5.54 8.708-4.427 17.322-14.122 19.112-24.2-3.313 9.695-13.373 18.032-22.53 21.418-6.276 2.313-17.614 4.566-17.614 4.566l-.457-.245c-7.714-3.75-7.952-20.457 6.077-25.845 6.143-2.366 12.02-1.067 18.654-2.65 7.084-1.683 15.28-6.99 18.615-13.916 3.73 11.08 8.224 28.422.166 39.15z"
fill="#68bd45" />
</svg> <p>Spring</p>`,
Bootstrap: `<svg viewBox="0 0 256 204" xmlns="http://www.w3.org/2000/svg" width="256" height="204"
preserveAspectRatio="xMidYMid">
<path fill="#7E13F8"
d="M53.172 0C38.565 0 27.756 12.785 28.24 26.65c.465 13.32-.139 30.573-4.482 44.642C19.402 85.402 12.034 94.34 0 95.488v12.956c12.034 1.148 19.402 10.086 23.758 24.197 4.343 14.069 4.947 31.32 4.482 44.641-.484 13.863 10.325 26.65 24.934 26.65h149.673c14.608 0 25.414-12.785 24.93-26.65-.464-13.32.139-30.572 4.482-44.641 4.359-14.11 11.707-23.05 23.741-24.197V95.488c-12.034-1.148-19.382-10.086-23.74-24.196-4.344-14.067-4.947-31.321-4.483-44.642C228.261 12.787 217.455 0 202.847 0H53.17h.002ZM173.56 125.533c0 19.092-14.24 30.67-37.872 30.67h-40.23a4.339 4.339 0 0 1-4.338-4.339V52.068a4.339 4.339 0 0 1 4.339-4.34h39.999c19.705 0 32.637 10.675 32.637 27.063 0 11.503-8.7 21.801-19.783 23.604v.601c15.089 1.655 25.248 12.104 25.248 26.537Zm-42.26-64.05h-22.937v32.4h19.32c14.934 0 23.17-6.014 23.17-16.764 0-10.073-7.082-15.636-19.552-15.636Zm-22.937 45.256v35.705h23.782c15.548 0 23.786-6.239 23.786-17.965 0-11.728-8.467-17.742-24.786-17.742h-22.782v.002Z" />
</svg> <p>Bootstrap</p>`,
Tailwind: `<svg viewBox="0 0 256 154" width="256" height="154" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid">
<defs>
<linearGradient x1="-2.778%" y1="32%" x2="100%" y2="67.556%" id="gradient">
<stop stop-color="#2298BD" offset="0%"></stop>
<stop stop-color="#0ED7B5" offset="100%"></stop>
</linearGradient>
</defs>
<path
d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z"
fill="url(#gradient)"></path>
</svg> <p>Tailwind</p>`,
Material: `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 222">
<path
d="M215.8 151.1a7.1 7.1 0 0 0 3.5-6.1l.2-41.2c0-2.5 1.3-4.9 3.5-6.1l22.3-12.8A7.1 7.1 0 0 1 256 91v74.8c0 2.6-1.4 5-3.6 6.2l-84.2 48.4a7.1 7.1 0 0 1-7 0L95 182.6a7.1 7.1 0 0 1-3.6-6.2v-37.7h.1v-.1l.1-.1 54.5-31.3v-.1h-.1V70a7.1 7.1 0 0 0-10.6-6.2L95.1 87.2a7.1 7.1 0 0 1-7.1 0L47.4 63.8A7.1 7.1 0 0 0 36.7 70v66.8a7.1 7.1 0 0 1-10.6 6.2L3.6 130A7.1 7.1 0 0 1 0 124L.2 7.1A7.1 7.1 0 0 1 10.9.9l77 44.3a7.1 7.1 0 0 0 7.2 0L172 1a7.1 7.1 0 0 1 10.7 6.2V124c0 2.5-1.3 4.9-3.6 6.1L139 153.4a7.1 7.1 0 0 0 0 12.3l22.3 12.7a7.1 7.1 0 0 0 7 0l47.6-27.3Zm4.6-104.8a7.1 7.1 0 0 0 10.8 6l21.3-12.7a7.1 7.1 0 0 0 3.5-6.1V7.4a7.1 7.1 0 0 0-10.8-6.1L224 14.1a7.1 7.1 0 0 0-3.5 6v26.2Z"
fill="#007FFF" />
</svg> <p>Material UI</p>`,
default: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="gray"><circle cx="10" cy="10" r="10"></circle></svg>'
// Icono genérico por defecto
}[e] || "";
}
render(e) {
this.isValidLang(e) || (this.badge.textContent = "Unknown", this.badge.className = "unknown");
}
// Función para verificar si el idioma es válido
isValidLang(e) {
return [
"HTML",
"CSS",
"JavaScript",
"TypeScript",
"MongoDB",
"Java",
"Python",
"Angular",
"React",
"Vue",
"Node.js",
"Next",
"Spring",
"Bootstrap",
"Tailwind",
"Material UI"
].includes(e);
}
// Observar atributos
static get observedAttributes() {
return ["class", "variant", "type", "size"];
}
// Manejar cambios de atributos
attributeChangedCallback(e, t, o) {
(e === "variant" || e === "type" || e === "size") && this.connectedCallback();
}
}
customElements.get("language-badge") || customElements.define("language-badge", s);
customElements.get("x-button") || customElements.define("x-button", i);
customElements.get("x-badge") || customElements.define("x-badge", l);
customElements.get("language-badge") || customElements.define("language-badge", s);
console.log("Kiwi UI Ready!");