@xscriptor/xcomponents 0.1.1 → 0.1.2

package/dist/components/index.mjs

@@ -2,22 +2,22 @@ import "../chunk-FZRTAML3.mjs";
 import {
   XContactForm,
   XNewsletter
-} from "../chunk-TKT37LIX.mjs";
+} from "../chunk-BXVG4SYP.mjs";
 import {
   XNavbar
-} from "../chunk-TG3B4GAW.mjs";
+} from "../chunk-ZDMG7X6H.mjs";
 import {
   XFooter,
   XSeparator,
   XZigZagLayout
-} from "../chunk-UROP4J6G.mjs";
+} from "../chunk-FW47JGYZ.mjs";
 import {
   XInteractivePhrase
-} from "../chunk-34NJCJUI.mjs";
+} from "../chunk-IK2UCTCM.mjs";
 import {
   XMicroGalleryText_default,
   XStaticGallery
-} from "../chunk-MYFPSHSQ.mjs";
+} from "../chunk-XB3UGHSF.mjs";
 import {
   XEmailIcon,
   XGitHubIcon,
@@ -27,7 +27,7 @@ import {
   XTelegramIcon,
   XTwitterIcon,
   XWhatsappIcon
-} from "../chunk-2H7TVDE7.mjs";
+} from "../chunk-WE7QZGVP.mjs";
 export {
   XContactForm,
   XEmailIcon,

package/dist/components/layout/index.css

@@ -1,167 +1,175 @@
-/* src/components/layout/xfooter/XFooter.module.css */
-.XFooter_XFooter3 {
-  width: 100%;
+/* esbuild-css-modules-plugin-ns-css:src/components/layout/xfooter/XFooter.module.css */
+.XFooter-module__XFooter_v8t72G__012 {
   background-color: var(--xf-bg, transparent);
+  width: 100%;
   color: var(--xf-text, #333);
-  padding: var(--xf-py, 0.9rem) 0.6rem;
+  padding: var(--xf-py, .9rem) .6rem;
 }
-.XFooter_container3 {
+.XFooter-module__container_v8t72G__012 {
+  flex-direction: column;
+  align-items: center;
+  gap: .6rem;
   max-width: 1280px;
   margin: 0 auto;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.6rem;
 }
-.XFooter_nav3 {
-  display: grid;
-  gap: 0.5rem 1.5rem;
+.XFooter-module__nav_v8t72G__012 {
   grid-template-columns: repeat(var(--xf-cols, 1), minmax(0, auto));
-  justify-content: center;
   text-align: center;
+  justify-content: center;
+  gap: .5rem 1.5rem;
   width: 100%;
+  display: grid;
 }
-.XFooter_navVertical3 {
-  display: flex;
+.XFooter-module__navVertical_v8t72G__012 {
   flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  gap: .75rem;
+  display: flex;
 }
-.XFooter_link3 {
+.XFooter-module__link_v8t72G__012 {
   color: var(--xf-accent, inherit);
-  text-decoration: none;
-  font-size: 0.9rem;
-  transition: opacity 0.2s;
   white-space: nowrap;
+  font-size: .9rem;
+  text-decoration: none;
+  transition: opacity .2s;
 }
-.XFooter_link3:hover {
-  opacity: 0.7;
+.XFooter-module__link_v8t72G__012:hover {
+  opacity: .7;
 }
-.XFooter_copyright3 {
-  font-size: 0.75rem;
-  opacity: 0.6;
-  width: 100%;
+.XFooter-module__copyright_v8t72G__012 {
+  opacity: .6;
   text-align: center;
+  width: 100%;
+  font-size: .75rem;
 }
 
-/* src/components/layout/xseparator/XSeparator.module.css */
-.XSeparator_separatorContainer3 {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
+/* esbuild-css-modules-plugin-ns-css:src/components/layout/xseparator/XSeparator.module.css */
+.XSeparator-module__separatorContainer_btqQTG__012 {
   --x-color: var(--separator-color);
   --x-bg: white;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  display: flex;
+  position: relative;
 }
-.XSeparator_iconWrapper3 {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+.XSeparator-module__iconWrapper_btqQTG__012 {
   background-color: var(--x-bg);
-  padding: 0 10px;
   color: var(--x-color);
+  user-select: none;
+  padding: 0 10px;
   font-family: system-ui, sans-serif;
-  font-weight: bold;
   font-size: 1.2rem;
+  font-weight: bold;
   line-height: 1;
-  user-select: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.XSeparator_separator3 {
+.XSeparator-module__separator_btqQTG__012 {
   --separator-color: #e2e8f0;
   --separator-thickness: 1px;
   --separator-margin: 1rem;
-  border: 0;
   background-color: var(--separator-color);
+  border: 0;
 }
-.XSeparator_dashed3 {
-  background-color: transparent !important;
+.XSeparator-module__dashed_btqQTG__012 {
   border-bottom: var(--separator-thickness) dashed var(--separator-color);
+  background-color: #0000 !important;
 }
-.XSeparator_dotted3 {
-  background-color: transparent !important;
+.XSeparator-module__dotted_btqQTG__012 {
   border-bottom: var(--separator-thickness) dotted var(--separator-color);
+  background-color: #0000 !important;
 }
-.XSeparator_faded3 {
+.XSeparator-module__faded_btqQTG__012 {
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      #0000,
+      #000 20% 80%,
+      #0000);
   mask-image:
     linear-gradient(
       to right,
-      transparent,
-      black 20%,
-      black 80%,
-      transparent);
+      #0000,
+      #000 20% 80%,
+      #0000);
 }
-.XSeparator_vertical3.XSeparator_faded3 {
+.XSeparator-module__vertical_btqQTG__012.XSeparator-module__faded_btqQTG__012 {
+  -webkit-mask-image:
+    linear-gradient(
+      #0000,
+      #000 20% 80%,
+      #0000);
   mask-image:
     linear-gradient(
-      to bottom,
-      transparent,
-      black 20%,
-      black 80%,
-      transparent);
+      #0000,
+      #000 20% 80%,
+      #0000);
 }
-.XSeparator_horizontal3 {
+.XSeparator-module__horizontal_btqQTG__012 {
   width: 100%;
   height: var(--separator-thickness);
   margin: var(--separator-margin) 0;
 }
-.XSeparator_vertical3 {
+.XSeparator-module__vertical_btqQTG__012 {
   width: var(--separator-thickness);
   height: 100%;
-  display: inline-block;
   margin: 0 var(--separator-margin);
   vertical-align: middle;
+  display: inline-block;
 }
 
-/* src/components/layout/xzigzaglayout/XZigZagLayout.module.css */
-.XZigZagLayout_layout3 {
+/* esbuild-css-modules-plugin-ns-css:src/components/layout/xzigzaglayout/XZigZagLayout.module.css */
+.XZigZagLayout-module__layout_Jgc4GG__012 {
+  gap: var(--x-zigzag-gap, .5rem);
+  flex-direction: column;
   width: min(100%, 72rem);
   margin: 0 auto;
+  padding-inline: clamp(.5rem, 2vw, 1rem);
   display: flex;
-  flex-direction: column;
-  gap: var(--x-zigzag-gap, 0.5rem);
-  padding-inline: clamp(0.5rem, 2vw, 1rem);
   position: relative;
 }
-.XZigZagLayout_svgLine3 {
+.XZigZagLayout-module__svgLine_Jgc4GG__012 {
+  pointer-events: none;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 0;
 }
-.XZigZagLayout_item3 {
+.XZigZagLayout-module__item_Jgc4GG__012 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
 }
-.XZigZagLayout_item3 > * {
+.XZigZagLayout-module__item_Jgc4GG__012 > * {
   width: 100%;
   text-align: inherit;
 }
-.XZigZagLayout_contentWrapper3 {
+.XZigZagLayout-module__contentWrapper_Jgc4GG__012 {
   width: 100%;
 }
-.XZigZagLayout_textLeft3 > * {
+.XZigZagLayout-module__textLeft_Jgc4GG__012 > * {
   text-align: left;
 }
-.XZigZagLayout_textRight3 > * {
+.XZigZagLayout-module__textRight_Jgc4GG__012 > * {
   text-align: right;
 }
-.XZigZagLayout_left3 > * {
+.XZigZagLayout-module__left_Jgc4GG__012 > * {
   grid-column: 2 / 8;
 }
-.XZigZagLayout_right3 > * {
+.XZigZagLayout-module__right_Jgc4GG__012 > * {
   grid-column: 6 / 12;
 }
-@media (max-width: 768px) {
-  .XZigZagLayout_left3 > * {
+@media (width <= 768px) {
+  .XZigZagLayout-module__left_Jgc4GG__012 > * {
     grid-column: 1 / 11;
   }
-  .XZigZagLayout_right3 > * {
+  .XZigZagLayout-module__right_Jgc4GG__012 > * {
     grid-column: 3 / 13;
   }
 }

package/dist/components/layout/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/layout/xfooter/XFooter.module.css", "../../../src/components/layout/xseparator/XSeparator.module.css", "../../../src/components/layout/xzigzaglayout/XZigZagLayout.module.css"],
-  "sourcesContent": [".XFooter {\n  width: 100%;\n  background-color: var(--xf-bg, transparent);\n  color: var(--xf-text, #333);\n  padding: var(--xf-py, 0.9rem) 0.6rem;\n}\n\n.container {\n  max-width: 1280px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.6rem; /* Espacio entre los links y el copyright */\n}\n\n/* El nav es el que maneja las columnas de los links */\n.nav {\n  display: grid;\n  gap: 0.5rem 1.5rem;  \n  grid-template-columns: repeat(var(--xf-cols, 1), minmax(0, auto));\n  justify-content: center;\n  text-align: center;\n  width: 100%;\n}\n\n.navVertical {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.link {\n  color: var(--xf-accent, inherit);\n  text-decoration: none;\n  font-size: 0.9rem;\n  transition: opacity 0.2s;\n  white-space: nowrap; /* Evita que los links se rompan en dos l\u00EDneas */\n}\n\n.link:hover {\n  opacity: 0.7;\n}\n\n/* El copyright siempre ir\u00E1 al final y centrado por el flex del .container */\n.copyright {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  width: 100%;\n  text-align: center;\n}", ".separatorContainer {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  /* Variables para la X con fallbacks */\n  --x-color: var(--separator-color); \n  --x-bg: white;\n}\n\n.iconWrapper {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--x-bg);\n  padding: 0 10px;\n  \n  /* Aplicamos el color din\u00E1mico */\n  color: var(--x-color);\n  \n  font-family: system-ui, sans-serif;\n  font-weight: bold;\n  font-size: 1.2rem;\n  line-height: 1;\n  user-select: none;\n}\n\n.separator {\n  --separator-color: #e2e8f0;\n  --separator-thickness: 1px;\n  --separator-margin: 1rem;\n  \n  border: 0;\n  background-color: var(--separator-color);\n}\n\n/* Variantes de Estilo */\n.dashed {\n  background-color: transparent !important;\n  border-bottom: var(--separator-thickness) dashed var(--separator-color);\n}\n\n.dotted {\n  background-color: transparent !important;\n  border-bottom: var(--separator-thickness) dotted var(--separator-color);\n}\n\n/* Efecto Desvanecido (Fading) */\n/* Usamos mask-image para que funcione con cualquier color de fondo */\n.faded {\n  mask-image: linear-gradient(\n    to right, \n    transparent, \n    black 20%, \n    black 80%, \n    transparent\n  );\n}\n\n/* Ajuste para desvanecido vertical */\n.vertical.faded {\n  mask-image: linear-gradient(\n    to bottom, \n    transparent, \n    black 20%, \n    black 80%, \n    transparent\n  );\n}\n\n.horizontal {\n  width: 100%;\n  height: var(--separator-thickness);\n  margin: var(--separator-margin) 0;\n}\n\n.vertical {\n  width: var(--separator-thickness);\n  height: 100%;\n  display: inline-block;\n  margin: 0 var(--separator-margin);\n  vertical-align: middle;\n}", ".layout {\n  width: min(100%, 72rem);\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--x-zigzag-gap, 0.5rem);\n  padding-inline: clamp(0.5rem, 2vw, 1rem);\n  position: relative; \n}\n\n/* Nuevos estilos para el SVG de la l\u00EDnea */\n.svgLine {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.item {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.item > * {\n  width: 100%;\n  text-align: inherit;\n}\n\n/* Wrapper transparente que envuelve al child */\n.contentWrapper {\n  width: 100%;\n}\n\n.textLeft > * {\n  text-align: left;\n}\n\n.textRight > * {\n  text-align: right;\n}\n\n.left > * {\n  grid-column: 2 / 8;\n}\n\n.right > * {\n  grid-column: 6 / 12;\n}\n\n@media (max-width: 768px) {\n  /* En lugar de ocupar las 12 columnas, los hacemos un poco m\u00E1s angostos para que sus centros se desfasen */\n  .left > * {\n    grid-column: 1 / 11;\n  }\n\n  .right > * {\n    grid-column: 3 / 13;\n  }\n}"],
-  "mappings": "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",
-  "names": ["XFooter", "container", "nav", "navVertical", "link", "copyright", "separatorContainer", "iconWrapper", "separator", "dashed", "dotted", "faded", "vertical", "horizontal", "layout", "svgLine", "item", "contentWrapper", "textLeft", "textRight", "left", "right"]
+  "sources": ["esbuild-css-modules-plugin-ns-css:src/components/layout/xfooter/XFooter.module.css", "esbuild-css-modules-plugin-ns-css:src/components/layout/xseparator/XSeparator.module.css", "esbuild-css-modules-plugin-ns-css:src/components/layout/xzigzaglayout/XZigZagLayout.module.css"],
+  "sourcesContent": [".XFooter-module__XFooter_v8t72G__012 {\n  background-color: var(--xf-bg, transparent);\n  width: 100%;\n  color: var(--xf-text, #333);\n  padding: var(--xf-py, .9rem) .6rem;\n}\n\n.XFooter-module__container_v8t72G__012 {\n  flex-direction: column;\n  align-items: center;\n  gap: .6rem;\n  max-width: 1280px;\n  margin: 0 auto;\n  display: flex;\n}\n\n.XFooter-module__nav_v8t72G__012 {\n  grid-template-columns: repeat(var(--xf-cols, 1), minmax(0, auto));\n  text-align: center;\n  justify-content: center;\n  gap: .5rem 1.5rem;\n  width: 100%;\n  display: grid;\n}\n\n.XFooter-module__navVertical_v8t72G__012 {\n  flex-direction: column;\n  align-items: center;\n  gap: .75rem;\n  display: flex;\n}\n\n.XFooter-module__link_v8t72G__012 {\n  color: var(--xf-accent, inherit);\n  white-space: nowrap;\n  font-size: .9rem;\n  text-decoration: none;\n  transition: opacity .2s;\n}\n\n.XFooter-module__link_v8t72G__012:hover {\n  opacity: .7;\n}\n\n.XFooter-module__copyright_v8t72G__012 {\n  opacity: .6;\n  text-align: center;\n  width: 100%;\n  font-size: .75rem;\n}\n", ".XSeparator-module__separatorContainer_btqQTG__012 {\n  --x-color: var(--separator-color);\n  --x-bg: white;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  display: flex;\n  position: relative;\n}\n\n.XSeparator-module__iconWrapper_btqQTG__012 {\n  background-color: var(--x-bg);\n  color: var(--x-color);\n  user-select: none;\n  padding: 0 10px;\n  font-family: system-ui, sans-serif;\n  font-size: 1.2rem;\n  font-weight: bold;\n  line-height: 1;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.XSeparator-module__separator_btqQTG__012 {\n  --separator-color: #e2e8f0;\n  --separator-thickness: 1px;\n  --separator-margin: 1rem;\n  background-color: var(--separator-color);\n  border: 0;\n}\n\n.XSeparator-module__dashed_btqQTG__012 {\n  border-bottom: var(--separator-thickness) dashed var(--separator-color);\n  background-color: #0000 !important;\n}\n\n.XSeparator-module__dotted_btqQTG__012 {\n  border-bottom: var(--separator-thickness) dotted var(--separator-color);\n  background-color: #0000 !important;\n}\n\n.XSeparator-module__faded_btqQTG__012 {\n  -webkit-mask-image: linear-gradient(to right, #0000, #000 20% 80%, #0000);\n  mask-image: linear-gradient(to right, #0000, #000 20% 80%, #0000);\n}\n\n.XSeparator-module__vertical_btqQTG__012.XSeparator-module__faded_btqQTG__012 {\n  -webkit-mask-image: linear-gradient(#0000, #000 20% 80%, #0000);\n  mask-image: linear-gradient(#0000, #000 20% 80%, #0000);\n}\n\n.XSeparator-module__horizontal_btqQTG__012 {\n  width: 100%;\n  height: var(--separator-thickness);\n  margin: var(--separator-margin) 0;\n}\n\n.XSeparator-module__vertical_btqQTG__012 {\n  width: var(--separator-thickness);\n  height: 100%;\n  margin: 0 var(--separator-margin);\n  vertical-align: middle;\n  display: inline-block;\n}\n", ".XZigZagLayout-module__layout_Jgc4GG__012 {\n  gap: var(--x-zigzag-gap, .5rem);\n  flex-direction: column;\n  width: min(100%, 72rem);\n  margin: 0 auto;\n  padding-inline: clamp(.5rem, 2vw, 1rem);\n  display: flex;\n  position: relative;\n}\n\n.XZigZagLayout-module__svgLine_Jgc4GG__012 {\n  pointer-events: none;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.XZigZagLayout-module__item_Jgc4GG__012 {\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  width: 100%;\n  display: grid;\n}\n\n.XZigZagLayout-module__item_Jgc4GG__012 > * {\n  width: 100%;\n  text-align: inherit;\n}\n\n.XZigZagLayout-module__contentWrapper_Jgc4GG__012 {\n  width: 100%;\n}\n\n.XZigZagLayout-module__textLeft_Jgc4GG__012 > * {\n  text-align: left;\n}\n\n.XZigZagLayout-module__textRight_Jgc4GG__012 > * {\n  text-align: right;\n}\n\n.XZigZagLayout-module__left_Jgc4GG__012 > * {\n  grid-column: 2 / 8;\n}\n\n.XZigZagLayout-module__right_Jgc4GG__012 > * {\n  grid-column: 6 / 12;\n}\n\n@media (width <= 768px) {\n  .XZigZagLayout-module__left_Jgc4GG__012 > * {\n    grid-column: 1 / 11;\n  }\n\n  .XZigZagLayout-module__right_Jgc4GG__012 > * {\n    grid-column: 3 / 13;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
 }

package/dist/components/layout/index.js

@@ -39,16 +39,47 @@ module.exports = __toCommonJS(layout_exports);
 // src/components/layout/xfooter/XFooter.tsx
 var import_link = __toESM(require("next/link"));
 
-// src/components/layout/xfooter/XFooter.module.css
-var XFooter_default = {
-  XFooter: "XFooter_XFooter3",
-  container: "XFooter_container3",
-  nav: "XFooter_nav3",
-  navVertical: "XFooter_navVertical3",
-  link: "XFooter_link3",
-  copyright: "XFooter_copyright3"
+// esbuild-css-modules-plugin-ns-js::src/components/layout/xfooter/XFooter.module.css:injector.js
+var content = __content_placeholder__;
+var digest = __digest_placeholder__;
+var inject = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest;
+      const text = globalThis.document.createTextNode(content);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
 };
 
+// src/components/layout/xfooter/XFooter.module.css
+var XFooter_default = new Proxy({
+  "xFooter": "XFooter-module__XFooter_v8t72G__012",
+  "container": "XFooter-module__container_v8t72G__012",
+  "copyright": "XFooter-module__copyright_v8t72G__012",
+  "link": "XFooter-module__link_v8t72G__012",
+  "nav": "XFooter-module__nav_v8t72G__012",
+  "navVertical": "XFooter-module__navVertical_v8t72G__012"
+}, {
+  get: function(source, key) {
+    inject();
+    return source[key];
+  }
+});
+
 // src/components/layout/xfooter/XFooter.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function XFooter({
@@ -77,18 +108,49 @@ function XFooter({
   ] }) });
 }
 
-// src/components/layout/xseparator/XSeparator.module.css
-var XSeparator_default = {
-  separatorContainer: "XSeparator_separatorContainer3",
-  iconWrapper: "XSeparator_iconWrapper3",
-  separator: "XSeparator_separator3",
-  dashed: "XSeparator_dashed3",
-  dotted: "XSeparator_dotted3",
-  faded: "XSeparator_faded3",
-  vertical: "XSeparator_vertical3",
-  horizontal: "XSeparator_horizontal3"
+// esbuild-css-modules-plugin-ns-js::src/components/layout/xseparator/XSeparator.module.css:injector.js
+var content2 = __content_placeholder__;
+var digest2 = __digest_placeholder__;
+var inject2 = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest2);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest2;
+      const text = globalThis.document.createTextNode(content2);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
 };
 
+// src/components/layout/xseparator/XSeparator.module.css
+var XSeparator_default = new Proxy({
+  "dashed": "XSeparator-module__dashed_btqQTG__012",
+  "dotted": "XSeparator-module__dotted_btqQTG__012",
+  "faded": "XSeparator-module__faded_btqQTG__012",
+  "horizontal": "XSeparator-module__horizontal_btqQTG__012",
+  "iconWrapper": "XSeparator-module__iconWrapper_btqQTG__012",
+  "separator": "XSeparator-module__separator_btqQTG__012",
+  "separatorContainer": "XSeparator-module__separatorContainer_btqQTG__012",
+  "vertical": "XSeparator-module__vertical_btqQTG__012"
+}, {
+  get: function(source, key) {
+    inject2();
+    return source[key];
+  }
+});
+
 // src/components/layout/xseparator/XSeparator.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function XSeparator({
@@ -128,18 +190,49 @@ function XSeparator({
 // src/components/layout/xzigzaglayout/XZigZagLayout.tsx
 var import_react = require("react");
 
-// src/components/layout/xzigzaglayout/XZigZagLayout.module.css
-var XZigZagLayout_default = {
-  layout: "XZigZagLayout_layout3",
-  svgLine: "XZigZagLayout_svgLine3",
-  item: "XZigZagLayout_item3",
-  contentWrapper: "XZigZagLayout_contentWrapper3",
-  textLeft: "XZigZagLayout_textLeft3",
-  textRight: "XZigZagLayout_textRight3",
-  left: "XZigZagLayout_left3",
-  right: "XZigZagLayout_right3"
+// esbuild-css-modules-plugin-ns-js::src/components/layout/xzigzaglayout/XZigZagLayout.module.css:injector.js
+var content3 = __content_placeholder__;
+var digest3 = __digest_placeholder__;
+var inject3 = () => {
+  setTimeout(() => {
+    if (!globalThis.document) {
+      return;
+    }
+    let root = globalThis.document.querySelector("head");
+    if (root && root.shadowRoot) {
+      root = root.shadowRoot;
+    }
+    if (!root) {
+      root = globalThis.document.head;
+    }
+    let container = root.querySelector("#_" + digest3);
+    if (!container) {
+      container = globalThis.document.createElement("style");
+      container.id = "_" + digest3;
+      const text = globalThis.document.createTextNode(content3);
+      container.appendChild(text);
+      root.appendChild(container);
+    }
+  }, 0);
 };
 
+// src/components/layout/xzigzaglayout/XZigZagLayout.module.css
+var XZigZagLayout_default = new Proxy({
+  "contentWrapper": "XZigZagLayout-module__contentWrapper_Jgc4GG__012",
+  "item": "XZigZagLayout-module__item_Jgc4GG__012",
+  "layout": "XZigZagLayout-module__layout_Jgc4GG__012",
+  "left": "XZigZagLayout-module__left_Jgc4GG__012",
+  "right": "XZigZagLayout-module__right_Jgc4GG__012",
+  "svgLine": "XZigZagLayout-module__svgLine_Jgc4GG__012",
+  "textLeft": "XZigZagLayout-module__textLeft_Jgc4GG__012",
+  "textRight": "XZigZagLayout-module__textRight_Jgc4GG__012"
+}, {
+  get: function(source, key) {
+    inject3();
+    return source[key];
+  }
+});
+
 // src/components/layout/xzigzaglayout/XZigZagLayout.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function XZigZagLayout({

package/dist/components/layout/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/layout/index.ts", "../../../src/components/layout/xfooter/XFooter.tsx", "../../../src/components/layout/xfooter/XFooter.module.css", "../../../src/components/layout/xseparator/XSeparator.module.css", "../../../src/components/layout/xseparator/XSeparator.tsx", "../../../src/components/layout/xzigzaglayout/XZigZagLayout.tsx", "../../../src/components/layout/xzigzaglayout/XZigZagLayout.module.css"],
-  "sourcesContent": ["export { XFooter } from \"./xfooter\";\nexport { XSeparator } from \"./xseparator\";\nexport { XZigZagLayout } from \"./xzigzaglayout\";\nexport type { XFooterProps, XFooterLink, CopyrightConfig } from \"./xfooter\";\nexport type { XSeparatorProps } from \"./xseparator\";\nexport type { XZigZagLayoutProps } from \"./xzigzaglayout\";\n", "import Link from \"next/link\";\nimport { CSSProperties } from \"react\";\nimport styles from \"./XFooter.module.css\";\n\nexport type XFooterLink = {\n  label: string;\n  href: string;\n};\n\nexport type CopyrightConfig = {\n  text?: string;\n  showYear?: boolean;\n  customYear?: number | string;\n  yearFirst?: boolean;\n};\n\nexport type XFooterProps = {\n  links: XFooterLink[];\n  copyright?: CopyrightConfig; \n  layout?: \"horizontal\" | \"vertical\";\n  columns?: 1 | 2 | 3 | 4;\n  colors?: {\n    bg?: string;\n    text?: string;\n    accent?: string;\n    border?: string;\n  };\n  className?: string;\n};\nexport default function XFooter({\n  links,\n  copyright,\n  layout = \"horizontal\",\n  columns = 1,\n  colors,\n  className = \"\",\n}: XFooterProps) {\n  \n  const customStyles = {\n    \"--xf-bg\": colors?.bg,\n    \"--xf-text\": colors?.text,\n    \"--xf-accent\": colors?.accent,\n    \"--xf-border\": colors?.border,\n    \"--xf-cols\": layout === \"horizontal\" ? columns : 1,\n  } as CSSProperties;\n\n  const currentYear = copyright?.customYear || new Date().getFullYear();\n  const copyLabel = copyright?.text || \"Xscriptor\";\n\n  return (\n    <footer className={`${styles.XFooter} ${className}`} style={customStyles}>\n      <div className={styles.container}>\n        {/* Los links se organizan en el grid definido por --xf-cols */}\n        <nav className={layout === \"vertical\" ? styles.navVertical : styles.nav}>\n          {links.map((link, idx) => (\n            <Link key={idx} href={link.href} className={styles.link}>\n              {link.label}\n            </Link>\n          ))}\n        </nav>\n\n        {/* El copyright queda fuera del nav, por lo que hereda el centrado del container */}\n        <div className={styles.copyright}>\n          \u00A9 {copyright?.yearFirst \n              ? `${currentYear} ${copyLabel}` \n              : `${copyLabel} ${currentYear}`}\n        </div>\n      </div>\n    </footer>\n  );\n}", ".XFooter {\n  width: 100%;\n  background-color: var(--xf-bg, transparent);\n  color: var(--xf-text, #333);\n  padding: var(--xf-py, 0.9rem) 0.6rem;\n}\n\n.container {\n  max-width: 1280px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.6rem; /* Espacio entre los links y el copyright */\n}\n\n/* El nav es el que maneja las columnas de los links */\n.nav {\n  display: grid;\n  gap: 0.5rem 1.5rem;  \n  grid-template-columns: repeat(var(--xf-cols, 1), minmax(0, auto));\n  justify-content: center;\n  text-align: center;\n  width: 100%;\n}\n\n.navVertical {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.link {\n  color: var(--xf-accent, inherit);\n  text-decoration: none;\n  font-size: 0.9rem;\n  transition: opacity 0.2s;\n  white-space: nowrap; /* Evita que los links se rompan en dos l\u00EDneas */\n}\n\n.link:hover {\n  opacity: 0.7;\n}\n\n/* El copyright siempre ir\u00E1 al final y centrado por el flex del .container */\n.copyright {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  width: 100%;\n  text-align: center;\n}", ".separatorContainer {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  /* Variables para la X con fallbacks */\n  --x-color: var(--separator-color); \n  --x-bg: white;\n}\n\n.iconWrapper {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--x-bg);\n  padding: 0 10px;\n  \n  /* Aplicamos el color din\u00E1mico */\n  color: var(--x-color);\n  \n  font-family: system-ui, sans-serif;\n  font-weight: bold;\n  font-size: 1.2rem;\n  line-height: 1;\n  user-select: none;\n}\n\n.separator {\n  --separator-color: #e2e8f0;\n  --separator-thickness: 1px;\n  --separator-margin: 1rem;\n  \n  border: 0;\n  background-color: var(--separator-color);\n}\n\n/* Variantes de Estilo */\n.dashed {\n  background-color: transparent !important;\n  border-bottom: var(--separator-thickness) dashed var(--separator-color);\n}\n\n.dotted {\n  background-color: transparent !important;\n  border-bottom: var(--separator-thickness) dotted var(--separator-color);\n}\n\n/* Efecto Desvanecido (Fading) */\n/* Usamos mask-image para que funcione con cualquier color de fondo */\n.faded {\n  mask-image: linear-gradient(\n    to right, \n    transparent, \n    black 20%, \n    black 80%, \n    transparent\n  );\n}\n\n/* Ajuste para desvanecido vertical */\n.vertical.faded {\n  mask-image: linear-gradient(\n    to bottom, \n    transparent, \n    black 20%, \n    black 80%, \n    transparent\n  );\n}\n\n.horizontal {\n  width: 100%;\n  height: var(--separator-thickness);\n  margin: var(--separator-margin) 0;\n}\n\n.vertical {\n  width: var(--separator-thickness);\n  height: 100%;\n  display: inline-block;\n  margin: 0 var(--separator-margin);\n  vertical-align: middle;\n}", "import React from 'react';\nimport styles from './XSeparator.module.css';\n\nexport interface XSeparatorProps {\n  orientation?: 'horizontal' | 'vertical';\n  variant?: 'solid' | 'dashed' | 'dotted';\n  isFaded?: boolean;\n  hasX?: boolean;\n  xColor?: string; // Nuevo: Color de la X\n  xBg?: string;    // Nuevo: Fondo detr\u00E1s de la X (para el recorte)\n  thickness?: string;\n  color?: string;\n  gap?: string;\n  className?: string;\n}\n\nexport default function XSeparator({\n  orientation = 'horizontal',\n  variant = 'solid',\n  isFaded = false,\n  hasX = false,\n  xColor, \n  xBg = 'white',\n  thickness = '1px',\n  color = '#e2e8f0',\n  gap = '1rem',\n  className = ''\n}: XSeparatorProps) {\n  \n  const dynamicStyles = {\n    '--separator-color': color,\n    '--separator-thickness': thickness,\n    '--separator-margin': gap,\n    '--x-color': xColor || color, // Si no se define xColor, usa el color de la l\u00EDnea\n    '--x-bg': xBg,\n  } as React.CSSProperties;\n\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    variant !== 'solid' && styles[variant],\n    isFaded && styles.faded,\n  ].filter(Boolean).join(' ');\n\n  const line = <hr className={classes} style={dynamicStyles} />;\n\n  if (!hasX) return line;\n\n  return (\n    <div className={`${styles.separatorContainer} ${className}`} style={dynamicStyles}>\n      {line}\n      <div className={styles.iconWrapper}>\n        \u2715\n      </div>\n    </div>\n  );\n}", "import React, { Children, HTMLAttributes, useEffect, useRef, useState, useCallback } from \"react\";\nimport styles from \"./XZigZagLayout.module.css\";\n\nexport type XZigZagLayoutProps = HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  startSide?: \"left\" | \"right\";\n  gap?: number | string;\n  offset?: number | string;\n  textAlign?: \"inherit\" | \"side\" | \"left\" | \"right\";\n  showLine?: boolean;\n  lineColor?: string;\n  lineThickness?: number | string;\n};\n\nexport default function XZigZagLayout({\n  children,\n  className,\n  style,\n  startSide = \"left\",\n  gap,\n  offset,\n  textAlign = \"inherit\",\n  showLine = false,\n  lineColor = \"#cccccc\",\n  lineThickness = 2,\n  ...rest\n}: XZigZagLayoutProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n  const pathRef = useRef<SVGPathElement>(null);\n\n  const [points, setPoints] = useState<{ x: number; y: number }[]>([]);\n  const [pathLength, setPathLength] = useState(0);\n  const [drawProgress, setDrawProgress] = useState(0);\n\n  // Calcula el centro de cada elemento para dibujar los puntos\n  const calculatePoints = useCallback(() => {\n    if (!containerRef.current) return;\n    const containerRect = containerRef.current.getBoundingClientRect();\n\n    const newPoints = itemsRef.current.filter(Boolean).map((el) => {\n      const rect = el!.getBoundingClientRect();\n      return {\n        x: rect.left + rect.width / 2 - containerRect.left,\n        y: rect.top + rect.height / 2 - containerRect.top,\n      };\n    });\n\n    if (newPoints.length > 0) {\n      newPoints.unshift({ x: newPoints[0].x, y: 0 }); // Inicia arriba\n      newPoints.push({ x: newPoints[newPoints.length - 1].x, y: containerRect.height }); // Termina abajo\n    }\n\n    setPoints(newPoints);\n  }, []);\n\n  useEffect(() => {\n    if (!showLine || !containerRef.current) return;\n    const observer = new ResizeObserver(() => calculatePoints());\n    observer.observe(containerRef.current);\n    calculatePoints();\n    return () => observer.disconnect();\n  }, [showLine, calculatePoints]);\n\n  useEffect(() => {\n    if (pathRef.current) setPathLength(pathRef.current.getTotalLength());\n  }, [points]);\n\n  useEffect(() => {\n    if (!showLine) return;\n    const handleScroll = () => {\n      if (!containerRef.current) return;\n      const { top, height } = containerRef.current.getBoundingClientRect();\n      const windowHeight = window.innerHeight;\n      const start = windowHeight / 2;\n      const progress = (start - top) / height;\n\n      setDrawProgress(Math.min(Math.max(progress, 0), 1));\n    };\n\n    window.addEventListener(\"scroll\", handleScroll);\n    handleScroll();\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, [showLine]);\n\n  const cssVars: Record<string, string> = {};\n  if (gap !== undefined) cssVars[\"--x-zigzag-gap\"] = typeof gap === \"number\" ? `${gap}px` : gap;\n  if (offset !== undefined) cssVars[\"--x-zigzag-offset\"] = typeof offset === \"number\" ? `${offset}px` : offset;\n\n  const mergedStyle: React.CSSProperties = { ...style, ...cssVars };\n\n  const pathD = points.length > 0\n    ? `M ${points[0].x} ${points[0].y} ` + points.slice(1).map((p) => `L ${p.x} ${p.y}`).join(\" \")\n    : \"\";\n\n  return (\n    <div\n      ref={containerRef}\n      {...rest}\n      className={[styles.layout, className].filter(Boolean).join(\" \")}\n      style={mergedStyle}\n    >\n      {showLine && points.length > 0 && (\n        <svg className={styles.svgLine} xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            ref={pathRef}\n            d={pathD}\n            fill=\"none\"\n            stroke={lineColor}\n            strokeWidth={lineThickness}\n            strokeDasharray={pathLength}\n            strokeDashoffset={pathLength - pathLength * drawProgress}\n            style={{ transition: \"stroke-dashoffset 0.1s ease-out\" }}\n          />\n        </svg>\n      )}\n\n      {items.map((child, index) => {\n        const isStartLeft = startSide === \"left\";\n        const alignLeft = isStartLeft ? index % 2 === 0 : index % 2 !== 0;\n        const alignmentClass =\n          textAlign === \"side\"\n            ? alignLeft ? styles.textLeft : styles.textRight\n            : textAlign === \"left\" ? styles.textLeft : textAlign === \"right\" ? styles.textRight : \"\";\n\n        return (\n          <div key={index} className={`${styles.item} ${alignLeft ? styles.left : styles.right} ${alignmentClass}`}>\n            {/* El wrapper interno nos permite medir exactamente d\u00F3nde queda el contenido */}\n            <div ref={(el) => { itemsRef.current[index] = el; }} className={styles.contentWrapper}>\n              {child}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}", ".layout {\n  width: min(100%, 72rem);\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--x-zigzag-gap, 0.5rem);\n  padding-inline: clamp(0.5rem, 2vw, 1rem);\n  position: relative; \n}\n\n/* Nuevos estilos para el SVG de la l\u00EDnea */\n.svgLine {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.item {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n}\n\n.item > * {\n  width: 100%;\n  text-align: inherit;\n}\n\n/* Wrapper transparente que envuelve al child */\n.contentWrapper {\n  width: 100%;\n}\n\n.textLeft > * {\n  text-align: left;\n}\n\n.textRight > * {\n  text-align: right;\n}\n\n.left > * {\n  grid-column: 2 / 8;\n}\n\n.right > * {\n  grid-column: 6 / 12;\n}\n\n@media (max-width: 768px) {\n  /* En lugar de ocupar las 12 columnas, los hacemos un poco m\u00E1s angostos para que sus centros se desfasen */\n  .left > * {\n    grid-column: 1 / 11;\n  }\n\n  .right > * {\n    grid-column: 3 / 13;\n  }\n}"],
-  "mappings": "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",
-  "names": ["XFooter", "container", "nav", "navVertical", "link", "copyright", "Link", "separatorContainer", "iconWrapper", "separator", "dashed", "dotted", "faded", "vertical", "horizontal", "import_jsx_runtime", "layout", "svgLine", "item", "contentWrapper", "textLeft", "textRight", "left", "right", "import_jsx_runtime"]
+  "sources": ["../../../src/components/layout/index.ts", "../../../src/components/layout/xfooter/XFooter.tsx", "esbuild-css-modules-plugin-ns-js::src/components/layout/xfooter/XFooter.module.css:injector.js", "../../../src/components/layout/xfooter/XFooter.module.css", "esbuild-css-modules-plugin-ns-js::src/components/layout/xseparator/XSeparator.module.css:injector.js", "../../../src/components/layout/xseparator/XSeparator.module.css", "../../../src/components/layout/xseparator/XSeparator.tsx", "../../../src/components/layout/xzigzaglayout/XZigZagLayout.tsx", "esbuild-css-modules-plugin-ns-js::src/components/layout/xzigzaglayout/XZigZagLayout.module.css:injector.js", "../../../src/components/layout/xzigzaglayout/XZigZagLayout.module.css"],
+  "sourcesContent": ["export { XFooter } from \"./xfooter\";\nexport { XSeparator } from \"./xseparator\";\nexport { XZigZagLayout } from \"./xzigzaglayout\";\nexport type { XFooterProps, XFooterLink, CopyrightConfig } from \"./xfooter\";\nexport type { XSeparatorProps } from \"./xseparator\";\nexport type { XZigZagLayoutProps } from \"./xzigzaglayout\";\n", "import Link from \"next/link\";\nimport { CSSProperties } from \"react\";\nimport styles from \"./XFooter.module.css\";\n\nexport type XFooterLink = {\n  label: string;\n  href: string;\n};\n\nexport type CopyrightConfig = {\n  text?: string;\n  showYear?: boolean;\n  customYear?: number | string;\n  yearFirst?: boolean;\n};\n\nexport type XFooterProps = {\n  links: XFooterLink[];\n  copyright?: CopyrightConfig; \n  layout?: \"horizontal\" | \"vertical\";\n  columns?: 1 | 2 | 3 | 4;\n  colors?: {\n    bg?: string;\n    text?: string;\n    accent?: string;\n    border?: string;\n  };\n  className?: string;\n};\nexport default function XFooter({\n  links,\n  copyright,\n  layout = \"horizontal\",\n  columns = 1,\n  colors,\n  className = \"\",\n}: XFooterProps) {\n  \n  const customStyles = {\n    \"--xf-bg\": colors?.bg,\n    \"--xf-text\": colors?.text,\n    \"--xf-accent\": colors?.accent,\n    \"--xf-border\": colors?.border,\n    \"--xf-cols\": layout === \"horizontal\" ? columns : 1,\n  } as CSSProperties;\n\n  const currentYear = copyright?.customYear || new Date().getFullYear();\n  const copyLabel = copyright?.text || \"Xscriptor\";\n\n  return (\n    <footer className={`${styles.XFooter} ${className}`} style={customStyles}>\n      <div className={styles.container}>\n        {/* Los links se organizan en el grid definido por --xf-cols */}\n        <nav className={layout === \"vertical\" ? styles.navVertical : styles.nav}>\n          {links.map((link, idx) => (\n            <Link key={idx} href={link.href} className={styles.link}>\n              {link.label}\n            </Link>\n          ))}\n        </nav>\n\n        {/* El copyright queda fuera del nav, por lo que hereda el centrado del container */}\n        <div className={styles.copyright}>\n          \u00A9 {copyright?.yearFirst \n              ? `${currentYear} ${copyLabel}` \n              : `${copyLabel} ${currentYear}`}\n        </div>\n      </div>\n    </footer>\n  );\n}", "\nconst content = __content_placeholder__;\nconst digest = __digest_placeholder__;  \nconst inject = () => {\n  setTimeout(() => {\n    if (!globalThis.document) {\n      return;\n    }\n    let root = globalThis.document.querySelector(\"head\");\n    if (root && root.shadowRoot) {\n      root = root.shadowRoot;\n    }\n    if (!root) {\n      root = globalThis.document.head;\n    }\n    let container = root.querySelector(\"#_\" + digest);\n    if (!container) {\n      container = globalThis.document.createElement(\"style\");\n      container.id = \"_\" + digest;\n      const text = globalThis.document.createTextNode(content);\n      container.appendChild(text);\n      root.appendChild(container);\n    }\n  }, 0);\n};\n\nexport { inject };\n    ", "import \"esbuild-css-modules-plugin-ns-css:src/components/layout/xfooter/XFooter.module.css\";\n\nimport { inject } from \"esbuild-css-modules-plugin-ns-js:src/components/layout/xfooter/XFooter.module.css:injector.js\";\nexport default new Proxy({\n  \"xFooter\": \"XFooter-module__XFooter_v8t72G__012\",\n  \"container\": \"XFooter-module__container_v8t72G__012\",\n  \"copyright\": \"XFooter-module__copyright_v8t72G__012\",\n  \"link\": \"XFooter-module__link_v8t72G__012\",\n  \"nav\": \"XFooter-module__nav_v8t72G__012\",\n  \"navVertical\": \"XFooter-module__navVertical_v8t72G__012\"\n}, {\n  get: function(source, key) {\n    inject();\n    return source[key];\n  }\n});\n      ", "\nconst content = __content_placeholder__;\nconst digest = __digest_placeholder__;  \nconst inject = () => {\n  setTimeout(() => {\n    if (!globalThis.document) {\n      return;\n    }\n    let root = globalThis.document.querySelector(\"head\");\n    if (root && root.shadowRoot) {\n      root = root.shadowRoot;\n    }\n    if (!root) {\n      root = globalThis.document.head;\n    }\n    let container = root.querySelector(\"#_\" + digest);\n    if (!container) {\n      container = globalThis.document.createElement(\"style\");\n      container.id = \"_\" + digest;\n      const text = globalThis.document.createTextNode(content);\n      container.appendChild(text);\n      root.appendChild(container);\n    }\n  }, 0);\n};\n\nexport { inject };\n    ", "import \"esbuild-css-modules-plugin-ns-css:src/components/layout/xseparator/XSeparator.module.css\";\n\nimport { inject } from \"esbuild-css-modules-plugin-ns-js:src/components/layout/xseparator/XSeparator.module.css:injector.js\";\nexport default new Proxy({\n  \"dashed\": \"XSeparator-module__dashed_btqQTG__012\",\n  \"dotted\": \"XSeparator-module__dotted_btqQTG__012\",\n  \"faded\": \"XSeparator-module__faded_btqQTG__012\",\n  \"horizontal\": \"XSeparator-module__horizontal_btqQTG__012\",\n  \"iconWrapper\": \"XSeparator-module__iconWrapper_btqQTG__012\",\n  \"separator\": \"XSeparator-module__separator_btqQTG__012\",\n  \"separatorContainer\": \"XSeparator-module__separatorContainer_btqQTG__012\",\n  \"vertical\": \"XSeparator-module__vertical_btqQTG__012\"\n}, {\n  get: function(source, key) {\n    inject();\n    return source[key];\n  }\n});\n      ", "import React from 'react';\nimport styles from './XSeparator.module.css';\n\nexport interface XSeparatorProps {\n  orientation?: 'horizontal' | 'vertical';\n  variant?: 'solid' | 'dashed' | 'dotted';\n  isFaded?: boolean;\n  hasX?: boolean;\n  xColor?: string; // Nuevo: Color de la X\n  xBg?: string;    // Nuevo: Fondo detr\u00E1s de la X (para el recorte)\n  thickness?: string;\n  color?: string;\n  gap?: string;\n  className?: string;\n}\n\nexport default function XSeparator({\n  orientation = 'horizontal',\n  variant = 'solid',\n  isFaded = false,\n  hasX = false,\n  xColor, \n  xBg = 'white',\n  thickness = '1px',\n  color = '#e2e8f0',\n  gap = '1rem',\n  className = ''\n}: XSeparatorProps) {\n  \n  const dynamicStyles = {\n    '--separator-color': color,\n    '--separator-thickness': thickness,\n    '--separator-margin': gap,\n    '--x-color': xColor || color, // Si no se define xColor, usa el color de la l\u00EDnea\n    '--x-bg': xBg,\n  } as React.CSSProperties;\n\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    variant !== 'solid' && styles[variant],\n    isFaded && styles.faded,\n  ].filter(Boolean).join(' ');\n\n  const line = <hr className={classes} style={dynamicStyles} />;\n\n  if (!hasX) return line;\n\n  return (\n    <div className={`${styles.separatorContainer} ${className}`} style={dynamicStyles}>\n      {line}\n      <div className={styles.iconWrapper}>\n        \u2715\n      </div>\n    </div>\n  );\n}", "import React, { Children, HTMLAttributes, useEffect, useRef, useState, useCallback } from \"react\";\nimport styles from \"./XZigZagLayout.module.css\";\n\nexport type XZigZagLayoutProps = HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  startSide?: \"left\" | \"right\";\n  gap?: number | string;\n  offset?: number | string;\n  textAlign?: \"inherit\" | \"side\" | \"left\" | \"right\";\n  showLine?: boolean;\n  lineColor?: string;\n  lineThickness?: number | string;\n};\n\nexport default function XZigZagLayout({\n  children,\n  className,\n  style,\n  startSide = \"left\",\n  gap,\n  offset,\n  textAlign = \"inherit\",\n  showLine = false,\n  lineColor = \"#cccccc\",\n  lineThickness = 2,\n  ...rest\n}: XZigZagLayoutProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n  const pathRef = useRef<SVGPathElement>(null);\n\n  const [points, setPoints] = useState<{ x: number; y: number }[]>([]);\n  const [pathLength, setPathLength] = useState(0);\n  const [drawProgress, setDrawProgress] = useState(0);\n\n  // Calcula el centro de cada elemento para dibujar los puntos\n  const calculatePoints = useCallback(() => {\n    if (!containerRef.current) return;\n    const containerRect = containerRef.current.getBoundingClientRect();\n\n    const newPoints = itemsRef.current.filter(Boolean).map((el) => {\n      const rect = el!.getBoundingClientRect();\n      return {\n        x: rect.left + rect.width / 2 - containerRect.left,\n        y: rect.top + rect.height / 2 - containerRect.top,\n      };\n    });\n\n    if (newPoints.length > 0) {\n      newPoints.unshift({ x: newPoints[0].x, y: 0 }); // Inicia arriba\n      newPoints.push({ x: newPoints[newPoints.length - 1].x, y: containerRect.height }); // Termina abajo\n    }\n\n    setPoints(newPoints);\n  }, []);\n\n  useEffect(() => {\n    if (!showLine || !containerRef.current) return;\n    const observer = new ResizeObserver(() => calculatePoints());\n    observer.observe(containerRef.current);\n    calculatePoints();\n    return () => observer.disconnect();\n  }, [showLine, calculatePoints]);\n\n  useEffect(() => {\n    if (pathRef.current) setPathLength(pathRef.current.getTotalLength());\n  }, [points]);\n\n  useEffect(() => {\n    if (!showLine) return;\n    const handleScroll = () => {\n      if (!containerRef.current) return;\n      const { top, height } = containerRef.current.getBoundingClientRect();\n      const windowHeight = window.innerHeight;\n      const start = windowHeight / 2;\n      const progress = (start - top) / height;\n\n      setDrawProgress(Math.min(Math.max(progress, 0), 1));\n    };\n\n    window.addEventListener(\"scroll\", handleScroll);\n    handleScroll();\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, [showLine]);\n\n  const cssVars: Record<string, string> = {};\n  if (gap !== undefined) cssVars[\"--x-zigzag-gap\"] = typeof gap === \"number\" ? `${gap}px` : gap;\n  if (offset !== undefined) cssVars[\"--x-zigzag-offset\"] = typeof offset === \"number\" ? `${offset}px` : offset;\n\n  const mergedStyle: React.CSSProperties = { ...style, ...cssVars };\n\n  const pathD = points.length > 0\n    ? `M ${points[0].x} ${points[0].y} ` + points.slice(1).map((p) => `L ${p.x} ${p.y}`).join(\" \")\n    : \"\";\n\n  return (\n    <div\n      ref={containerRef}\n      {...rest}\n      className={[styles.layout, className].filter(Boolean).join(\" \")}\n      style={mergedStyle}\n    >\n      {showLine && points.length > 0 && (\n        <svg className={styles.svgLine} xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            ref={pathRef}\n            d={pathD}\n            fill=\"none\"\n            stroke={lineColor}\n            strokeWidth={lineThickness}\n            strokeDasharray={pathLength}\n            strokeDashoffset={pathLength - pathLength * drawProgress}\n            style={{ transition: \"stroke-dashoffset 0.1s ease-out\" }}\n          />\n        </svg>\n      )}\n\n      {items.map((child, index) => {\n        const isStartLeft = startSide === \"left\";\n        const alignLeft = isStartLeft ? index % 2 === 0 : index % 2 !== 0;\n        const alignmentClass =\n          textAlign === \"side\"\n            ? alignLeft ? styles.textLeft : styles.textRight\n            : textAlign === \"left\" ? styles.textLeft : textAlign === \"right\" ? styles.textRight : \"\";\n\n        return (\n          <div key={index} className={`${styles.item} ${alignLeft ? styles.left : styles.right} ${alignmentClass}`}>\n            {/* El wrapper interno nos permite medir exactamente d\u00F3nde queda el contenido */}\n            <div ref={(el) => { itemsRef.current[index] = el; }} className={styles.contentWrapper}>\n              {child}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}", "\nconst content = __content_placeholder__;\nconst digest = __digest_placeholder__;  \nconst inject = () => {\n  setTimeout(() => {\n    if (!globalThis.document) {\n      return;\n    }\n    let root = globalThis.document.querySelector(\"head\");\n    if (root && root.shadowRoot) {\n      root = root.shadowRoot;\n    }\n    if (!root) {\n      root = globalThis.document.head;\n    }\n    let container = root.querySelector(\"#_\" + digest);\n    if (!container) {\n      container = globalThis.document.createElement(\"style\");\n      container.id = \"_\" + digest;\n      const text = globalThis.document.createTextNode(content);\n      container.appendChild(text);\n      root.appendChild(container);\n    }\n  }, 0);\n};\n\nexport { inject };\n    ", "import \"esbuild-css-modules-plugin-ns-css:src/components/layout/xzigzaglayout/XZigZagLayout.module.css\";\n\nimport { inject } from \"esbuild-css-modules-plugin-ns-js:src/components/layout/xzigzaglayout/XZigZagLayout.module.css:injector.js\";\nexport default new Proxy({\n  \"contentWrapper\": \"XZigZagLayout-module__contentWrapper_Jgc4GG__012\",\n  \"item\": \"XZigZagLayout-module__item_Jgc4GG__012\",\n  \"layout\": \"XZigZagLayout-module__layout_Jgc4GG__012\",\n  \"left\": \"XZigZagLayout-module__left_Jgc4GG__012\",\n  \"right\": \"XZigZagLayout-module__right_Jgc4GG__012\",\n  \"svgLine\": \"XZigZagLayout-module__svgLine_Jgc4GG__012\",\n  \"textLeft\": \"XZigZagLayout-module__textLeft_Jgc4GG__012\",\n  \"textRight\": \"XZigZagLayout-module__textRight_Jgc4GG__012\"\n}, {\n  get: function(source, key) {\n    inject();\n    return source[key];\n  }\n});\n      "],
+  "mappings": "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",
+  "names": ["Link", "content", "digest", "inject", "inject", "import_jsx_runtime", "content", "digest", "inject", "inject", "import_jsx_runtime"]
 }

package/dist/components/layout/index.mjs

@@ -2,7 +2,7 @@ import {
   XFooter,
   XSeparator,
   XZigZagLayout
-} from "../../chunk-UROP4J6G.mjs";
+} from "../../chunk-FW47JGYZ.mjs";
 export {
   XFooter,
   XSeparator,