@xscriptor/xcomponents 0.1.0

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

@@ -0,0 +1,55 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { HTMLAttributes } from 'react';
+
+type XFooterLink = {
+    label: string;
+    href: string;
+};
+type CopyrightConfig = {
+    text?: string;
+    showYear?: boolean;
+    customYear?: number | string;
+    yearFirst?: boolean;
+};
+type XFooterProps = {
+    links: XFooterLink[];
+    copyright?: CopyrightConfig;
+    layout?: "horizontal" | "vertical";
+    columns?: 1 | 2 | 3 | 4;
+    colors?: {
+        bg?: string;
+        text?: string;
+        accent?: string;
+        border?: string;
+    };
+    className?: string;
+};
+declare function XFooter({ links, copyright, layout, columns, colors, className, }: XFooterProps): react_jsx_runtime.JSX.Element;
+
+interface XSeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'solid' | 'dashed' | 'dotted';
+    isFaded?: boolean;
+    hasX?: boolean;
+    xColor?: string;
+    xBg?: string;
+    thickness?: string;
+    color?: string;
+    gap?: string;
+    className?: string;
+}
+declare function XSeparator({ orientation, variant, isFaded, hasX, xColor, xBg, thickness, color, gap, className }: XSeparatorProps): react_jsx_runtime.JSX.Element;
+
+type XZigZagLayoutProps = HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    startSide?: "left" | "right";
+    gap?: number | string;
+    offset?: number | string;
+    textAlign?: "inherit" | "side" | "left" | "right";
+    showLine?: boolean;
+    lineColor?: string;
+    lineThickness?: number | string;
+};
+declare function XZigZagLayout({ children, className, style, startSide, gap, offset, textAlign, showLine, lineColor, lineThickness, ...rest }: XZigZagLayoutProps): react_jsx_runtime.JSX.Element;
+
+export { type CopyrightConfig, XFooter, type XFooterLink, type XFooterProps, XSeparator, type XSeparatorProps, XZigZagLayout, type XZigZagLayoutProps };

package/dist/components/layout/index.js

