@xscriptor/xcomponents 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/README.md +1 -0
  2. package/dist/{chunk-U27ZVCP7.mjs → chunk-2H7TVDE7.mjs} +14 -2
  3. package/dist/chunk-2H7TVDE7.mjs.map +7 -0
  4. package/dist/{chunk-5G4P2E76.mjs → chunk-34NJCJUI.mjs} +11 -2
  5. package/dist/chunk-34NJCJUI.mjs.map +7 -0
  6. package/dist/chunk-FZRTAML3.mjs +1 -1
  7. package/dist/chunk-FZRTAML3.mjs.map +7 -1
  8. package/dist/{chunk-2OAXRRVQ.mjs → chunk-MYFPSHSQ.mjs} +32 -3
  9. package/dist/chunk-MYFPSHSQ.mjs.map +7 -0
  10. package/dist/{chunk-NY22GB3E.mjs → chunk-TG3B4GAW.mjs} +26 -2
  11. package/dist/chunk-TG3B4GAW.mjs.map +7 -0
  12. package/dist/{chunk-QCMWPIG7.mjs → chunk-TKT37LIX.mjs} +39 -3
  13. package/dist/chunk-TKT37LIX.mjs.map +7 -0
  14. package/dist/{chunk-42XPBYTL.mjs → chunk-UROP4J6G.mjs} +29 -4
  15. package/dist/chunk-UROP4J6G.mjs.map +7 -0
  16. package/dist/components/content/index.css +23 -23
  17. package/dist/components/content/index.css.map +7 -1
  18. package/dist/components/content/index.d.ts +2 -17
  19. package/dist/components/content/index.js +11 -6
  20. package/dist/components/content/index.js.map +7 -1
  21. package/dist/components/content/index.mjs +2 -2
  22. package/dist/components/content/index.mjs.map +7 -1
  23. package/dist/components/content/xinteractivephrase/XInteractivePhrase.d.ts +13 -0
  24. package/dist/components/content/xinteractivephrase/index.d.ts +3 -0
  25. package/dist/components/forms/index.css +54 -54
  26. package/dist/components/forms/index.css.map +7 -1
  27. package/dist/components/forms/index.d.ts +4 -68
  28. package/dist/components/forms/index.js +39 -8
  29. package/dist/components/forms/index.js.map +7 -1
  30. package/dist/components/forms/index.mjs +2 -2
  31. package/dist/components/forms/index.mjs.map +7 -1
  32. package/dist/components/forms/xcontactform/XContactForm.d.ts +42 -0
  33. package/dist/components/forms/xcontactform/index.d.ts +3 -0
  34. package/dist/components/forms/xnewsletter/XNewsletter.d.ts +21 -0
  35. package/dist/components/forms/xnewsletter/index.d.ts +3 -0
  36. package/dist/components/gallery/index.css +58 -58
  37. package/dist/components/gallery/index.css.map +7 -1
  38. package/dist/components/gallery/index.d.ts +4 -29
  39. package/dist/components/gallery/index.js +32 -8
  40. package/dist/components/gallery/index.js.map +7 -1
  41. package/dist/components/gallery/index.mjs +2 -2
  42. package/dist/components/gallery/index.mjs.map +7 -1
  43. package/dist/components/gallery/xmicrogallerytext/XMicroGalleryText.d.ts +15 -0
  44. package/dist/components/gallery/xmicrogallerytext/index.d.ts +3 -0
  45. package/dist/components/gallery/xstaticgallery/XStaticGallery.d.ts +10 -0
  46. package/dist/components/gallery/xstaticgallery/index.d.ts +3 -0
  47. package/dist/components/index.css +215 -215
  48. package/dist/components/index.css.map +7 -1
  49. package/dist/components/index.d.ts +6 -8
  50. package/dist/components/index.js +146 -31
  51. package/dist/components/index.js.map +7 -1
  52. package/dist/components/index.mjs +12 -12
  53. package/dist/components/index.mjs.map +7 -1
  54. package/dist/components/layout/index.css +28 -28
  55. package/dist/components/layout/index.css.map +7 -1
  56. package/dist/components/layout/index.d.ts +6 -55
  57. package/dist/components/layout/index.js +29 -10
  58. package/dist/components/layout/index.js.map +7 -1
  59. package/dist/components/layout/index.mjs +2 -2
  60. package/dist/components/layout/index.mjs.map +7 -1
  61. package/dist/components/layout/xfooter/XFooter.d.ts +24 -0
  62. package/dist/components/layout/xfooter/index.d.ts +3 -0
  63. package/dist/components/layout/xseparator/XSeparator.d.ts +13 -0
  64. package/dist/components/layout/xseparator/index.d.ts +3 -0
  65. package/dist/components/layout/xzigzaglayout/XZigZagLayout.d.ts +12 -0
  66. package/dist/components/layout/xzigzaglayout/index.d.ts +3 -0
  67. package/dist/components/navigation/index.css +35 -35
  68. package/dist/components/navigation/index.css.map +7 -1
  69. package/dist/components/navigation/index.d.ts +2 -76
  70. package/dist/components/navigation/index.js +26 -6
  71. package/dist/components/navigation/index.js.map +7 -1
  72. package/dist/components/navigation/index.mjs +2 -2
  73. package/dist/components/navigation/index.mjs.map +7 -1
  74. package/dist/components/navigation/{index.d.mts → xnavbar/XNavbar.d.ts} +6 -10
  75. package/dist/components/navigation/xnavbar/index.d.ts +3 -0
  76. package/dist/components/social/index.css +22 -22
  77. package/dist/components/social/index.css.map +7 -1
  78. package/dist/components/social/index.d.ts +2 -55
  79. package/dist/components/social/index.js +14 -13
  80. package/dist/components/social/index.js.map +7 -1
  81. package/dist/components/social/index.mjs +2 -2
  82. package/dist/components/social/index.mjs.map +7 -1
  83. package/dist/components/social/xsocialcontact/XSocialContact.d.ts +30 -0
  84. package/dist/components/social/xsocialcontact/XSocialIcons.d.ts +21 -0
  85. package/dist/components/social/xsocialcontact/index.d.ts +5 -0
  86. package/dist/index.css +215 -215
  87. package/dist/index.css.map +7 -1
  88. package/dist/index.d.ts +1 -8
  89. package/dist/index.js +149 -34
  90. package/dist/index.js.map +7 -1
  91. package/dist/index.mjs +12 -12
  92. package/dist/index.mjs.map +7 -1
  93. package/package.json +6 -4
  94. package/dist/chunk-2OAXRRVQ.mjs.map +0 -1
  95. package/dist/chunk-42XPBYTL.mjs.map +0 -1
  96. package/dist/chunk-5G4P2E76.mjs.map +0 -1
  97. package/dist/chunk-NY22GB3E.mjs.map +0 -1
  98. package/dist/chunk-QCMWPIG7.mjs.map +0 -1
  99. package/dist/chunk-U27ZVCP7.mjs.map +0 -1
  100. package/dist/components/content/index.d.mts +0 -17
  101. package/dist/components/forms/index.d.mts +0 -68
  102. package/dist/components/gallery/index.d.mts +0 -29
  103. package/dist/components/index.d.mts +0 -8
  104. package/dist/components/layout/index.d.mts +0 -55
  105. package/dist/components/social/index.d.mts +0 -55
  106. package/dist/index.d.mts +0 -8
