@xscriptor/xcomponents 0.1.0

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,35 @@
+# Code of Conduct
+
+## Our commitment
+
+We are committed to making participation in this project a respectful,
+harassment-free experience for everyone.
+
+## Expected behavior
+
+- Be respectful and constructive.
+- Accept feedback with professionalism.
+- Focus on what is best for the project and community.
+- Show empathy toward other contributors.
+
+## Unacceptable behavior
+
+- Harassment, intimidation, or discrimination.
+- Trolling, insulting, or derogatory comments.
+- Publishing private information without permission.
+- Any other conduct that is inappropriate in a professional setting.
+
+## Enforcement
+
+Project maintainers are responsible for clarifying standards and may take
+appropriate action in response to unacceptable behavior.
+
+## Reporting
+
+To report behavior that violates this Code of Conduct, open a private security
+report as described in SECURITY.md.
+
+## Attribution
+
+This document is adapted from common open-source community standards,
+including the Contributor Covenant principles.

package/CONTRIBUTING.md

@@ -0,0 +1,64 @@
+# Contributing
+
+Thanks for your interest in improving @xscriptor/xcomponents.
+
+## Scope
+
+This package contains reusable React/Next.js UI components.
+Contributions should keep public APIs stable and types well documented.
+
+## Development setup
+
+1. Install dependencies:
+
+```bash
+npm install
+```
+
+2. Build the package:
+
+```bash
+npm run prepare:build
+```
+
+3. Validate the package content:
+
+```bash
+npm pack --dry-run
+```
+
+## Contribution workflow
+
+1. Create a feature branch from `dev`.
+2. Keep changes focused and small.
+3. Add or update examples when behavior changes.
+4. Ensure build passes before opening a PR.
+5. Open a pull request with:
+   - clear summary
+   - screenshots or usage snippet for UI changes
+   - migration note if API changed
+
+## Coding guidelines
+
+- Use TypeScript and exported prop types.
+- Keep component names with `X` prefix.
+- Prefer category barrels for exports.
+- Avoid breaking changes unless explicitly discussed.
+
+## Commit style
+
+Use concise, imperative commit messages, for example:
+
+- `feat(social): add XLinkedInIcon hover fill support`
+- `fix(layout): correct zigzag spacing on mobile`
+- `docs(readme): update publish steps`
+
+## Reporting issues
+
+Please include:
+
+- expected behavior
+- current behavior
+- reproduction steps
+- package version
+- React/Next.js versions

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Xscriptor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,127 @@
+<h1 align="center">@xscriptor/xcomponents</h1>
+
+<div align="center">
+
+Reusable React/Next.js component package by Xscriptor.
+
+![npm](https://xscriptor.github.io/badges/tools/npm.svg)
+![license](https://xscriptor.github.io/badges/terminal/LICENSE.svg)
+![MIT](https://xscriptor.github.io/badges/licenses/mit.svg)
+![typescript](https://xscriptor.github.io/badges/languages/typescript.svg)
+![CSS](https://xscriptor.github.io/badges/languages/css.svg)
+
+</div>
+
+<br>
+<hr>
+
+<details open>
+   <summary><h2>Table of Contents</h2></summary>
+   <ul>
+      <li><a href="#overview">Overview</a></li>
+      <li><a href="#installation">Installation</a></li>
+      <li><a href="#usage">Usage</a></li>
+      <li><a href="#exports">Exports</a></li>
+      <li><a href="#project-structure">Project Structure</a></li>
+      <li><a href="#scripts">Scripts</a></li>
+      <li><a href="#packaging-and-publish">Packaging and Publish</a></li>
+      <li><a href="#related-documents">Related Documents</a></li>
+   </ul>
+</details>
+
+<hr>
+
+<h2 id="overview">Overview</h2>
+
+<p>
+@xscriptor/xcomponents provides reusable UI building blocks for React and Next.js projects,
+organized by category and exported with TypeScript declarations.
+</p>
+
+<h2 id="installation">Installation</h2>
+
+```bash
+npm install @xscriptor/xcomponents
+```
+
+<h2 id="usage">Usage</h2>
+
+```tsx
+import { XNavbar, XSeparator } from "@xscriptor/xcomponents";
+import { XContactForm } from "@xscriptor/xcomponents/forms";
+import { XSocialContact, XInstagramIcon } from "@xscriptor/xcomponents/social";
+```
+
+<h2 id="exports">Exports</h2>
+
+<ul>
+   <li><code>@xscriptor/xcomponents</code> (root exports)</li>
+   <li><code>@xscriptor/xcomponents/forms</code></li>
+   <li><code>@xscriptor/xcomponents/navigation</code></li>
+   <li><code>@xscriptor/xcomponents/layout</code></li>
+   <li><code>@xscriptor/xcomponents/content</code></li>
+   <li><code>@xscriptor/xcomponents/gallery</code></li>
+   <li><code>@xscriptor/xcomponents/social</code></li>
+</ul>
+
+<h2 id="project-structure">Project Structure</h2>
+
+<ul>
+   <li><code>src/components/forms</code></li>
+   <li><code>src/components/navigation</code></li>
+   <li><code>src/components/layout</code></li>
+   <li><code>src/components/content</code></li>
+   <li><code>src/components/gallery</code></li>
+   <li><code>src/components/social</code></li>
+</ul>
+
+<h2 id="scripts">Scripts</h2>
+
+```bash
+npm run build
+npm run clean
+npm run prepare:build
+```
+
+<h2 id="packaging-and-publish">Packaging and Publish</h2>
+
+1. Authenticate with npm:
+
+```bash
+npm login
+npm whoami
+```
+
+2. Build and validate package content:
+
+```bash
+npm run prepare:build
+npm pack --dry-run
+```
+
+3. Bump version:
+
+```bash
+npm version patch
+```
+
+4. Publish package:
+
+```bash
+npm publish
+```
+
+<h2 id="related-documents">Related Documents</h2>
+
+<ul>
+   <li><a href="./CONTRIBUTING.md">Contributing Guide</a></li>
+   <li><a href="./CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+   <li><a href="./SECURITY.md">Security Policy</a></li>
+   <li><a href="./LICENSE">License (MIT)</a></li>
+</ul>
+
+<div align="center">
+<h2>X</h2>
+
+<a href="https://dev.xscriptor.com">XWeb</a> | <a href="https://dev.xscriptor.com">Profile</a>
+</div>

package/SECURITY.md

@@ -0,0 +1,25 @@
+# Security Policy
+
+## Supported versions
+
+Security updates are applied to the latest published version of
+`@xscriptor/xcomponents`.
+
+| Version | Supported |
+| --- | --- |
+| latest | yes |
+| older versions | no |
+
+## Reporting a vulnerability
+
+If you find a security vulnerability, please do not open a public issue first.
+
+Send a private report including:
+
+- a short description of the issue
+- reproduction steps or proof of concept
+- potential impact
+- suggested mitigation (if available)
+
+Maintainers will acknowledge receipt as soon as possible and coordinate a fix
+before public disclosure.

package/dist/chunk-2OAXRRVQ.mjs

@@ -0,0 +1,150 @@
+// src/components/gallery/xmicrogallerytext/XMicroGalleryText.tsx
+import React, { useEffect, useRef } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+// src/components/gallery/xmicrogallerytext/XMicroGalleryText.module.css
+var XMicroGalleryText_default = {};
+
+// src/components/gallery/xmicrogallerytext/XMicroGalleryText.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DISPLAY_COUNT = 3;
+var XMicroGalleryText = ({
+  images,
+  text,
+  textPosition = "left",
+  textAlign = "left",
+  autoShuffle = false,
+  shuffleInterval = 5e3
+}) => {
+  const containerRef = useRef(null);
+  const [startIndex, setStartIndex] = React.useState(0);
+  const visibleImages = React.useMemo(() => {
+    const result = [];
+    for (let i = 0; i < DISPLAY_COUNT; i++) {
+      result.push(images[(startIndex + i) % images.length]);
+    }
+    return result;
+  }, [images, startIndex]);
+  React.useEffect(() => {
+    if (!autoShuffle || images.length <= DISPLAY_COUNT) return;
+    const intervalId = setInterval(() => {
+      setStartIndex((prev) => (prev + 1) % images.length);
+    }, shuffleInterval);
+    return () => clearInterval(intervalId);
+  }, [autoShuffle, shuffleInterval, images.length]);
+  const [isVisible, setIsVisible] = React.useState(false);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.1,
+        rootMargin: "0px 0px -50px 0px"
+      }
+    );
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
+  const isTextRight = textPosition === "right";
+  const alignClass = {
+    left: XMicroGalleryText_default.textLeft,
+    right: XMicroGalleryText_default.textRight,
+    center: XMicroGalleryText_default.textCenter
+  }[textAlign];
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `${XMicroGalleryText_default.container} ${isTextRight ? XMicroGalleryText_default.reverse : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: `${XMicroGalleryText_default.textContent} ${alignClass} ${isVisible ? XMicroGalleryText_default.visible : ""}`, children: typeof text === "string" ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: text } }) : text }),
+    /* @__PURE__ */ jsx("div", { className: XMicroGalleryText_default.gallery, children: /* @__PURE__ */ jsx("div", { className: XMicroGalleryText_default.artisticGrid, children: visibleImages.map((image, index) => /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        layout: true,
+        className: `${XMicroGalleryText_default.imageWrapper} ${XMicroGalleryText_default[`artistic${index + 1}`]} ${isVisible ? XMicroGalleryText_default.visible : ""}`,
+        style: { transitionProperty: "opacity, box-shadow" },
+        transition: {
+          layout: { type: "spring", stiffness: 80, damping: 20 }
+        },
+        children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: image.src,
+            alt: image.alt,
+            fill: true,
+            className: XMicroGalleryText_default.previewImage,
+            sizes: "(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+          }
+        )
+      },
+      image.src
+    )) }) })
+  ] });
+};
+var XMicroGalleryText_default2 = XMicroGalleryText;
+
+// src/components/gallery/xstaticgallery/XStaticGallery.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import Image2 from "next/image";
+
+// src/components/gallery/xstaticgallery/XStaticGallery.module.css
+var XStaticGallery_default = {};
+
+// src/components/gallery/xstaticgallery/XStaticGallery.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var COLUMN_CLASSES = {
+  1: XStaticGallery_default.cols1,
+  2: XStaticGallery_default.cols2,
+  3: XStaticGallery_default.cols3,
+  4: XStaticGallery_default.cols4,
+  5: XStaticGallery_default.cols5
+};
+function XStaticGallery({ images, columns = 4, title }) {
+  const containerRef = useRef2(null);
+  useEffect2(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add(XStaticGallery_default.visible);
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+        rootMargin: "0px 0px -50px 0px"
+      }
+    );
+    const items = containerRef.current?.querySelectorAll(`.${XStaticGallery_default.masonryItem}`);
+    items?.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, []);
+  const colClass = COLUMN_CLASSES[columns] || COLUMN_CLASSES[4];
+  return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: XStaticGallery_default.galleryContainer, children: [
+    title && /* @__PURE__ */ jsx2("h2", { className: XStaticGallery_default.galleryTitle, children: title }),
+    /* @__PURE__ */ jsx2("div", { className: `${XStaticGallery_default.masonryGrid} ${colClass}`, children: images.map((image, index) => /* @__PURE__ */ jsx2("div", { className: XStaticGallery_default.masonryItem, children: /* @__PURE__ */ jsxs2("div", { className: XStaticGallery_default.imageContainer, children: [
+      /* @__PURE__ */ jsx2(
+        Image2,
+        {
+          src: image.src,
+          alt: image.alt,
+          width: 600,
+          height: 600,
+          className: XStaticGallery_default.galleryImage,
+          loading: "lazy",
+          sizes: "(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1280px) 33vw, 25vw"
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { className: XStaticGallery_default.imageOverlay })
+    ] }) }, index)) })
+  ] });
+}
+
+export {
+  XMicroGalleryText_default2 as XMicroGalleryText_default,
+  XStaticGallery
+};
+//# sourceMappingURL=chunk-2OAXRRVQ.mjs.map

package/dist/chunk-2OAXRRVQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/gallery/xmicrogallerytext/XMicroGalleryText.tsx","../src/components/gallery/xmicrogallerytext/XMicroGalleryText.module.css","../src/components/gallery/xstaticgallery/XStaticGallery.tsx","../src/components/gallery/xstaticgallery/XStaticGallery.module.css"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport Image from 'next/image';\nimport { motion } from 'framer-motion';\nimport styles from './XMicroGalleryText.module.css';\n\nexport interface XMicroGalleryImage {\n  src: string;\n  alt: string;\n}\n\nexport interface XMicroGalleryTextProps {\n  images: XMicroGalleryImage[];\n  text: React.ReactNode;\n  textPosition?: 'left' | 'right';\n  textAlign?: 'left' | 'right' | 'center';\n  autoShuffle?: boolean;\n  shuffleInterval?: number;\n}\n\nconst DISPLAY_COUNT = 3;\n\nconst XMicroGalleryText: React.FC<XMicroGalleryTextProps> = ({ \n  images, \n  text, \n  textPosition = 'left',\n  textAlign = 'left',\n  autoShuffle = false,\n  shuffleInterval = 5000\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [startIndex, setStartIndex] = React.useState(0);\n\n  const visibleImages = React.useMemo(() => {\n    const result: XMicroGalleryImage[] = [];\n    for (let i = 0; i < DISPLAY_COUNT; i++) {\n      result.push(images[(startIndex + i) % images.length]);\n    }\n    return result;\n  }, [images, startIndex]);\n\n  React.useEffect(() => {\n    if (!autoShuffle || images.length <= DISPLAY_COUNT) return;\n\n    const intervalId = setInterval(() => {\n      setStartIndex((prev) => (prev + 1) % images.length);\n    }, shuffleInterval);\n\n    return () => clearInterval(intervalId);\n  }, [autoShuffle, shuffleInterval, images.length]);\n\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setIsVisible(true);\n          observer.disconnect();\n        }\n      },\n      {\n        threshold: 0.1,\n        rootMargin: '0px 0px -50px 0px'\n      }\n    );\n\n    if (containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, []);\n\n  const isTextRight = textPosition === 'right';\n\n  const alignClass = {\n    left: styles.textLeft,\n    right: styles.textRight,\n    center: styles.textCenter,\n  }[textAlign];\n\n  return (\n    <div ref={containerRef} className={`${styles.container} ${isTextRight ? styles.reverse : ''}`}>\n      <div className={`${styles.textContent} ${alignClass} ${isVisible ? styles.visible : ''}`}>\n        {typeof text === 'string' ? (\n          <div dangerouslySetInnerHTML={{ __html: text }} />\n        ) : (\n          text\n        )}\n      </div>\n      \n      <div className={styles.gallery}>\n        <div className={styles.artisticGrid}>\n          {visibleImages.map((image, index) => (\n            <motion.div \n              layout\n              key={image.src} \n              className={`${styles.imageWrapper} ${styles[`artistic${index + 1}`]} ${isVisible ? styles.visible : ''}`}\n              style={{ transitionProperty: 'opacity, box-shadow' }}\n              transition={{\n                layout: { type: \"spring\", stiffness: 80, damping: 20 }\n              }}\n            >\n              <Image\n                src={image.src}\n                alt={image.alt}\n                fill\n                className={styles.previewImage}\n                sizes=\"(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n              />\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default XMicroGalleryText;\n",".container {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  width: 100%;\n  align-items: center;\n  margin: 2rem 0;\n}\n\n@media (min-width: 1024px) {\n  .container {\n    flex-direction: row;\n    align-items: center;\n    gap: 4rem;\n  }\n  \n  .reverse {\n    flex-direction: row-reverse;\n  }\n}\n\n.textContent {\n  flex: 1;\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n  color: var(--foreground);\n}\n\n.textContent.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.textLeft {\n  text-align: left;\n}\n\n.textRight {\n  text-align: right;\n}\n\n.textCenter {\n  text-align: center;\n}\n\n.textContent p,\n.textContent div,\n.textContent span,\n.textContent em,\n.textContent strong,\n.textContent a {\n  text-align: inherit;\n  max-width: none;\n  margin-left: unset;\n  margin-right: unset;\n}\n\n.gallery {\n  flex: 1.5;\n  width: 100%;\n}\n\n.artisticGrid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: 380px 220px;\n  gap: 1rem;\n}\n\n.imageWrapper {\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 20px;\n  opacity: 0;\n  transform: translateY(50px) scale(0.95);\n  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;\n}\n\n.imageWrapper.visible {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.imageWrapper:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n}\n\n.previewImage {\n  object-fit: cover;\n}\n\n.artisticGrid .artistic1 .previewImage {\n  object-position: center top;\n  transform: translateY(0);\n}\n\n.artistic1 {\n  grid-column: 1 / 4;\n  grid-row: 1 / 2;\n  transition-delay: 0.2s;\n}\n\n.artistic2 {\n  grid-column: 1 / 2;\n  grid-row: 2 / 3;\n  transition-delay: 0.3s;\n}\n\n.artistic3 {\n  grid-column: 2 / 4;\n  grid-row: 2 / 3;\n  transition-delay: 0.4s;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .artisticGrid {\n    grid-template-columns: 1fr;\n    grid-template-rows: 240px 180px 180px;\n  }\n  \n  .artistic1,\n  .artistic2,\n  .artistic3 {\n    grid-column: 1 / 2;\n  }\n  \n  .artistic1 {\n    grid-row: 1 / 2;\n  }\n  \n  .artistic2 {\n    grid-row: 2 / 3;\n  }\n  \n  .artistic3 {\n    grid-row: 3 / 4;\n  }\n}\n\n@media (max-width: 480px) {\n  .artisticGrid {\n    grid-template-rows: 200px 140px 140px;\n  }\n}\n","\"use client\";\nimport React, { useEffect, useRef } from 'react';\nimport Image from 'next/image';\nimport styles from './XStaticGallery.module.css';\n\nexport interface XStaticGalleryImage {\n  src: string;\n  alt: string;\n}\n\nexport interface XStaticGalleryProps {\n  images: XStaticGalleryImage[];\n  columns?: 1 | 2 | 3 | 4 | 5;\n  title?: string;\n}\n\nconst COLUMN_CLASSES: Record<number, string> = {\n  1: styles.cols1,\n  2: styles.cols2,\n  3: styles.cols3,\n  4: styles.cols4,\n  5: styles.cols5,\n};\n\nexport default function XStaticGallery({ images, columns = 4, title }: XStaticGalleryProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            entry.target.classList.add(styles.visible);\n          }\n        });\n      },\n      {\n        threshold: 0.1,\n        rootMargin: '0px 0px -50px 0px',\n      }\n    );\n\n    const items = containerRef.current?.querySelectorAll(`.${styles.masonryItem}`);\n    items?.forEach((el) => observer.observe(el));\n\n    return () => observer.disconnect();\n  }, []);\n\n  const colClass = COLUMN_CLASSES[columns] || COLUMN_CLASSES[4];\n\n  return (\n    <div ref={containerRef} className={styles.galleryContainer}>\n      {title && <h2 className={styles.galleryTitle}>{title}</h2>}\n\n      <div className={`${styles.masonryGrid} ${colClass}`}>\n        {images.map((image, index) => (\n          <div key={index} className={styles.masonryItem}>\n            <div className={styles.imageContainer}>\n              <Image\n                src={image.src}\n                alt={image.alt}\n                width={600}\n                height={600}\n                className={styles.galleryImage}\n                loading=\"lazy\"\n                sizes=\"(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1280px) 33vw, 25vw\"\n              />\n              <div className={styles.imageOverlay} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",".galleryContainer {\n  width: 100%;\n  max-width: 80rem;\n  margin: 0 auto;\n  padding: 1rem 1rem 3rem;\n}\n\n.galleryTitle {\n  font-size: 1.875rem;\n  text-align: right;\n  color: var(--primary);\n  margin-bottom: 3rem;\n  opacity: 0.8;\n}\n\n/* Masonry via CSS columns */\n.masonryGrid {\n  gap: 1rem;\n}\n\n.masonryItem {\n  break-inside: avoid;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  margin-bottom: 1rem;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.3s ease;\n}\n\n.masonryItem.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.masonryItem:hover {\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);\n}\n\n.imageContainer {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  border-radius: 1rem;\n}\n\n.galleryImage {\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.5s ease-out;\n}\n\n.masonryItem:hover .galleryImage {\n  transform: scale(1.05);\n}\n\n.imageOverlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0);\n  transition: background 0.3s ease;\n  pointer-events: none;\n}\n\n.masonryItem:hover .imageOverlay {\n  background: rgba(0, 0, 0, 0.1);\n}\n\n/* Column count via CSS custom property */\n.cols1 { columns: 1; }\n.cols2 { columns: 2; }\n.cols3 { columns: 3; }\n.cols4 { columns: 4; }\n.cols5 { columns: 5; }\n\n/* Responsive overrides */\n@media (max-width: 1280px) {\n  .cols4, .cols5 { columns: 3; }\n}\n\n@media (max-width: 768px) {\n  .cols3, .cols4, .cols5 { columns: 2; }\n}\n\n@media (max-width: 640px) {\n  .cols2, .cols3, .cols4, .cols5 { columns: 1; }\n}\n"],"mappings":"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","names":["XMicroGalleryText_default","useEffect","useRef","Image","jsx","jsxs","useRef","useEffect","Image"]}

package/dist/chunk-42XPBYTL.mjs

@@ -0,0 +1,186 @@
+// src/components/layout/xfooter/XFooter.tsx
+import Link from "next/link";
+
+// src/components/layout/xfooter/XFooter.module.css
+var XFooter_default = {};
+
+// src/components/layout/xfooter/XFooter.tsx
+import { jsx, jsxs } from "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__ */ jsx("footer", { className: `${XFooter_default.XFooter} ${className}`, style: customStyles, children: /* @__PURE__ */ jsxs("div", { className: XFooter_default.container, children: [
+    /* @__PURE__ */ jsx("nav", { className: layout === "vertical" ? XFooter_default.navVertical : XFooter_default.nav, children: links.map((link, idx) => /* @__PURE__ */ jsx(Link, { href: link.href, className: XFooter_default.link, children: link.label }, idx)) }),
+    /* @__PURE__ */ 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
+import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsx2("hr", { className: classes, style: dynamicStyles });
+  if (!hasX) return line;
+  return /* @__PURE__ */ jsxs2("div", { className: `${XSeparator_default.separatorContainer} ${className}`, style: dynamicStyles, children: [
+    line,
+    /* @__PURE__ */ jsx2("div", { className: XSeparator_default.iconWrapper, children: "\u2715" })
+  ] });
+}
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.tsx
+import { Children, useEffect, useRef, useState, useCallback } from "react";
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.module.css
+var XZigZagLayout_default = {};
+
+// src/components/layout/xzigzaglayout/XZigZagLayout.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function XZigZagLayout({
+  children,
+  className,
+  style,
+  startSide = "left",
+  gap,
+  offset,
+  textAlign = "inherit",
+  showLine = false,
+  lineColor = "#cccccc",
+  lineThickness = 2,
+  ...rest
+}) {
+  const items = Children.toArray(children).filter(Boolean);
+  const containerRef = useRef(null);
+  const itemsRef = useRef([]);
+  const pathRef = useRef(null);
+  const [points, setPoints] = useState([]);
+  const [pathLength, setPathLength] = useState(0);
+  const [drawProgress, setDrawProgress] = useState(0);
+  const calculatePoints = 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);
+  }, []);
+  useEffect(() => {
+    if (!showLine || !containerRef.current) return;
+    const observer = new ResizeObserver(() => calculatePoints());
+    observer.observe(containerRef.current);
+    calculatePoints();
+    return () => observer.disconnect();
+  }, [showLine, calculatePoints]);
+  useEffect(() => {
+    if (pathRef.current) setPathLength(pathRef.current.getTotalLength());
+  }, [points]);
+  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__ */ jsxs3(
+    "div",
+    {
+      ref: containerRef,
+      ...rest,
+      className: [XZigZagLayout_default.layout, className].filter(Boolean).join(" "),
+      style: mergedStyle,
+      children: [
+        showLine && points.length > 0 && /* @__PURE__ */ jsx3("svg", { className: XZigZagLayout_default.svgLine, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx3(
+          "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__ */ jsx3("div", { className: `${XZigZagLayout_default.item} ${alignLeft ? XZigZagLayout_default.left : XZigZagLayout_default.right} ${alignmentClass}`, children: /* @__PURE__ */ jsx3("div", { ref: (el) => {
+            itemsRef.current[index] = el;
+          }, className: XZigZagLayout_default.contentWrapper, children: child }) }, index);
+        })
+      ]
+    }
+  );
+}
+
+export {
+  XFooter,
+  XSeparator,
+  XZigZagLayout
+};
+//# sourceMappingURL=chunk-42XPBYTL.mjs.map