@@ -0,0 +1,224 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/layout/index.ts
+var layout_exports = {};
+__export(layout_exports, {
+  XFooter: () => XFooter,
+  XSeparator: () => XSeparator,
+  XZigZagLayout: () => XZigZagLayout
+});
+module.exports = __toCommonJS(layout_exports);
+
+// src/components/layout/xfooter/XFooter.tsx
+var import_link = __toESM(require("next/link"));
+
+// src/components/layout/xfooter/XFooter.module.css
+var XFooter_default = {};
+
+// src/components/layout/xfooter/XFooter.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function XFooter({
+  links,
+  copyright,
+  layout = "horizontal",
+  columns = 1,
+  colors,
+  className = ""
+}) {
+  const customStyles = {
+    "--xf-bg": colors?.bg,
+    "--xf-text": colors?.text,
+    "--xf-accent": colors?.accent,
+    "--xf-border": colors?.border,
+    "--xf-cols": layout === "horizontal" ? columns : 1
+  };
+  const currentYear = copyright?.customYear || (/* @__PURE__ */ new Date()).getFullYear();
+  const copyLabel = copyright?.text || "Xscriptor";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("footer", { className: `${XFooter_default.XFooter} ${className}`, style: customStyles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XFooter_default.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: layout === "vertical" ? XFooter_default.navVertical : XFooter_default.nav, children: links.map((link, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: link.href, className: XFooter_default.link, children: link.label }, idx)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: XFooter_default.copyright, children: [
+      "\xA9 ",
+      copyright?.yearFirst ? `${currentYear} ${copyLabel}` : `${copyLabel} ${currentYear}`
+    ] })
+  ] }) });
+}
+
+// src/components/layout/xseparator/XSeparator.module.css
+var XSeparator_default = {};
+
+// src/components/layout/xseparator/XSeparator.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function XSeparator({
+  orientation = "horizontal",
+  variant = "solid",
+  isFaded = false,
+  hasX = false,
+  xColor,
+  xBg = "white",
+  thickness = "1px",
+  color = "#e2e8f0",
+  gap = "1rem",
+  className = ""
+}) {
+  const dynamicStyles = {
+    "--separator-color": color,
+    "--separator-thickness": thickness,
+    "--separator-margin": gap,
+    "--x-color": xColor || color,
+    // Si no se define xColor, usa el color de la línea
+    "--x-bg": xBg
+  };
+  const classes = [
+    XSeparator_default.separator,
+    orientation === "vertical" ? XSeparator_default.vertical : XSeparator_default.horizontal,
+    variant !== "solid" && XSeparator_default[variant],
+    isFaded && XSeparator_default.faded
+  ].filter(Boolean).join(" ");
+  const line = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", { className: classes, style: dynamicStyles });
+  if (!hasX) return line;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `${XSeparator_default.separatorContainer} ${className}`, style: dynamicStyles, children: [
+    line,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: XSeparator_default.iconWrapper, children: "\u2715" })
+  ] });
+}
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.tsx
+var import_react = require("react");
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.module.css
+var XZigZagLayout_default = {};
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function XZigZagLayout({
+  children,
+  className,
+  style,
+  startSide = "left",
+  gap,
+  offset,
+  textAlign = "inherit",
+  showLine = false,
+  lineColor = "#cccccc",
+  lineThickness = 2,
+  ...rest
+}) {
+  const items = import_react.Children.toArray(children).filter(Boolean);
+  const containerRef = (0, import_react.useRef)(null);
+  const itemsRef = (0, import_react.useRef)([]);
+  const pathRef = (0, import_react.useRef)(null);
+  const [points, setPoints] = (0, import_react.useState)([]);
+  const [pathLength, setPathLength] = (0, import_react.useState)(0);
+  const [drawProgress, setDrawProgress] = (0, import_react.useState)(0);
+  const calculatePoints = (0, import_react.useCallback)(() => {
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newPoints = itemsRef.current.filter(Boolean).map((el) => {
+      const rect = el.getBoundingClientRect();
+      return {
+        x: rect.left + rect.width / 2 - containerRect.left,
+        y: rect.top + rect.height / 2 - containerRect.top
+      };
+    });
+    if (newPoints.length > 0) {
+      newPoints.unshift({ x: newPoints[0].x, y: 0 });
+      newPoints.push({ x: newPoints[newPoints.length - 1].x, y: containerRect.height });
+    }
+    setPoints(newPoints);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!showLine || !containerRef.current) return;
+    const observer = new ResizeObserver(() => calculatePoints());
+    observer.observe(containerRef.current);
+    calculatePoints();
+    return () => observer.disconnect();
+  }, [showLine, calculatePoints]);
+  (0, import_react.useEffect)(() => {
+    if (pathRef.current) setPathLength(pathRef.current.getTotalLength());
+  }, [points]);
+  (0, import_react.useEffect)(() => {
+    if (!showLine) return;
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+      const { top, height } = containerRef.current.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const start = windowHeight / 2;
+      const progress = (start - top) / height;
+      setDrawProgress(Math.min(Math.max(progress, 0), 1));
+    };
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [showLine]);
+  const cssVars = {};
+  if (gap !== void 0) cssVars["--x-zigzag-gap"] = typeof gap === "number" ? `${gap}px` : gap;
+  if (offset !== void 0) cssVars["--x-zigzag-offset"] = typeof offset === "number" ? `${offset}px` : offset;
+  const mergedStyle = { ...style, ...cssVars };
+  const pathD = points.length > 0 ? `M ${points[0].x} ${points[0].y} ` + points.slice(1).map((p) => `L ${p.x} ${p.y}`).join(" ") : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      ...rest,
+      className: [XZigZagLayout_default.layout, className].filter(Boolean).join(" "),
+      style: mergedStyle,
+      children: [
+        showLine && points.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: XZigZagLayout_default.svgLine, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            ref: pathRef,
+            d: pathD,
+            fill: "none",
+            stroke: lineColor,
+            strokeWidth: lineThickness,
+            strokeDasharray: pathLength,
+            strokeDashoffset: pathLength - pathLength * drawProgress,
+            style: { transition: "stroke-dashoffset 0.1s ease-out" }
+          }
+        ) }),
+        items.map((child, index) => {
+          const isStartLeft = startSide === "left";
+          const alignLeft = isStartLeft ? index % 2 === 0 : index % 2 !== 0;
+          const alignmentClass = textAlign === "side" ? alignLeft ? XZigZagLayout_default.textLeft : XZigZagLayout_default.textRight : textAlign === "left" ? XZigZagLayout_default.textLeft : textAlign === "right" ? XZigZagLayout_default.textRight : "";
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${XZigZagLayout_default.item} ${alignLeft ? XZigZagLayout_default.left : XZigZagLayout_default.right} ${alignmentClass}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: (el) => {
+            itemsRef.current[index] = el;
+          }, className: XZigZagLayout_default.contentWrapper, children: child }) }, index);
+        })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  XFooter,
+  XSeparator,
+  XZigZagLayout
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