@@ -1,23 +1,23 @@
1
1
  import "../chunk-FZRTAML3.mjs";
2
- import {
3
- XInteractivePhrase
4
- } from "../chunk-5G4P2E76.mjs";
5
2
  import {
6
3
  XContactForm,
7
4
  XNewsletter
8
- } from "../chunk-QCMWPIG7.mjs";
5
+ } from "../chunk-TKT37LIX.mjs";
9
6
  import {
10
- XMicroGalleryText_default,
11
- XStaticGallery
12
- } from "../chunk-2OAXRRVQ.mjs";
7
+ XNavbar
8
+ } from "../chunk-TG3B4GAW.mjs";
13
9
  import {
14
10
  XFooter,
15
11
  XSeparator,
16
12
  XZigZagLayout
17
- } from "../chunk-42XPBYTL.mjs";
13
+ } from "../chunk-UROP4J6G.mjs";
18
14
  import {
19
- XNavbar
20
- } from "../chunk-NY22GB3E.mjs";
15
+ XInteractivePhrase
16
+ } from "../chunk-34NJCJUI.mjs";
17
+ import {
18
+ XMicroGalleryText_default,
19
+ XStaticGallery
20
+ } from "../chunk-MYFPSHSQ.mjs";
21
21
  import {
22
22
  XEmailIcon,
23
23
  XGitHubIcon,
@@ -27,7 +27,7 @@ import {
27
27
  XTelegramIcon,
28
28
  XTwitterIcon,
29
29
  XWhatsappIcon
30
- } from "../chunk-U27ZVCP7.mjs";
30
+ } from "../chunk-2H7TVDE7.mjs";
31
31
  export {
32
32
  XContactForm,
33
33
  XEmailIcon,
@@ -47,4 +47,4 @@ export {
47
47
  XWhatsappIcon,
48
48
  XZigZagLayout
49
49
  };
50
- //# sourceMappingURL=index.mjs.map
50
+ //# sourceMappingURL=index.mjs.map
@@ -1 +1,7 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -1,11 +1,11 @@
1
1
  /* src/components/layout/xfooter/XFooter.module.css */
2
- .XFooter {
2
+ .XFooter_XFooter3 {
3
3
  width: 100%;
4
4
  background-color: var(--xf-bg, transparent);
5
5
  color: var(--xf-text, #333);
6
6
  padding: var(--xf-py, 0.9rem) 0.6rem;
7
7
  }
8
- .container {
8
+ .XFooter_container3 {
9
9
  max-width: 1280px;
10
10
  margin: 0 auto;
11
11
  display: flex;
@@ -13,7 +13,7 @@
13
13
  align-items: center;
14
14
  gap: 0.6rem;
15
15
  }
16
- .nav {
16
+ .XFooter_nav3 {
17
17
  display: grid;
18
18
  gap: 0.5rem 1.5rem;
19
19
  grid-template-columns: repeat(var(--xf-cols, 1), minmax(0, auto));
@@ -21,23 +21,23 @@
21
21
  text-align: center;
22
22
  width: 100%;
23
23
  }
24
- .navVertical {
24
+ .XFooter_navVertical3 {
25
25
  display: flex;
26
26
  flex-direction: column;
27
27
  align-items: center;
28
28
  gap: 0.75rem;
29
29
  }
30
- .link {
30
+ .XFooter_link3 {
31
31
  color: var(--xf-accent, inherit);
32
32
  text-decoration: none;
33
33
  font-size: 0.9rem;
34
34
  transition: opacity 0.2s;
35
35
  white-space: nowrap;
36
36
  }
37
- .link:hover {
37
+ .XFooter_link3:hover {
38
38
  opacity: 0.7;
39
39
  }
40
- .copyright {
40
+ .XFooter_copyright3 {
41
41
  font-size: 0.75rem;
42
42
  opacity: 0.6;
43
43
  width: 100%;
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
  /* src/components/layout/xseparator/XSeparator.module.css */
48
- .separatorContainer {
48
+ .XSeparator_separatorContainer3 {
49
49
  position: relative;
50
50
  display: flex;
51
51
  align-items: center;
@@ -54,7 +54,7 @@
54
54
  --x-color: var(--separator-color);
55
55
  --x-bg: white;
56
56
  }
57
- .iconWrapper {
57
+ .XSeparator_iconWrapper3 {
58
58
  position: absolute;
59
59
  left: 50%;
60
60
  top: 50%;
@@ -68,22 +68,22 @@
68
68
  line-height: 1;
69
69
  user-select: none;
70
70
  }
71
- .separator {
71
+ .XSeparator_separator3 {
72
72
  --separator-color: #e2e8f0;
73
73
  --separator-thickness: 1px;
74
74
  --separator-margin: 1rem;
75
75
  border: 0;
76
76
  background-color: var(--separator-color);
77
77
  }
78
- .dashed {
78
+ .XSeparator_dashed3 {
79
79
  background-color: transparent !important;
80
80
  border-bottom: var(--separator-thickness) dashed var(--separator-color);
81
81
  }
82
- .dotted {
82
+ .XSeparator_dotted3 {
83
83
  background-color: transparent !important;
84
84
  border-bottom: var(--separator-thickness) dotted var(--separator-color);
85
85
  }
86
- .faded {
86
+ .XSeparator_faded3 {
87
87
  mask-image:
88
88
  linear-gradient(
89
89
  to right,
@@ -92,7 +92,7 @@
92
92
  black 80%,
93
93
  transparent);
94
94
  }
95
- .vertical.faded {
95
+ .XSeparator_vertical3.XSeparator_faded3 {
96
96
  mask-image:
97
97
  linear-gradient(
98
98
  to bottom,
@@ -101,12 +101,12 @@
101
101
  black 80%,
102
102
  transparent);
103
103
  }
104
- .horizontal {
104
+ .XSeparator_horizontal3 {
105
105
  width: 100%;
106
106
  height: var(--separator-thickness);
107
107
  margin: var(--separator-margin) 0;
108
108
  }
109
- .vertical {
109
+ .XSeparator_vertical3 {
110
110
  width: var(--separator-thickness);
111
111
  height: 100%;
112
112
  display: inline-block;
@@ -115,7 +115,7 @@
115
115
  }
116
116
 
117
117
  /* src/components/layout/xzigzaglayout/XZigZagLayout.module.css */
118
- .layout {
118
+ .XZigZagLayout_layout3 {
119
119
  width: min(100%, 72rem);
120
120
  margin: 0 auto;
121
121
  display: flex;
@@ -124,7 +124,7 @@
124
124
  padding-inline: clamp(0.5rem, 2vw, 1rem);
125
125
  position: relative;
126
126
  }
127
- .svgLine {
127
+ .XZigZagLayout_svgLine3 {
128
128
  position: absolute;
129
129
  top: 0;
130
130
  left: 0;
@@ -133,36 +133,36 @@
133
133
  pointer-events: none;
134
134
  z-index: 0;
135
135
  }
136
- .item {
136
+ .XZigZagLayout_item3 {
137
137
  width: 100%;
138
138
  display: grid;
139
139
  grid-template-columns: repeat(12, minmax(0, 1fr));
140
140
  }
141
- .item > * {
141
+ .XZigZagLayout_item3 > * {
142
142
  width: 100%;
143
143
  text-align: inherit;
144
144
  }
145
- .contentWrapper {
145
+ .XZigZagLayout_contentWrapper3 {
146
146
  width: 100%;
147
147
  }
148
- .textLeft > * {
148
+ .XZigZagLayout_textLeft3 > * {
149
149
  text-align: left;
150
150
  }
151
- .textRight > * {
151
+ .XZigZagLayout_textRight3 > * {
152
152
  text-align: right;
153
153
  }
154
- .left > * {
154
+ .XZigZagLayout_left3 > * {
155
155
  grid-column: 2 / 8;
156
156
  }
157
- .right > * {
157
+ .XZigZagLayout_right3 > * {
158
158
  grid-column: 6 / 12;
159
159
  }
160
160
  @media (max-width: 768px) {
161
- .left > * {
161
+ .XZigZagLayout_left3 > * {
162
162
  grid-column: 1 / 11;
163
163
  }
164
- .right > * {
164
+ .XZigZagLayout_right3 > * {
165
165
  grid-column: 3 / 13;
166
166
  }
167
167
  }
168
- /*# sourceMappingURL=index.css.map */
168
+ /*# sourceMappingURL=index.css.map */
@@ -1 +1,7 @@
1
- {"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íneas */\n}\n\n.link:hover {\n opacity: 0.7;\n}\n\n/* El copyright siempre irá 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ámico */\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ínea */\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ás 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":[]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/components/layout/xfooter/XFooter.module.css", "../../../src/components/layout/xseparator/XSeparator.module.css", "../../../src/components/layout/xzigzaglayout/XZigZagLayout.module.css"],
4
+ "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}"],
5
+ "mappings": "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",
6
+ "names": ["XFooter", "container", "nav", "navVertical", "link", "copyright", "separatorContainer", "iconWrapper", "separator", "dashed", "dotted", "faded", "vertical", "horizontal", "layout", "svgLine", "item", "contentWrapper", "textLeft", "textRight", "left", "right"]
7
+ }
@@ -1,55 +1,6 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import React, { HTMLAttributes } from 'react';
3
-
4
- type XFooterLink = {
5
- label: string;
6
- href: string;
7
- };
8
- type CopyrightConfig = {
9
- text?: string;
10
- showYear?: boolean;
11
- customYear?: number | string;
12
- yearFirst?: boolean;
13
- };
14
- type XFooterProps = {
15
- links: XFooterLink[];
16
- copyright?: CopyrightConfig;
17
- layout?: "horizontal" | "vertical";
18
- columns?: 1 | 2 | 3 | 4;
19
- colors?: {
20
- bg?: string;
21
- text?: string;
22
- accent?: string;
23
- border?: string;
24
- };
25
- className?: string;
26
- };
27
- declare function XFooter({ links, copyright, layout, columns, colors, className, }: XFooterProps): react_jsx_runtime.JSX.Element;
28
-
29
- interface XSeparatorProps {
30
- orientation?: 'horizontal' | 'vertical';
31
- variant?: 'solid' | 'dashed' | 'dotted';
32
- isFaded?: boolean;
33
- hasX?: boolean;
34
- xColor?: string;
35
- xBg?: string;
36
- thickness?: string;
37
- color?: string;
38
- gap?: string;
39
- className?: string;
40
- }
41
- declare function XSeparator({ orientation, variant, isFaded, hasX, xColor, xBg, thickness, color, gap, className }: XSeparatorProps): react_jsx_runtime.JSX.Element;
42
-
43
- type XZigZagLayoutProps = HTMLAttributes<HTMLDivElement> & {
44
- children: React.ReactNode;
45
- startSide?: "left" | "right";
46
- gap?: number | string;
47
- offset?: number | string;
48
- textAlign?: "inherit" | "side" | "left" | "right";
49
- showLine?: boolean;
50
- lineColor?: string;
51
- lineThickness?: number | string;
52
- };
53
- declare function XZigZagLayout({ children, className, style, startSide, gap, offset, textAlign, showLine, lineColor, lineThickness, ...rest }: XZigZagLayoutProps): react_jsx_runtime.JSX.Element;
54
-
55
- export { type CopyrightConfig, XFooter, type XFooterLink, type XFooterProps, XSeparator, type XSeparatorProps, XZigZagLayout, type XZigZagLayoutProps };
1
+ export { XFooter } from "./xfooter";
2
+ export { XSeparator } from "./xseparator";
3
+ export { XZigZagLayout } from "./xzigzaglayout";
4
+ export type { XFooterProps, XFooterLink, CopyrightConfig } from "./xfooter";
5
+ export type { XSeparatorProps } from "./xseparator";
6
+ export type { XZigZagLayoutProps } from "./xzigzaglayout";
@@ -40,7 +40,14 @@ module.exports = __toCommonJS(layout_exports);
40
40
  var import_link = __toESM(require("next/link"));
41
41
 
42
42
  // src/components/layout/xfooter/XFooter.module.css
43
- var XFooter_default = {};
43
+ var XFooter_default = {
44
+ XFooter: "XFooter_XFooter3",
45
+ container: "XFooter_container3",
46
+ nav: "XFooter_nav3",
47
+ navVertical: "XFooter_navVertical3",
48
+ link: "XFooter_link3",
49
+ copyright: "XFooter_copyright3"
50
+ };
44
51
 
45
52
  // src/components/layout/xfooter/XFooter.tsx
46
53
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -71,7 +78,16 @@ function XFooter({
71
78
  }
72
79
 
73
80
  // src/components/layout/xseparator/XSeparator.module.css
74
- var XSeparator_default = {};
81
+ var XSeparator_default = {
82
+ separatorContainer: "XSeparator_separatorContainer3",
83
+ iconWrapper: "XSeparator_iconWrapper3",
84
+ separator: "XSeparator_separator3",
85
+ dashed: "XSeparator_dashed3",
86
+ dotted: "XSeparator_dotted3",
87
+ faded: "XSeparator_faded3",
88
+ vertical: "XSeparator_vertical3",
89
+ horizontal: "XSeparator_horizontal3"
90
+ };
75
91
 
76
92
  // src/components/layout/xseparator/XSeparator.tsx
77
93
  var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -113,7 +129,16 @@ function XSeparator({
113
129
  var import_react = require("react");
114
130
 
115
131
  // src/components/layout/xzigzaglayout/XZigZagLayout.module.css
116
- var XZigZagLayout_default = {};
132
+ var XZigZagLayout_default = {
133
+ layout: "XZigZagLayout_layout3",
134
+ svgLine: "XZigZagLayout_svgLine3",
135
+ item: "XZigZagLayout_item3",
136
+ contentWrapper: "XZigZagLayout_contentWrapper3",
137
+ textLeft: "XZigZagLayout_textLeft3",
138
+ textRight: "XZigZagLayout_textRight3",
139
+ left: "XZigZagLayout_left3",
140
+ right: "XZigZagLayout_right3"
141
+ };
117
142
 
118
143
  // src/components/layout/xzigzaglayout/XZigZagLayout.tsx
119
144
  var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -215,10 +240,4 @@ function XZigZagLayout({
215
240
  }
216
241
  );
217
242
  }
218
- // Annotate the CommonJS export names for ESM import in node:
219
- 0 && (module.exports = {
220
- XFooter,
221
- XSeparator,
222
- XZigZagLayout
223
- });
224
- //# sourceMappingURL=index.js.map
243
+ //# sourceMappingURL=index.js.map
@@ -1 +1,7 @@
1
- {"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 © {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íneas */\n}\n\n.link:hover {\n opacity: 0.7;\n}\n\n/* El copyright siempre irá 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ámico */\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ás 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ínea\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 ✕\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ónde 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ínea */\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ás 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":["Link","import_jsx_runtime","import_jsx_runtime"]}
1
+ {
2
+ "version": 3,
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"],
4
+ "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}"],
5
+ "mappings": "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",
6
+ "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"]
7
+ }
@@ -2,10 +2,10 @@ import {
2
2
  XFooter,
3
3
  XSeparator,
4
4
  XZigZagLayout
5
- } from "../../chunk-42XPBYTL.mjs";
5
+ } from "../../chunk-UROP4J6G.mjs";
6
6
  export {
7
7
  XFooter,
8
8
  XSeparator,
9
9
  XZigZagLayout
10
10
  };
11
- //# sourceMappingURL=index.mjs.map
11
+ //# sourceMappingURL=index.mjs.map
@@ -1 +1,7 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }
@@ -0,0 +1,24 @@
1
+ export type XFooterLink = {
2
+ label: string;
3
+ href: string;
4
+ };
5
+ export type CopyrightConfig = {
6
+ text?: string;
7
+ showYear?: boolean;
8
+ customYear?: number | string;
9
+ yearFirst?: boolean;
10
+ };
11
+ export type XFooterProps = {
12
+ links: XFooterLink[];
13
+ copyright?: CopyrightConfig;
14
+ layout?: "horizontal" | "vertical";
15
+ columns?: 1 | 2 | 3 | 4;
16
+ colors?: {
17
+ bg?: string;
18
+ text?: string;
19
+ accent?: string;
20
+ border?: string;
21
+ };
22
+ className?: string;
23
+ };
24
+ export default function XFooter({ links, copyright, layout, columns, colors, className, }: XFooterProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,3 @@
1
+ export { default as XFooter } from "./XFooter";
2
+ export { default } from "./XFooter";
3
+ export type { XFooterProps, XFooterLink, CopyrightConfig } from "./XFooter";
@@ -0,0 +1,13 @@
1
+ export interface XSeparatorProps {
2
+ orientation?: 'horizontal' | 'vertical';
3
+ variant?: 'solid' | 'dashed' | 'dotted';
4
+ isFaded?: boolean;
5
+ hasX?: boolean;
6
+ xColor?: string;
7
+ xBg?: string;
8
+ thickness?: string;
9
+ color?: string;
10
+ gap?: string;
11
+ className?: string;
12
+ }
13
+ export default function XSeparator({ orientation, variant, isFaded, hasX, xColor, xBg, thickness, color, gap, className }: XSeparatorProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,3 @@
1
+ export { default as XSeparator } from "./XSeparator";
2
+ export { default } from "./XSeparator";
3
+ export type { XSeparatorProps } from "./XSeparator";
@@ -0,0 +1,12 @@
1
+ import React, { HTMLAttributes } from "react";
2
+ export type XZigZagLayoutProps = HTMLAttributes<HTMLDivElement> & {
3
+ children: React.ReactNode;
4
+ startSide?: "left" | "right";
5
+ gap?: number | string;
6
+ offset?: number | string;
7
+ textAlign?: "inherit" | "side" | "left" | "right";
8
+ showLine?: boolean;
9
+ lineColor?: string;
10
+ lineThickness?: number | string;
11
+ };
12
+ export default function XZigZagLayout({ children, className, style, startSide, gap, offset, textAlign, showLine, lineColor, lineThickness, ...rest }: XZigZagLayoutProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,3 @@
1
+ export { default as XZigZagLayout } from "./XZigZagLayout";
2
+ export { default } from "./XZigZagLayout";
3
+ export type { XZigZagLayoutProps } from "./XZigZagLayout";