@xscriptor/xcomponents 0.1.0 → 0.1.1

package/dist/chunk-UROP4J6G.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../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": ["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", "separatorContainer", "iconWrapper", "separator", "dashed", "dotted", "faded", "vertical", "horizontal", "jsx", "jsxs", "layout", "svgLine", "item", "contentWrapper", "textLeft", "textRight", "left", "right", "jsx", "jsxs"]
+}

package/dist/components/content/index.css

@@ -1,81 +1,81 @@
 /* src/components/content/xinteractivephrase/XInteractivePhrase.module.css */
-.container {
+.XInteractivePhrase_container3 {
   padding: 1rem 0;
   color: var(--text, #000);
   width: 100%;
 }
-.title {
+.XInteractivePhrase_title3 {
   margin: 0;
   padding: 0;
   line-height: 1.3;
   font-weight: inherit;
   text-align: inherit;
 }
-h1.title {
+h1.XInteractivePhrase_title3 {
   font-size: clamp(2rem, 6vw, 2.2rem);
   font-weight: 800;
   margin: 0;
   padding: 0;
   text-align: inherit;
 }
-h2.title {
+h2.XInteractivePhrase_title3 {
   font-size: clamp(1.675rem, 4vw, 1.8rem);
   font-weight: 700;
   margin: 0;
   padding: 0;
   text-align: inherit;
 }
-h3.title {
+h3.XInteractivePhrase_title3 {
   font-size: clamp(1.4rem, 3vw, 1.95rem);
   font-weight: 700;
   margin: 0;
   padding: 0;
   text-align: inherit;
 }
-h4.title {
+h4.XInteractivePhrase_title3 {
   font-size: clamp(1.25rem, 3vw, 2rem);
   font-weight: 600;
   margin: 0;
   padding: 0;
   text-align: inherit;
 }
-h5.title {
+h5.XInteractivePhrase_title3 {
   font-size: clamp(1.125rem, 3vw, 1.5rem);
   font-weight: 600;
   margin: 0;
   padding: 0;
   text-align: inherit;
 }
-h6.title {
+h6.XInteractivePhrase_title3 {
   font-size: clamp(1rem, 2.5vw, 1.25rem);
   font-weight: 600;
   margin: 0;
   padding: 0;
   text-align: inherit;
 }
-p.title {
+p.XInteractivePhrase_title3 {
   font-size: 1rem;
   font-weight: 400;
   margin: 0;
   padding: 0;
   text-align: inherit;
 }
-.title strong {
+.XInteractivePhrase_title3 strong {
   font-weight: 900;
   color: var(--accent, #0070f3);
 }
-.title em {
+.XInteractivePhrase_title3 em {
   font-style: italic;
   font-family: serif;
 }
-.underlineEffect {
+.XInteractivePhrase_underlineEffect3 {
   position: relative;
   cursor: pointer;
   color: var(--accent, #0070f3);
   display: inline-block;
   transition: color 0.3s ease;
 }
-.underlineEffect::after {
+.XInteractivePhrase_underlineEffect3::after {
   content: "";
   position: absolute;
   bottom: -2px;
@@ -91,10 +91,10 @@ p.title {
       currentColor 4px);
   transition: opacity 0.3s ease;
 }
-.underlineEffect:hover::after {
+.XInteractivePhrase_underlineEffect3:hover::after {
   opacity: 0;
 }
-.buttonEffect {
+.XInteractivePhrase_buttonEffect3 {
   display: inline-block;
   padding: 0.1em 0.6em;
   border: 2px dashed currentColor;
@@ -103,30 +103,30 @@ p.title {
   color: var(--accent, #0070f3);
   transition: all 0.3s ease;
 }
-.buttonEffect:hover {
+.XInteractivePhrase_buttonEffect3:hover {
   background: currentColor;
   color: var(--bg, #fff);
 }
-.blurEffect {
+.XInteractivePhrase_blurEffect3 {
   display: inline-block;
   transition: filter 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
 }
-.isVisible {
+.XInteractivePhrase_isVisible3 {
   filter: blur(0);
   opacity: 1;
 }
-.isHidden {
+.XInteractivePhrase_isHidden3 {
   filter: blur(10px);
   opacity: 0.3;
   user-select: none;
 }
-.lineBreak {
+.XInteractivePhrase_lineBreak3 {
   display: block;
   height: 0.8rem;
 }
-.underlineEffect:focus-visible,
-.buttonEffect:focus-visible {
+.XInteractivePhrase_underlineEffect3:focus-visible,
+.XInteractivePhrase_buttonEffect3:focus-visible {
   outline: 2px solid var(--accent, #0070f3);
   outline-offset: 4px;
 }
-/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=index.css.map */

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

@@ -1 +1,7 @@
-{"version":3,"sources":["../../../src/components/content/xinteractivephrase/XInteractivePhrase.module.css"],"sourcesContent":[".container {\n  padding: 1rem 0;\n  color: var(--text, #000);\n  width: 100%;\n}\n\n.title {\n  margin: 0;\n  padding: 0;\n  line-height: 1.3;\n  font-weight: inherit;\n  text-align: inherit;\n}\n\n/* Escala tipográfica fluida */\nh1.title { font-size: clamp(2rem, 6vw, 2.2rem); font-weight: 800; margin: 0; padding: 0; text-align: inherit; }\nh2.title { font-size: clamp(1.675rem, 4vw, 1.8rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh3.title { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh4.title { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh5.title { font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh6.title { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\np.title  { font-size: 1rem; font-weight: 400; margin: 0; padding: 0; text-align: inherit; }\n\n/* Estilos para etiquetas de énfasis */\n.title strong {\n  font-weight: 900;\n  color: var(--accent, #0070f3);\n}\n\n.title em {\n  font-style: italic;\n  font-family: serif; /* Opcional: da un toque elegante a las itálicas */\n}\n\n/* Efectos */\n.underlineEffect {\n  position: relative;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  display: inline-block;\n  transition: color 0.3s ease;\n}\n\n.underlineEffect::after {\n  content: \"\";\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  height: 0.15em;\n  width: 100%;\n  background: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 2px,\n    currentColor 2px,\n    currentColor 4px\n  );\n  transition: opacity 0.3s ease;\n}\n\n.underlineEffect:hover::after {\n  opacity: 0;\n}\n\n.buttonEffect {\n  display: inline-block;\n  padding: 0.1em 0.6em;\n  border: 2px dashed currentColor;\n  border-radius: 9999px;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  transition: all 0.3s ease;\n}\n\n.buttonEffect:hover {\n  background: currentColor;\n  color: var(--bg, #fff);\n}\n\n.blurEffect {\n  display: inline-block;\n  transition: filter 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;\n}\n\n.isVisible {\n  filter: blur(0);\n  opacity: 1;\n}\n\n.isHidden {\n  filter: blur(10px);\n  opacity: 0.3;\n  user-select: none;\n}\n\n.lineBreak {\n  display: block;\n  height: 0.8rem;\n}\n\n.underlineEffect:focus-visible,\n.buttonEffect:focus-visible {\n  outline: 2px solid var(--accent, #0070f3);\n  outline-offset: 4px;\n}"],"mappings":";AAAA,CAAC;AACC,WAAS,KAAK;AACd,SAAO,IAAI,MAAM,EAAE;AACnB,SAAO;AACT;AAEA,CAAC;AACC,UAAQ;AACR,WAAS;AACT,eAAa;AACb,eAAa;AACb,cAAY;AACd;AAGA,EAAE,CATD;AASU,aAAW,MAAM,IAAI,EAAE,GAAG,EAAE;AAAS,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAC9G,EAAE,CAVD;AAUU,aAAW,MAAM,QAAQ,EAAE,GAAG,EAAE;AAAS,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAClH,EAAE,CAXD;AAWU,aAAW,MAAM,MAAM,EAAE,GAAG,EAAE;AAAU,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AACjH,EAAE,CAZD;AAYU,aAAW,MAAM,OAAO,EAAE,GAAG,EAAE;AAAO,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAC/G,EAAE,CAbD;AAaU,aAAW,MAAM,QAAQ,EAAE,GAAG,EAAE;AAAS,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAClH,EAAE,CAdD;AAcU,aAAW,MAAM,IAAI,EAAE,KAAK,EAAE;AAAU,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AACjH,CAAC,CAfA;AAeU,aAAW;AAAM,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAG1F,CAlBC,MAkBM;AACL,eAAa;AACb,SAAO,IAAI,QAAQ,EAAE;AACvB;AAEA,CAvBC,MAuBM;AACL,cAAY;AACZ,eAAa;AACf;AAGA,CAAC;AACC,YAAU;AACV,UAAQ;AACR,SAAO,IAAI,QAAQ,EAAE;AACrB,WAAS;AACT,cAAY,MAAM,KAAK;AACzB;AAEA,CARC,eAQe;AACd,WAAS;AACT,YAAU;AACV,UAAQ;AACR,QAAM;AACN,UAAQ;AACR,SAAO;AACP;AAAA,IAAY;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,YAAY,GAAG;AAAA,MACf,aAAa,GAAG;AAAA,MAChB,aAAa;AAEf,cAAY,QAAQ,KAAK;AAC3B;AAEA,CAzBC,eAyBe,MAAM;AACpB,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,WAAS,MAAM;AACf,UAAQ,IAAI,OAAO;AACnB,iBAAe;AACf,UAAQ;AACR,SAAO,IAAI,QAAQ,EAAE;AACrB,cAAY,IAAI,KAAK;AACvB;AAEA,CAVC,YAUY;AACX,cAAY;AACZ,SAAO,IAAI,IAAI,EAAE;AACnB;AAEA,CAAC;AACC,WAAS;AACT,cAAY,OAAO,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,KAAK;AACrE;AAEA,CAAC;AACC,UAAQ,KAAK;AACb,WAAS;AACX;AAEA,CAAC;AACC,UAAQ,KAAK;AACb,WAAS;AACT,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,UAAQ;AACV;AAEA,CAjEC,eAiEe;AAChB,CArCC,YAqCY;AACX,WAAS,IAAI,MAAM,IAAI,QAAQ,EAAE;AACjC,kBAAgB;AAClB;","names":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/content/xinteractivephrase/XInteractivePhrase.module.css"],
+  "sourcesContent": [".container {\n  padding: 1rem 0;\n  color: var(--text, #000);\n  width: 100%;\n}\n\n.title {\n  margin: 0;\n  padding: 0;\n  line-height: 1.3;\n  font-weight: inherit;\n  text-align: inherit;\n}\n\n/* Escala tipogr\u00E1fica fluida */\nh1.title { font-size: clamp(2rem, 6vw, 2.2rem); font-weight: 800; margin: 0; padding: 0; text-align: inherit; }\nh2.title { font-size: clamp(1.675rem, 4vw, 1.8rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh3.title { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh4.title { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh5.title { font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh6.title { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\np.title  { font-size: 1rem; font-weight: 400; margin: 0; padding: 0; text-align: inherit; }\n\n/* Estilos para etiquetas de \u00E9nfasis */\n.title strong {\n  font-weight: 900;\n  color: var(--accent, #0070f3);\n}\n\n.title em {\n  font-style: italic;\n  font-family: serif; /* Opcional: da un toque elegante a las it\u00E1licas */\n}\n\n/* Efectos */\n.underlineEffect {\n  position: relative;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  display: inline-block;\n  transition: color 0.3s ease;\n}\n\n.underlineEffect::after {\n  content: \"\";\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  height: 0.15em;\n  width: 100%;\n  background: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 2px,\n    currentColor 2px,\n    currentColor 4px\n  );\n  transition: opacity 0.3s ease;\n}\n\n.underlineEffect:hover::after {\n  opacity: 0;\n}\n\n.buttonEffect {\n  display: inline-block;\n  padding: 0.1em 0.6em;\n  border: 2px dashed currentColor;\n  border-radius: 9999px;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  transition: all 0.3s ease;\n}\n\n.buttonEffect:hover {\n  background: currentColor;\n  color: var(--bg, #fff);\n}\n\n.blurEffect {\n  display: inline-block;\n  transition: filter 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;\n}\n\n.isVisible {\n  filter: blur(0);\n  opacity: 1;\n}\n\n.isHidden {\n  filter: blur(10px);\n  opacity: 0.3;\n  user-select: none;\n}\n\n.lineBreak {\n  display: block;\n  height: 0.8rem;\n}\n\n.underlineEffect:focus-visible,\n.buttonEffect:focus-visible {\n  outline: 2px solid var(--accent, #0070f3);\n  outline-offset: 4px;\n}"],
+  "mappings": ";AAAA,CAACA;AACC,WAAS,KAAK;AACd,SAAO,IAAI,MAAM,EAAE;AACnB,SAAO;AACT;AAEA,CAACC;AACC,UAAQ;AACR,WAAS;AACT,eAAa;AACb,eAAa;AACb,cAAY;AACd;AAGA,EAAE,CATDA;AASU,aAAW,MAAM,IAAI,EAAE,GAAG,EAAE;AAAS,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAC9G,EAAE,CAVDA;AAUU,aAAW,MAAM,QAAQ,EAAE,GAAG,EAAE;AAAS,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAClH,EAAE,CAXDA;AAWU,aAAW,MAAM,MAAM,EAAE,GAAG,EAAE;AAAU,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AACjH,EAAE,CAZDA;AAYU,aAAW,MAAM,OAAO,EAAE,GAAG,EAAE;AAAO,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAC/G,EAAE,CAbDA;AAaU,aAAW,MAAM,QAAQ,EAAE,GAAG,EAAE;AAAS,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAClH,EAAE,CAdDA;AAcU,aAAW,MAAM,IAAI,EAAE,KAAK,EAAE;AAAU,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AACjH,CAAC,CAfAA;AAeU,aAAW;AAAM,eAAa;AAAK,UAAQ;AAAG,WAAS;AAAG,cAAY;AAAS;AAG1F,CAlBCA,0BAkBM;AACL,eAAa;AACb,SAAO,IAAI,QAAQ,EAAE;AACvB;AAEA,CAvBCA,0BAuBM;AACL,cAAY;AACZ,eAAa;AACf;AAGA,CAACC;AACC,YAAU;AACV,UAAQ;AACR,SAAO,IAAI,QAAQ,EAAE;AACrB,WAAS;AACT,cAAY,MAAM,KAAK;AACzB;AAEA,CARCA,mCAQe;AACd,WAAS;AACT,YAAU;AACV,UAAQ;AACR,QAAM;AACN,UAAQ;AACR,SAAO;AACP;AAAA,IAAY;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,YAAY,GAAG;AAAA,MACf,aAAa,GAAG;AAAA,MAChB,aAAa;AAEf,cAAY,QAAQ,KAAK;AAC3B;AAEA,CAzBCA,mCAyBe,MAAM;AACpB,WAAS;AACX;AAEA,CAACC;AACC,WAAS;AACT,WAAS,MAAM;AACf,UAAQ,IAAI,OAAO;AACnB,iBAAe;AACf,UAAQ;AACR,SAAO,IAAI,QAAQ,EAAE;AACrB,cAAY,IAAI,KAAK;AACvB;AAEA,CAVCA,gCAUY;AACX,cAAY;AACZ,SAAO,IAAI,IAAI,EAAE;AACnB;AAEA,CAACC;AACC,WAAS;AACT,cAAY,OAAO,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,KAAK;AACrE;AAEA,CAACC;AACC,UAAQ,KAAK;AACb,WAAS;AACX;AAEA,CAACC;AACC,UAAQ,KAAK;AACb,WAAS;AACT,eAAa;AACf;AAEA,CAACC;AACC,WAAS;AACT,UAAQ;AACV;AAEA,CAjECL,mCAiEe;AAChB,CArCCC,gCAqCY;AACX,WAAS,IAAI,MAAM,IAAI,QAAQ,EAAE;AACjC,kBAAgB;AAClB;",
+  "names": ["container", "title", "underlineEffect", "buttonEffect", "blurEffect", "isVisible", "isHidden", "lineBreak"]
+}

package/dist/components/content/index.d.ts

@@ -1,17 +1,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface WordConfig {
-    text: string;
-    type: "normal" | "underline" | "button" | "blur1" | "blur2";
-    breakAfter?: boolean;
-    italic?: boolean;
-    bold?: boolean;
-}
-interface XInteractivePhraseProps {
-    words: WordConfig[];
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
-    className?: string;
-}
-declare function XInteractivePhrase({ words, as: Tag, className }: XInteractivePhraseProps): react_jsx_runtime.JSX.Element;
-
-export { type WordConfig, XInteractivePhrase, type XInteractivePhraseProps };
+export { XInteractivePhrase } from "./xinteractivephrase";
+export type { XInteractivePhraseProps, WordConfig } from "./xinteractivephrase";

package/dist/components/content/index.js

@@ -38,7 +38,16 @@ module.exports = __toCommonJS(content_exports);
 var import_react = __toESM(require("react"));
 
 // src/components/content/xinteractivephrase/XInteractivePhrase.module.css
-var XInteractivePhrase_default = {};
+var XInteractivePhrase_default = {
+  container: "XInteractivePhrase_container3",
+  title: "XInteractivePhrase_title3",
+  underlineEffect: "XInteractivePhrase_underlineEffect3",
+  buttonEffect: "XInteractivePhrase_buttonEffect3",
+  blurEffect: "XInteractivePhrase_blurEffect3",
+  isVisible: "XInteractivePhrase_isVisible3",
+  isHidden: "XInteractivePhrase_isHidden3",
+  lineBreak: "XInteractivePhrase_lineBreak3"
+};
 
 // src/components/content/xinteractivephrase/XInteractivePhrase.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -95,8 +104,4 @@ function XInteractivePhrase({
     ] }, index);
   }) }) });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  XInteractivePhrase
-});
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"sources":["../../../src/components/content/index.ts","../../../src/components/content/xinteractivephrase/XInteractivePhrase.tsx","../../../src/components/content/xinteractivephrase/XInteractivePhrase.module.css"],"sourcesContent":["export { XInteractivePhrase } from \"./xinteractivephrase\";\nexport type { XInteractivePhraseProps, WordConfig } from \"./xinteractivephrase\";\n","\"use client\";\n\nimport React, { useState, KeyboardEvent } from \"react\";\nimport styles from \"./XInteractivePhrase.module.css\";\n\nexport interface WordConfig {\n  text: string;\n  // Solo comportamientos de interacción\n  type: \"normal\" | \"underline\" | \"button\" | \"blur1\" | \"blur2\"; \n  breakAfter?: boolean;\n  italic?: boolean; // Esto controla el <em>\n  bold?: boolean;   // Esto controla el <strong>\n}\n\nexport interface XInteractivePhraseProps {\n  words: WordConfig[];\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\";\n  className?: string;\n}\n\nexport default function XInteractivePhrase({ \n  words, \n  as: Tag = \"p\", \n  className = \"\" \n}: XInteractivePhraseProps) {\n  const [active1, setActive1] = useState<boolean>(false);\n  const [active2, setActive2] = useState<boolean>(false);\n\n  const handleAction = (type: \"underline\" | \"button\") => {\n    if (type === \"underline\") setActive1(!active1);\n    if (type === \"button\") setActive2(!active2);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLSpanElement>, type: \"underline\" | \"button\") => {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      handleAction(type);\n    }\n  };\n\n  return (\n    <div className={`${styles.container} ${className}`}>\n      <Tag className={styles.title}>\n        {words.map((word, index) => {\n          let dynamicClass = \"\";\n          let clickHandler: (() => void) | undefined = undefined;\n          let keyHandler: ((e: KeyboardEvent<HTMLSpanElement>) => void) | undefined = undefined;\n\n          // Gestión de lógica por tipo\n          if (word.type === \"underline\") {\n            dynamicClass = styles.underlineEffect;\n            clickHandler = () => handleAction(\"underline\");\n            keyHandler = (e) => onKeyDown(e, \"underline\");\n          } \n          else if (word.type === \"button\") {\n            dynamicClass = styles.buttonEffect;\n            clickHandler = () => handleAction(\"button\");\n            keyHandler = (e) => onKeyDown(e, \"button\");\n          } \n          else if (word.type === \"blur1\") {\n            dynamicClass = `${styles.blurEffect} ${active1 ? styles.isVisible : styles.isHidden}`;\n          } \n          else if (word.type === \"blur2\") {\n            dynamicClass = `${styles.blurEffect} ${active2 ? styles.isVisible : styles.isHidden}`;\n          }\n\n          // Renderizado del contenido con estilos combinables\n          let content: React.ReactNode = word.text;\n          if (word.italic) content = <em>{content}</em>;\n          if (word.bold) content = <strong>{content}</strong>;\n\n          return (\n            <React.Fragment key={index}>\n              <span\n                className={dynamicClass}\n                onClick={clickHandler}\n                onKeyDown={keyHandler}\n                role={clickHandler ? \"button\" : undefined}\n                tabIndex={clickHandler ? 0 : undefined}\n              >\n                {content}\n              </span>\n              {word.breakAfter ? <span className={styles.lineBreak} /> : \" \"}\n            </React.Fragment>\n          );\n        })}\n      </Tag>\n    </div>\n  );\n}",".container {\n  padding: 1rem 0;\n  color: var(--text, #000);\n  width: 100%;\n}\n\n.title {\n  margin: 0;\n  padding: 0;\n  line-height: 1.3;\n  font-weight: inherit;\n  text-align: inherit;\n}\n\n/* Escala tipográfica fluida */\nh1.title { font-size: clamp(2rem, 6vw, 2.2rem); font-weight: 800; margin: 0; padding: 0; text-align: inherit; }\nh2.title { font-size: clamp(1.675rem, 4vw, 1.8rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh3.title { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh4.title { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh5.title { font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh6.title { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\np.title  { font-size: 1rem; font-weight: 400; margin: 0; padding: 0; text-align: inherit; }\n\n/* Estilos para etiquetas de énfasis */\n.title strong {\n  font-weight: 900;\n  color: var(--accent, #0070f3);\n}\n\n.title em {\n  font-style: italic;\n  font-family: serif; /* Opcional: da un toque elegante a las itálicas */\n}\n\n/* Efectos */\n.underlineEffect {\n  position: relative;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  display: inline-block;\n  transition: color 0.3s ease;\n}\n\n.underlineEffect::after {\n  content: \"\";\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  height: 0.15em;\n  width: 100%;\n  background: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 2px,\n    currentColor 2px,\n    currentColor 4px\n  );\n  transition: opacity 0.3s ease;\n}\n\n.underlineEffect:hover::after {\n  opacity: 0;\n}\n\n.buttonEffect {\n  display: inline-block;\n  padding: 0.1em 0.6em;\n  border: 2px dashed currentColor;\n  border-radius: 9999px;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  transition: all 0.3s ease;\n}\n\n.buttonEffect:hover {\n  background: currentColor;\n  color: var(--bg, #fff);\n}\n\n.blurEffect {\n  display: inline-block;\n  transition: filter 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;\n}\n\n.isVisible {\n  filter: blur(0);\n  opacity: 1;\n}\n\n.isHidden {\n  filter: blur(10px);\n  opacity: 0.3;\n  user-select: none;\n}\n\n.lineBreak {\n  display: block;\n  height: 0.8rem;\n}\n\n.underlineEffect:focus-visible,\n.buttonEffect:focus-visible {\n  outline: 2px solid var(--accent, #0070f3);\n  outline-offset: 4px;\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA+C;;;ACF/C;;;ADoEqC;AAhDtB,SAAR,mBAAoC;AAAA,EACzC;AAAA,EACA,IAAI,MAAM;AAAA,EACV,YAAY;AACd,GAA4B;AAC1B,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAkB,KAAK;AACrD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAkB,KAAK;AAErD,QAAM,eAAe,CAAC,SAAiC;AACrD,QAAI,SAAS,YAAa,YAAW,CAAC,OAAO;AAC7C,QAAI,SAAS,SAAU,YAAW,CAAC,OAAO;AAAA,EAC5C;AAEA,QAAM,YAAY,CAAC,GAAmC,SAAiC;AACrF,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAW,GAAG,2BAAO,SAAS,IAAI,SAAS,IAC9C,sDAAC,OAAI,WAAW,2BAAO,OACpB,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,QAAI,eAAe;AACnB,QAAI,eAAyC;AAC7C,QAAI,aAAwE;AAG5E,QAAI,KAAK,SAAS,aAAa;AAC7B,qBAAe,2BAAO;AACtB,qBAAe,MAAM,aAAa,WAAW;AAC7C,mBAAa,CAAC,MAAM,UAAU,GAAG,WAAW;AAAA,IAC9C,WACS,KAAK,SAAS,UAAU;AAC/B,qBAAe,2BAAO;AACtB,qBAAe,MAAM,aAAa,QAAQ;AAC1C,mBAAa,CAAC,MAAM,UAAU,GAAG,QAAQ;AAAA,IAC3C,WACS,KAAK,SAAS,SAAS;AAC9B,qBAAe,GAAG,2BAAO,UAAU,IAAI,UAAU,2BAAO,YAAY,2BAAO,QAAQ;AAAA,IACrF,WACS,KAAK,SAAS,SAAS;AAC9B,qBAAe,GAAG,2BAAO,UAAU,IAAI,UAAU,2BAAO,YAAY,2BAAO,QAAQ;AAAA,IACrF;AAGA,QAAI,UAA2B,KAAK;AACpC,QAAI,KAAK,OAAQ,WAAU,4CAAC,QAAI,mBAAQ;AACxC,QAAI,KAAK,KAAM,WAAU,4CAAC,YAAQ,mBAAQ;AAE1C,WACE,6CAAC,aAAAA,QAAM,UAAN,EACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,SAAS;AAAA,UACT,WAAW;AAAA,UACX,MAAM,eAAe,WAAW;AAAA,UAChC,UAAU,eAAe,IAAI;AAAA,UAE5B;AAAA;AAAA,MACH;AAAA,MACC,KAAK,aAAa,4CAAC,UAAK,WAAW,2BAAO,WAAW,IAAK;AAAA,SAVxC,KAWrB;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":["React"]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/content/index.ts", "../../../src/components/content/xinteractivephrase/XInteractivePhrase.tsx", "../../../src/components/content/xinteractivephrase/XInteractivePhrase.module.css"],
+  "sourcesContent": ["export { XInteractivePhrase } from \"./xinteractivephrase\";\nexport type { XInteractivePhraseProps, WordConfig } from \"./xinteractivephrase\";\n", "\"use client\";\n\nimport React, { useState, KeyboardEvent } from \"react\";\nimport styles from \"./XInteractivePhrase.module.css\";\n\nexport interface WordConfig {\n  text: string;\n  // Solo comportamientos de interacci\u00F3n\n  type: \"normal\" | \"underline\" | \"button\" | \"blur1\" | \"blur2\"; \n  breakAfter?: boolean;\n  italic?: boolean; // Esto controla el <em>\n  bold?: boolean;   // Esto controla el <strong>\n}\n\nexport interface XInteractivePhraseProps {\n  words: WordConfig[];\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\";\n  className?: string;\n}\n\nexport default function XInteractivePhrase({ \n  words, \n  as: Tag = \"p\", \n  className = \"\" \n}: XInteractivePhraseProps) {\n  const [active1, setActive1] = useState<boolean>(false);\n  const [active2, setActive2] = useState<boolean>(false);\n\n  const handleAction = (type: \"underline\" | \"button\") => {\n    if (type === \"underline\") setActive1(!active1);\n    if (type === \"button\") setActive2(!active2);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLSpanElement>, type: \"underline\" | \"button\") => {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      handleAction(type);\n    }\n  };\n\n  return (\n    <div className={`${styles.container} ${className}`}>\n      <Tag className={styles.title}>\n        {words.map((word, index) => {\n          let dynamicClass = \"\";\n          let clickHandler: (() => void) | undefined = undefined;\n          let keyHandler: ((e: KeyboardEvent<HTMLSpanElement>) => void) | undefined = undefined;\n\n          // Gesti\u00F3n de l\u00F3gica por tipo\n          if (word.type === \"underline\") {\n            dynamicClass = styles.underlineEffect;\n            clickHandler = () => handleAction(\"underline\");\n            keyHandler = (e) => onKeyDown(e, \"underline\");\n          } \n          else if (word.type === \"button\") {\n            dynamicClass = styles.buttonEffect;\n            clickHandler = () => handleAction(\"button\");\n            keyHandler = (e) => onKeyDown(e, \"button\");\n          } \n          else if (word.type === \"blur1\") {\n            dynamicClass = `${styles.blurEffect} ${active1 ? styles.isVisible : styles.isHidden}`;\n          } \n          else if (word.type === \"blur2\") {\n            dynamicClass = `${styles.blurEffect} ${active2 ? styles.isVisible : styles.isHidden}`;\n          }\n\n          // Renderizado del contenido con estilos combinables\n          let content: React.ReactNode = word.text;\n          if (word.italic) content = <em>{content}</em>;\n          if (word.bold) content = <strong>{content}</strong>;\n\n          return (\n            <React.Fragment key={index}>\n              <span\n                className={dynamicClass}\n                onClick={clickHandler}\n                onKeyDown={keyHandler}\n                role={clickHandler ? \"button\" : undefined}\n                tabIndex={clickHandler ? 0 : undefined}\n              >\n                {content}\n              </span>\n              {word.breakAfter ? <span className={styles.lineBreak} /> : \" \"}\n            </React.Fragment>\n          );\n        })}\n      </Tag>\n    </div>\n  );\n}", ".container {\n  padding: 1rem 0;\n  color: var(--text, #000);\n  width: 100%;\n}\n\n.title {\n  margin: 0;\n  padding: 0;\n  line-height: 1.3;\n  font-weight: inherit;\n  text-align: inherit;\n}\n\n/* Escala tipogr\u00E1fica fluida */\nh1.title { font-size: clamp(2rem, 6vw, 2.2rem); font-weight: 800; margin: 0; padding: 0; text-align: inherit; }\nh2.title { font-size: clamp(1.675rem, 4vw, 1.8rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh3.title { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 700; margin: 0; padding: 0; text-align: inherit; }\nh4.title { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh5.title { font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\nh6.title { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 600; margin: 0; padding: 0; text-align: inherit; }\np.title  { font-size: 1rem; font-weight: 400; margin: 0; padding: 0; text-align: inherit; }\n\n/* Estilos para etiquetas de \u00E9nfasis */\n.title strong {\n  font-weight: 900;\n  color: var(--accent, #0070f3);\n}\n\n.title em {\n  font-style: italic;\n  font-family: serif; /* Opcional: da un toque elegante a las it\u00E1licas */\n}\n\n/* Efectos */\n.underlineEffect {\n  position: relative;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  display: inline-block;\n  transition: color 0.3s ease;\n}\n\n.underlineEffect::after {\n  content: \"\";\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  height: 0.15em;\n  width: 100%;\n  background: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 2px,\n    currentColor 2px,\n    currentColor 4px\n  );\n  transition: opacity 0.3s ease;\n}\n\n.underlineEffect:hover::after {\n  opacity: 0;\n}\n\n.buttonEffect {\n  display: inline-block;\n  padding: 0.1em 0.6em;\n  border: 2px dashed currentColor;\n  border-radius: 9999px;\n  cursor: pointer;\n  color: var(--accent, #0070f3);\n  transition: all 0.3s ease;\n}\n\n.buttonEffect:hover {\n  background: currentColor;\n  color: var(--bg, #fff);\n}\n\n.blurEffect {\n  display: inline-block;\n  transition: filter 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;\n}\n\n.isVisible {\n  filter: blur(0);\n  opacity: 1;\n}\n\n.isHidden {\n  filter: blur(10px);\n  opacity: 0.3;\n  user-select: none;\n}\n\n.lineBreak {\n  display: block;\n  height: 0.8rem;\n}\n\n.underlineEffect:focus-visible,\n.buttonEffect:focus-visible {\n  outline: 2px solid var(--accent, #0070f3);\n  outline-offset: 4px;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA+C;;;ACF/C;AAAA,EAAC,WAAAA;AAAA,EAMA,OAAAC;AAAA,EA6BA,iBAAAC;AAAA,EA6BA,cAAAC;AAAA,EAeA,YAAAC;AAAA,EAKA,WAAAC;AAAA,EAKA,UAAAC;AAAA,EAMA,WAAAC;AAAA;;;AD3BoC;AAhDtB,SAAR,mBAAoC;AAAA,EACzC;AAAA,EACA,IAAI,MAAM;AAAA,EACV,YAAY;AACd,GAA4B;AAC1B,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAkB,KAAK;AACrD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAkB,KAAK;AAErD,QAAM,eAAe,CAAC,SAAiC;AACrD,QAAI,SAAS,YAAa,YAAW,CAAC,OAAO;AAC7C,QAAI,SAAS,SAAU,YAAW,CAAC,OAAO;AAAA,EAC5C;AAEA,QAAM,YAAY,CAAC,GAAmC,SAAiC;AACrF,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAe;AACjB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,WAAW,GAAG,2BAAO,SAAS,IAAI,SAAS,IAC9C,sDAAC,OAAI,WAAW,2BAAO,OACpB,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,QAAI,eAAe;AACnB,QAAI,eAAyC;AAC7C,QAAI,aAAwE;AAG5E,QAAI,KAAK,SAAS,aAAa;AAC7B,qBAAe,2BAAO;AACtB,qBAAe,MAAM,aAAa,WAAW;AAC7C,mBAAa,CAAC,MAAM,UAAU,GAAG,WAAW;AAAA,IAC9C,WACS,KAAK,SAAS,UAAU;AAC/B,qBAAe,2BAAO;AACtB,qBAAe,MAAM,aAAa,QAAQ;AAC1C,mBAAa,CAAC,MAAM,UAAU,GAAG,QAAQ;AAAA,IAC3C,WACS,KAAK,SAAS,SAAS;AAC9B,qBAAe,GAAG,2BAAO,UAAU,IAAI,UAAU,2BAAO,YAAY,2BAAO,QAAQ;AAAA,IACrF,WACS,KAAK,SAAS,SAAS;AAC9B,qBAAe,GAAG,2BAAO,UAAU,IAAI,UAAU,2BAAO,YAAY,2BAAO,QAAQ;AAAA,IACrF;AAGA,QAAI,UAA2B,KAAK;AACpC,QAAI,KAAK,OAAQ,WAAU,4CAAC,QAAI,mBAAQ;AACxC,QAAI,KAAK,KAAM,WAAU,4CAAC,YAAQ,mBAAQ;AAE1C,WACE,6CAAC,aAAAC,QAAM,UAAN,EACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,SAAS;AAAA,UACT,WAAW;AAAA,UACX,MAAM,eAAe,WAAW;AAAA,UAChC,UAAU,eAAe,IAAI;AAAA,UAE5B;AAAA;AAAA,MACH;AAAA,MACC,KAAK,aAAa,4CAAC,UAAK,WAAW,2BAAO,WAAW,IAAK;AAAA,SAVxC,KAWrB;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;",
+  "names": ["container", "title", "underlineEffect", "buttonEffect", "blurEffect", "isVisible", "isHidden", "lineBreak", "React"]
+}

package/dist/components/content/index.mjs

@@ -1,7 +1,7 @@
 import {
   XInteractivePhrase
-} from "../../chunk-5G4P2E76.mjs";
+} from "../../chunk-34NJCJUI.mjs";
 export {
   XInteractivePhrase
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/components/content/index.mjs.map

@@ -1 +1,7 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/content/xinteractivephrase/XInteractivePhrase.d.ts

@@ -0,0 +1,13 @@
+export interface WordConfig {
+    text: string;
+    type: "normal" | "underline" | "button" | "blur1" | "blur2";
+    breakAfter?: boolean;
+    italic?: boolean;
+    bold?: boolean;
+}
+export interface XInteractivePhraseProps {
+    words: WordConfig[];
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+    className?: string;
+}
+export default function XInteractivePhrase({ words, as: Tag, className }: XInteractivePhraseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/content/xinteractivephrase/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XInteractivePhrase } from "./XInteractivePhrase";
+export { default } from "./XInteractivePhrase";
+export type { XInteractivePhraseProps, WordConfig } from "./XInteractivePhrase";

package/dist/components/forms/index.css

@@ -1,5 +1,5 @@
 /* src/components/forms/xcontactform/XContactForm.module.css */
-.wrapper {
+.XContactForm_wrapper3 {
   --input-padding: .65rem .9rem;
   --font-size: 16px;
   --form-gap: 1.25rem;
@@ -35,7 +35,7 @@
   border: var(--wrapper-border-width) var(--wrapper-border-style) var(--wrapper-border-color);
   border-radius: var(--wrapper-radius);
 }
-.small {
+.XContactForm_small3 {
   --input-padding: .35rem .55rem;
   --font-size: 13px;
   --form-gap: .75rem;
@@ -43,7 +43,7 @@
   --field-gap: .3rem;
   --button-min-width: 118px;
 }
-.medium {
+.XContactForm_medium3 {
   --input-padding: .5rem .7rem;
   --font-size: 15px;
   --form-gap: 1rem;
@@ -51,7 +51,7 @@
   --field-gap: .4rem;
   --button-min-width: 130px;
 }
-.large {
+.XContactForm_large3 {
   --input-padding: 1rem 1.2rem;
   --font-size: 18px;
   --form-gap: 1.5rem;
@@ -59,33 +59,33 @@
   --field-gap: .5rem;
   --button-min-width: 150px;
 }
-.form {
+.XContactForm_form3 {
   display: grid;
   gap: var(--form-gap);
   max-width: 100%;
 }
-.row {
+.XContactForm_row3 {
   display: grid;
   gap: var(--row-gap);
 }
-.grid .row {
+.XContactForm_grid3 .XContactForm_row3 {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
-.vertical .row {
+.XContactForm_vertical3 .XContactForm_row3 {
   grid-template-columns: 1fr;
 }
-.field {
+.XContactForm_field3 {
   display: flex;
   flex-direction: column;
   gap: var(--field-gap);
 }
-.field label {
+.XContactForm_field3 label {
   font-size: calc(var(--font-size) - 2px);
   font-weight: 500;
   color: var(--label-color);
 }
-.field input,
-.field textarea {
+.XContactForm_field3 input,
+.XContactForm_field3 textarea {
   width: 100%;
   padding: var(--input-padding);
   border: var(--field-border-width) var(--field-border-style) var(--field-border-color);
@@ -94,16 +94,16 @@
   box-sizing: border-box;
   font-family: inherit;
 }
-.field input::placeholder,
-.field textarea::placeholder {
+.XContactForm_field3 input::placeholder,
+.XContactForm_field3 textarea::placeholder {
   color: #888;
 }
-.buttoncontainer {
+.XContactForm_buttoncontainer3 {
   display: flex;
   justify-content: var(--btn-alignment);
   margin-top: 0.25rem;
 }
-.button {
+.XContactForm_button3 {
   padding: var(--input-padding);
   border-radius: var(--btn-radius);
   border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);
@@ -119,35 +119,35 @@
     border-color 0.2s ease,
     opacity 0.2s ease;
 }
-.button:hover {
+.XContactForm_button3:hover {
   background-color: var(--btn-hover-bg-color);
   color: var(--btn-hover-text-color);
   border-color: var(--btn-hover-border-color);
   opacity: 0.95;
 }
-.status {
+.XContactForm_status3 {
   min-height: 1.5rem;
   font-size: calc(var(--font-size) - 2px);
   margin-top: 0.25rem;
 }
-.statusOk {
+.XContactForm_statusOk3 {
   color: var(--status-ok-color);
 }
-.statusError {
+.XContactForm_statusError3 {
   color: var(--status-error-color);
 }
-.honeypot {
+.XContactForm_honeypot3 {
   position: absolute;
   left: -9999px;
   top: -9999px;
 }
-.withDecorativeX {
+.XContactForm_withDecorativeX3 {
   position: relative;
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
-.decorativeXTop,
-.decorativeXBottom {
+.XContactForm_decorativeXTop3,
+.XContactForm_decorativeXBottom3 {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -161,17 +161,17 @@
   line-height: 1;
   z-index: 1;
 }
-.decorativeXTop {
+.XContactForm_decorativeXTop3 {
   top: 0;
   transform: translate(-50%, -50%);
 }
-.decorativeXBottom {
+.XContactForm_decorativeXBottom3 {
   bottom: 0;
   transform: translate(-50%, 50%);
 }
 
 /* src/components/forms/xnewsletter/XNewsletter.module.css */
-.container {
+.XNewsletter_container3 {
   --nws-accent: var(--accent);
   --nws-text: var(--text);
   --nws-border: var(--border);
@@ -179,34 +179,34 @@
   width: 100%;
   font-family: "EB Garamond", serif;
 }
-.form {
+.XNewsletter_form3 {
   display: flex;
   gap: 1rem;
 }
-.horizontal {
+.XNewsletter_horizontal3 {
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 @media (min-width: 768px) {
-  .horizontal {
+  .XNewsletter_horizontal3 {
     flex-direction: row;
   }
 }
-.vertical {
+.XNewsletter_vertical3 {
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
   max-width: 24rem;
   margin: 0 auto;
 }
-.title {
+.XNewsletter_title3 {
   font-size: 0.875rem;
   white-space: nowrap;
   font-weight: 500;
   color: var(--nws-text);
 }
-.input {
+.XNewsletter_input3 {
   width: 100%;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
@@ -219,30 +219,30 @@
   caret-color: var(--nws-accent);
   font-family: inherit;
 }
-.horizontal .input {
+.XNewsletter_horizontal3 .XNewsletter_input3 {
 }
 @media (min-width: 768px) {
-  .horizontal .input {
+  .XNewsletter_horizontal3 .XNewsletter_input3 {
     width: 16rem;
   }
 }
-.input:focus {
+.XNewsletter_input3:focus {
   border-color: var(--nws-accent);
 }
-.actions {
+.XNewsletter_actions3 {
   display: flex;
   gap: 1rem;
 }
-.actionsHorizontal {
+.XNewsletter_actionsHorizontal3 {
   flex-direction: row;
   align-items: center;
 }
-.actionsVertical {
+.XNewsletter_actionsVertical3 {
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
 }
-.checkboxLabel {
+.XNewsletter_checkboxLabel3 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -251,25 +251,25 @@
   cursor: pointer;
   color: var(--nws-text);
 }
-.checkboxLabel span {
+.XNewsletter_checkboxLabel3 span {
   opacity: 0.7;
 }
-.checkbox {
+.XNewsletter_checkbox3 {
   height: 0.875rem;
   width: 0.875rem;
   border-radius: 0.125rem;
   cursor: pointer;
   accent-color: var(--nws-accent);
 }
-.termsLink {
+.XNewsletter_termsLink3 {
   text-decoration: underline;
   color: var(--nws-accent);
   transition: opacity 0.2s ease;
 }
-.termsLink:hover {
+.XNewsletter_termsLink3:hover {
   opacity: 1;
 }
-.button {
+.XNewsletter_button3 {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
@@ -280,28 +280,28 @@
   white-space: nowrap;
   cursor: pointer;
 }
-.button:hover:not(:disabled) {
+.XNewsletter_button3:hover:not(:disabled) {
   background-color: var(--nws-accent);
   color: var(--nws-btn-text);
 }
-.button:disabled,
-.input:disabled,
-.checkbox:disabled {
+.XNewsletter_button3:disabled,
+.XNewsletter_input3:disabled,
+.XNewsletter_checkbox3:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.actionsVertical .button {
+.XNewsletter_actionsVertical3 .XNewsletter_button3 {
   width: 100%;
 }
-.message {
+.XNewsletter_message3 {
   margin-top: 0.75rem;
   font-size: 0.75rem;
   color: var(--nws-accent);
 }
-.messageHorizontal {
+.XNewsletter_messageHorizontal3 {
   text-align: center;
 }
-.messageVertical {
+.XNewsletter_messageVertical3 {
   text-align: left;
 }
-/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=index.css.map */