package/dist/components/layout/index.mjs

@@ -0,0 +1,11 @@
+import {
+  XFooter,
+  XSeparator,
+  XZigZagLayout
+} from "../../chunk-42XPBYTL.mjs";
+export {
+  XFooter,
+  XSeparator,
+  XZigZagLayout
+};
+//# sourceMappingURL=index.mjs.map

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

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

package/dist/components/navigation/index.css

@@ -0,0 +1,229 @@
+/* src/components/navigation/xnavbar/XNavbar.module.css */
+.header {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 3rem;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 1.25rem;
+  z-index: 60;
+}
+@media (min-width: 640px) {
+  .header {
+    padding-inline: 2rem;
+  }
+}
+@media (min-width: 768px) {
+  .header {
+    padding-inline: 3rem;
+  }
+}
+@media (min-width: 1024px) {
+  .header {
+    padding-inline: 5rem;
+  }
+}
+@media (min-width: 1280px) {
+  .header {
+    padding-inline: 12rem;
+  }
+}
+.desktopNav {
+  display: none;
+  align-items: center;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  padding-bottom: 0.5rem;
+}
+@media (min-width: 768px) {
+  .desktopNav {
+    display: grid;
+  }
+}
+.desktopLinksLeft,
+.desktopLinksRight {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  min-width: 0;
+}
+.desktopLinksLeft {
+  justify-content: flex-end;
+}
+.desktopLinksRight {
+  justify-content: flex-start;
+}
+.logoSlot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.logoWrapper {
+  position: relative;
+  margin-inline: 1rem;
+  display: flex;
+  align-items: center;
+}
+.logoBtn {
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1;
+  user-select: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text);
+  padding: 0;
+}
+.iconTray {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.iconTrayRight {
+  left: 100%;
+  padding-left: 0.75rem;
+}
+.iconTrayLeft {
+  right: 100%;
+  padding-right: 0.75rem;
+}
+.navLink {
+  padding: 0.25rem;
+  border-bottom: 2px solid transparent;
+  transition:
+    border-color 0.2s,
+    opacity 0.2s,
+    color 0.2s;
+  color: var(--xnav-link-color, var(--text));
+  text-decoration: none;
+  white-space: nowrap;
+}
+.navLink:hover {
+  color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));
+  opacity: var(--xnav-link-hover-opacity, 0.7);
+}
+.navLinkActive {
+  border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));
+  font-weight: 600;
+}
+.navLinkExternal::after {
+  content: " \2197";
+  font-size: 0.7em;
+  opacity: 0.6;
+}
+.mobileToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (min-width: 768px) {
+  .mobileToggle {
+    display: none;
+  }
+}
+.hamburgerBtn {
+  width: 2.5rem;
+  height: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  z-index: 80;
+  padding: 0;
+}
+.bar {
+  width: var(--xnav-bar-w, 2rem);
+  height: var(--xnav-bar-h, 3px);
+  background: var(--xnav-bar-color, var(--text));
+  border-radius: 2px;
+}
+.mobileOverlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100svh;
+  background: var(--bg);
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  font-size: 2.5rem;
+  z-index: 9999;
+}
+.mobileCloseBtn {
+  position: fixed;
+  top: 2rem;
+  left: 1rem;
+  width: 2.5rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--xnav-bar-color, var(--text));
+  z-index: 10000;
+  -webkit-tap-highlight-color: transparent;
+}
+.closeBar {
+  display: block;
+  position: absolute;
+  width: 2rem;
+  height: 3px;
+  border-radius: 2px;
+  background: currentColor;
+}
+.mobileLogo {
+  font-weight: 700;
+  font-size: 3rem;
+  user-select: none;
+  pointer-events: none;
+}
+.mobileNavLink {
+  font-size: 2.5rem;
+  color: var(--xnav-link-color, var(--text));
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    opacity 0.2s;
+  padding: 0.25rem;
+}
+.mobileNavLink:hover {
+  color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));
+  opacity: var(--xnav-link-hover-opacity, 0.7);
+}
+.mobileNavLinkActive {
+  font-weight: 600;
+  border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));
+}
+.themeToggleMobile {
+  margin-top: 1rem;
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  color: var(--text);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+.themeToggleMobile:hover {
+  opacity: 0.7;
+}
+/*# sourceMappingURL=index.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/xnavbar/XNavbar.module.css"],"sourcesContent":["/* ────────────────────────────────────────────\n   XNavbar.module.css\n   Navbar completamente libre de Tailwind.\n   Usa variables CSS del tema global (--bg, --text, --border, --accent).\n   ──────────────────────────────────────────── */\n\n/* ── Header / contenedor raíz ── */\n.header {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 2rem 3rem;\n  background: var(--bg);\n  color: var(--text);\n  font-size: 1.25rem;\n  z-index: 60;\n}\n\n@media (min-width: 640px)  { .header { padding-inline: 2rem; } }\n@media (min-width: 768px)  { .header { padding-inline: 3rem; } }\n@media (min-width: 1024px) { .header { padding-inline: 5rem; } }\n@media (min-width: 1280px) { .header { padding-inline: 12rem; } }\n\n/* ── Desktop nav ── */\n.desktopNav {\n  display: none;\n  align-items: center;\n  width: 100%;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  padding-bottom: 0.5rem;\n}\n\n@media (min-width: 768px) {\n  .desktopNav {\n    display: grid;\n  }\n}\n\n.desktopLinksLeft,\n.desktopLinksRight {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n  min-width: 0;\n}\n\n.desktopLinksLeft {\n  justify-content: flex-end;\n}\n\n.desktopLinksRight {\n  justify-content: flex-start;\n}\n\n.logoSlot {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* ── Logo / botón central (desktop) ── */\n.logoWrapper {\n  position: relative;\n  margin-inline: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.logoBtn {\n  font-weight: 700;\n  font-size: 1.5rem;\n  line-height: 1;\n  user-select: none;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--text);\n  padding: 0;\n}\n\n/* ── Tray de íconos hover (sun/moon) ── */\n.iconTray {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n.iconTrayRight {\n  left: 100%;\n  padding-left: 0.75rem;\n}\n\n.iconTrayLeft {\n  right: 100%;\n  padding-right: 0.75rem;\n}\n\n/* ── NavLink (desktop) ── */\n.navLink {\n  padding: 0.25rem;\n  border-bottom: 2px solid transparent;\n  transition: border-color 0.2s, opacity 0.2s, color 0.2s;\n  color: var(--xnav-link-color, var(--text));\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n.navLink:hover {\n  color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));\n  opacity: var(--xnav-link-hover-opacity, 0.7);\n}\n\n.navLinkActive {\n  border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));\n  font-weight: 600;\n}\n\n/* External link indicator */\n.navLinkExternal::after {\n  content: \" ↗\";\n  font-size: 0.7em;\n  opacity: 0.6;\n}\n\n/* ── Mobile hamburger ── */\n.mobileToggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@media (min-width: 768px) {\n  .mobileToggle {\n    display: none;\n  }\n}\n\n.hamburgerBtn {\n  width: 2.5rem;\n  height: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  z-index: 80;\n  padding: 0;\n}\n\n.bar {\n  width: var(--xnav-bar-w, 2rem);\n  height: var(--xnav-bar-h, 3px);\n  background: var(--xnav-bar-color, var(--text));\n  border-radius: 2px;\n}\n\n/* ── Mobile overlay (portal) ── */\n.mobileOverlay {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100svh;\n  background: var(--bg);\n  color: var(--text);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2rem;\n  font-size: 2.5rem;\n  z-index: 9999;\n}\n\n.mobileCloseBtn {\n  position: fixed;\n  top: 2rem;\n  left: 1rem;\n  width: 2.5rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  /* hereda el mismo color que las barras del hamburguesa */\n  color: var(--xnav-bar-color, var(--text));\n  z-index: 10000;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.closeBar {\n  display: block;\n  position: absolute;\n  width: 2rem;\n  height: 3px;\n  border-radius: 2px;\n  background: currentColor;\n}\n\n.mobileLogo {\n  font-weight: 700;\n  font-size: 3rem;\n  user-select: none;\n  pointer-events: none;\n}\n\n.mobileNavLink {\n  font-size: 2.5rem;\n  color: var(--xnav-link-color, var(--text));\n  text-decoration: none;\n  border-bottom: 2px solid transparent;\n  transition: border-color 0.2s, color 0.2s, opacity 0.2s;\n  padding: 0.25rem;\n}\n\n.mobileNavLink:hover {\n  color: var(--xnav-link-hover, var(--xnav-link-color, var(--text)));\n  opacity: var(--xnav-link-hover-opacity, 0.7);\n}\n\n.mobileNavLinkActive {\n  font-weight: 600;\n  border-bottom-color: var(--xnav-link-active, var(--xnav-link-color, var(--text)));\n}\n\n/* ── Botón tema (móvil) ── */\n.themeToggleMobile {\n  margin-top: 1rem;\n  font-size: 1rem;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--border);\n  border-radius: 0.375rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  color: var(--text);\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.themeToggleMobile:hover {\n  opacity: 0.7;\n}\n"],"mappings":"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","names":[]}

package/dist/components/navigation/index.d.mts

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type NavLinkItem = {
+    /** Ruta destino */
+    url: string;
+    /** Texto visible */
+    title: string;
+    /** Si es true abre en pestaña nueva y muestra el indicador ↗ */
+    external?: boolean;
+};
+/**
+ * ReactNode estático O función de render (size, color?) => ReactNode.
+ * La función recibe el tamaño y el color vigente para que el ícono
+ * pueda adaptarse dinámicamente a los props del navbar.
+ */
+type IconRenderer = ReactNode | ((size: number, color?: string) => ReactNode);
+type ThemeToggleIcons = {
+    /** Ícono/renderer hacia tema oscuro (ReactNode o función) */
+    toDark: IconRenderer;
+    /** Ícono/renderer hacia tema claro (ReactNode o función) */
+    toLight: IconRenderer;
+};
+type XNavbarProps = {
+    /** Links que aparecen a la izquierda del logo en desktop */
+    linksLeft?: NavLinkItem[];
+    /** Links que aparecen a la derecha del logo en desktop */
+    linksRight?: NavLinkItem[];
+    /** Contenido del botón central (texto o JSX). Por defecto: "X" */
+    logo?: ReactNode;
+    /** Si true el logo actúa como toggle de tema (comportamiento original). Default: true */
+    logoAsThemeToggle?: boolean;
+    /** Callback custom si logoAsThemeToggle es false */
+    onLogoClick?: () => void;
+    /** Íconos para el toggle de tema. Si no se pasa, no se mostrará hint de ícono */
+    themeIcons?: ThemeToggleIcons;
+    /** Tema inicial. Default: "light" */
+    defaultTheme?: "light" | "dark";
+    /** Key de localStorage para persistencia del tema. Default: "theme" */
+    storageKey?: string;
+    /** Color base de los enlaces (Inicio, Contacto, etc.). Default: var(--text) */
+    linkColor?: string;
+    /** Color al hacer hover sobre los enlaces. Default: opacidad reducida del linkColor */
+    linkHoverColor?: string;
+    /** Color del borde inferior del enlace activo. Default: linkColor */
+    linkActiveColor?: string;
+    /** Color base de los íconos. Acepta cualquier valor CSS: hex, hsl, "var(--accent)", etc.
+     *  Si no se pasa, los íconos heredan el color del texto (currentColor). */
+    iconColor?: string;
+    /** Color que toman los íconos al hacer hover sobre el logo. Default: iconColor */
+    iconHoverColor?: string;
+    /** Tamaño en px que se pasa a IconRenderer cuando es función. Default: 22 */
+    iconSize?: number;
+    /** Color de las 3 barras (y la X de cierre móvil). Acepta cualquier valor CSS. Default: var(--text) */
+    hamburgerColor?: string;
+    /** Ancho de las barras. Cualquier unidad CSS. Default: "2rem" */
+    hamburgerBarWidth?: string;
+    /** Grosor (altura) de las barras. Cualquier unidad CSS. Default: "3px" */
+    hamburgerBarThickness?: string;
+    /** Inyecta variables CSS extra directamente en el style del <header>.
+     *  Útil para pasar tokens del tema: { '--xnav-icon-color': 'var(--accent)' } */
+    cssVars?: Record<string, string>;
+    /** aria-label del botón hamburguesa cuando está cerrado. Default: "Abrir menú" */
+    labelOpen?: string;
+    /** aria-label del botón hamburguesa cuando está abierto. Default: "Cerrar menú" */
+    labelClose?: string;
+    /** Texto del botón de tema oscuro en menú móvil. Default: "Oscuro" */
+    labelDark?: string;
+    /** Texto del botón de tema claro en menú móvil. Default: "Claro" */
+    labelLight?: string;
+    /** className extra que se añade al <header> */
+    className?: string;
+};
+declare function XNavbar({ linksLeft, linksRight, logo, logoAsThemeToggle, onLogoClick, themeIcons, defaultTheme, storageKey, linkColor, linkHoverColor, linkActiveColor, iconColor, iconHoverColor, iconSize, hamburgerColor, hamburgerBarWidth, hamburgerBarThickness, cssVars, labelOpen, labelClose, labelDark, labelLight, className, }: XNavbarProps): react_jsx_runtime.JSX.Element;
+
+export { type IconRenderer, type NavLinkItem, type ThemeToggleIcons, XNavbar, type XNavbarProps };