@phantompixeldev/retrocss 1.0.0

package/dist/retro.js

@@ -0,0 +1,1251 @@
+var RetroCSS = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/js/retro.js
+  var retro_exports = {};
+  __export(retro_exports, {
+    default: () => retro_default
+  });
+
+  // src/js/components/modal.js
+  var RetroModal = {
+    init(root = document) {
+      document.addEventListener("click", (e) => {
+        const openTrigger = e.target.closest('[data-toggle="modal"], .modal-demo-btn, [data-retro-modal]');
+        if (openTrigger && root.contains(openTrigger)) {
+          e.preventDefault();
+          const targetId = openTrigger.getAttribute("data-target") || openTrigger.getAttribute("data-retro-modal");
+          if (targetId) {
+            this.show(targetId);
+          } else {
+            console.warn("Modal trigger missing target ID", openTrigger);
+          }
+          return;
+        }
+        const closeBtn = e.target.closest('.retro-modal-close, [data-close="modal"]');
+        if (closeBtn && root.contains(closeBtn)) {
+          e.preventDefault();
+          const modal = closeBtn.closest(".retro-modal");
+          if (modal) this.hide(modal.id);
+          return;
+        }
+        if (e.target.classList.contains("retro-modal")) this.hide(e.target.id);
+      });
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          const openModal = document.querySelector(".retro-modal.show");
+          if (openModal) this.hide(openModal.id);
+        }
+      });
+      console.log("Modal component initialized");
+    },
+    show(modalId) {
+      const modal = document.getElementById(modalId);
+      if (modal) {
+        modal.classList.add("show");
+        document.body.style.overflow = "hidden";
+        console.log(`Modal ${modalId} opened`);
+      } else {
+        console.warn(`Modal with ID ${modalId} not found`);
+      }
+    },
+    hide(modalId) {
+      const modal = document.getElementById(modalId);
+      if (modal) {
+        modal.classList.remove("show");
+        document.body.style.overflow = "";
+        console.log(`Modal ${modalId} closed`);
+      }
+    }
+  };
+  var modal_default = RetroModal;
+
+  // src/js/components/toast.js
+  var RetroToast = {
+    show(message, options = {}) {
+      let container = document.getElementById("retro-toast-container");
+      if (!container) {
+        container = document.createElement("div");
+        container.id = "retro-toast-container";
+        document.body.appendChild(container);
+      }
+      const toast = document.createElement("div");
+      toast.className = "retro-toast";
+      if (options.type) {
+        toast.classList.add(`retro-toast-${options.type}`);
+      }
+      if (options.html) {
+        toast.classList.add("retro-toast-html");
+        toast.innerHTML = message;
+      } else {
+        toast.textContent = message;
+      }
+      container.appendChild(toast);
+      setTimeout(() => {
+        toast.remove();
+      }, options.duration || 3e3);
+    }
+  };
+  var toast_default = RetroToast;
+
+  // src/js/components/form.js
+  var RetroForm = {
+    init(root = document) {
+      root.querySelectorAll(".retro-form").forEach((form) => {
+        form.addEventListener("submit", (e) => {
+          if (!this.validate(form)) {
+            e.preventDefault();
+          }
+        });
+        form.querySelectorAll("input, textarea, select").forEach((field) => {
+          field.addEventListener("blur", () => this.validateField(field));
+        });
+      });
+    },
+    validate(form) {
+      let valid = true;
+      form.querySelectorAll("input, textarea, select").forEach((field) => {
+        if (!this.validateField(field)) valid = false;
+      });
+      return valid;
+    },
+    validateField(field) {
+      const errorClass = "retro-form-error";
+      let error = field.parentNode.querySelector("." + errorClass);
+      if (error) error.remove();
+      let valid = true;
+      if (field.hasAttribute("required") && !field.value.trim()) {
+        valid = false;
+        this.showError(field, "This field is required");
+      }
+      if (field.type === "email" && field.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value)) {
+        valid = false;
+        this.showError(field, "Please enter a valid email");
+      }
+      field.classList.toggle("invalid", !valid);
+      field.classList.toggle("valid", valid);
+      return valid;
+    },
+    showError(field, message) {
+      const error = document.createElement("div");
+      error.className = "retro-form-error";
+      error.textContent = message;
+      field.parentNode.appendChild(error);
+    }
+  };
+  var form_default = RetroForm;
+
+  // src/js/components/table.js
+  var RetroTable = {
+    init(root = document) {
+      root.querySelectorAll(".retro-table-sortable").forEach((table) => {
+        table.addEventListener("click", function(e) {
+          const th = e.target.closest("th");
+          if (!th || !table.contains(th)) return;
+          const ths = table.querySelectorAll("th");
+          const idx = Array.from(ths).indexOf(th);
+          if (idx === -1) return;
+          const tbody = table.querySelector("tbody");
+          const rows = Array.from(tbody.querySelectorAll("tr"));
+          const isAsc = th.classList.toggle("asc");
+          th.classList.toggle("desc", !isAsc);
+          ths.forEach((oth) => {
+            if (oth !== th) oth.classList.remove("asc", "desc");
+          });
+          rows.sort((a, b) => {
+            let t1 = a.children[idx].textContent.trim();
+            let t2 = b.children[idx].textContent.trim();
+            let n1 = parseFloat(t1), n2 = parseFloat(t2);
+            if (!isNaN(n1) && !isNaN(n2)) {
+              return isAsc ? n1 - n2 : n2 - n1;
+            }
+            return isAsc ? t1.localeCompare(t2) : t2.localeCompare(t1);
+          });
+          rows.forEach((row) => tbody.appendChild(row));
+        });
+      });
+    }
+  };
+  var table_default = RetroTable;
+
+  // src/js/components/dropdown.js
+  var RetroDropdown = {
+    init(root = document) {
+      document.addEventListener("click", function(e) {
+        const toggle = e.target.closest(".retro-dropdown .retro-dropdown-toggle");
+        if (toggle && root.contains(toggle)) {
+          e.preventDefault();
+          e.stopPropagation();
+          const drop = toggle.closest(".retro-dropdown");
+          if (drop) {
+            root.querySelectorAll(".retro-dropdown.open").forEach((other) => {
+              if (other !== drop) other.classList.remove("open");
+            });
+            drop.classList.toggle("open");
+            const menu = drop.querySelector(".retro-dropdown-menu");
+            if (menu) {
+              if (menu.parentElement !== drop) {
+                console.warn("retro-dropdown-menu should be a direct child of retro-dropdown for CSS to work.");
+              }
+              const toggleRect = toggle.getBoundingClientRect();
+              const menuRect = menu.getBoundingClientRect();
+              const spaceBelow = window.innerHeight - toggleRect.bottom;
+              const spaceAbove = toggleRect.top;
+              if (spaceBelow < menuRect.height && spaceAbove > spaceBelow) {
+                menu.style.bottom = "100%";
+                menu.style.top = "auto";
+              } else {
+                menu.style.top = "100%";
+                menu.style.bottom = "auto";
+              }
+            }
+          }
+          return;
+        }
+        const item = e.target.closest(".retro-dropdown-menu .retro-dropdown-item");
+        if (item && root.contains(item)) {
+          const drop = item.closest(".retro-dropdown");
+          if (drop) drop.classList.remove("open");
+          return;
+        }
+        root.querySelectorAll(".retro-dropdown.open").forEach((drop) => {
+          if (!drop.contains(e.target)) {
+            drop.classList.remove("open");
+          }
+        });
+      });
+      document.addEventListener("keydown", function(e) {
+        if (e.key === "Escape") {
+          root.querySelectorAll(".retro-dropdown.open").forEach((drop) => {
+            drop.classList.remove("open");
+          });
+        }
+      });
+    }
+  };
+  var dropdown_default = RetroDropdown;
+
+  // src/js/components/file-upload.js
+  var RetroFileUpload = {
+    init(root = document) {
+      root.querySelectorAll(".retro-file-upload").forEach((upload) => {
+        const input = upload.querySelector(".retro-file-input");
+        const display = upload.querySelector(".retro-file-filename, .retro-file-display");
+        const label = upload.querySelector(".retro-file-label");
+        const drop = upload.querySelector(".retro-file-drop");
+        if (!input || !display) return;
+        input.addEventListener("change", function() {
+          if (this.files && this.files.length) {
+            const fileNames = Array.from(this.files).map((f) => f.name).join(", ");
+            display.textContent = fileNames;
+            upload.classList.add("has-files");
+          } else {
+            display.textContent = display.dataset.placeholder || "No file chosen";
+            upload.classList.remove("has-files");
+          }
+        });
+        if (label) {
+          label.addEventListener("click", (e) => {
+            e.preventDefault();
+            input.click();
+          });
+        }
+        if (drop) {
+          drop.addEventListener("click", (e) => {
+            e.preventDefault();
+            input.click();
+          });
+          drop.addEventListener("dragover", (e) => {
+            e.preventDefault();
+            drop.classList.add("dragover");
+          });
+          drop.addEventListener("dragleave", () => {
+            drop.classList.remove("dragover");
+          });
+          drop.addEventListener("drop", (e) => {
+            e.preventDefault();
+            drop.classList.remove("dragover");
+            if (e.dataTransfer.files.length) {
+              input.files = e.dataTransfer.files;
+              const event = new Event("change", { bubbles: true });
+              input.dispatchEvent(event);
+            }
+          });
+        }
+      });
+      console.log("File uploads initialized:", root.querySelectorAll(".retro-file-upload").length);
+    }
+  };
+  var file_upload_default = RetroFileUpload;
+
+  // src/js/components/events.js
+  var RetroEvents = {
+    _events: {},
+    /**
+     * Register an event handler
+     * @param {string} event - Event name to listen for
+     * @param {function} handler - Handler function to call
+     */
+    on(event, handler) {
+      if (!this._events[event]) this._events[event] = [];
+      this._events[event].push(handler);
+    },
+    /**
+     * Remove an event handler
+     * @param {string} event - Event name
+     * @param {function} handler - Handler function to remove
+     */
+    off(event, handler) {
+      if (this._events[event]) {
+        this._events[event] = this._events[event].filter((h) => h !== handler);
+      }
+    },
+    /**
+     * Emit an event with optional data
+     * @param {string} event - Event name to emit
+     * @param {object} detail - Data to pass to handlers
+     */
+    emit(event, detail = {}) {
+      if (this._events[event]) {
+        this._events[event].forEach((handler) => handler(detail));
+      }
+      document.dispatchEvent(new CustomEvent(`retro:${event}`, {
+        detail,
+        bubbles: true
+      }));
+    }
+  };
+  var events_default = RetroEvents;
+
+  // src/js/carousel.js
+  (function() {
+    function RetroCarousel(root) {
+      this.root = root;
+      this.track = root.querySelector(".retro-carousel-track");
+      this.slides = Array.from(root.querySelectorAll(".retro-carousel-slide"));
+      this.dots = Array.from(root.querySelectorAll(".retro-carousel-dot"));
+      this.leftArrow = root.querySelector(".retro-carousel-arrow.left");
+      this.rightArrow = root.querySelector(".retro-carousel-arrow.right");
+      this.current = 0;
+      this.slideWidth = 100;
+      if (this.slides.length === 0) return;
+      if (this.dots.length === 0 && this.slides.length > 1) {
+        this.createDots();
+      }
+      this.init();
+    }
+    RetroCarousel.prototype.createDots = function() {
+      const dotsContainer = this.root.querySelector(".retro-carousel-dots");
+      if (!dotsContainer) {
+        const newDotsContainer = document.createElement("div");
+        newDotsContainer.className = "retro-carousel-dots";
+        this.root.appendChild(newDotsContainer);
+        for (let i = 0; i < this.slides.length; i++) {
+          const dot = document.createElement("div");
+          dot.className = "retro-carousel-dot";
+          dot.setAttribute("data-index", i);
+          newDotsContainer.appendChild(dot);
+        }
+        this.dots = Array.from(this.root.querySelectorAll(".retro-carousel-dot"));
+      }
+    };
+    RetroCarousel.prototype.init = function() {
+      if (this.leftArrow) {
+        this.leftArrow.addEventListener("click", () => {
+          this.goTo(this.current - 1);
+        });
+      }
+      if (this.rightArrow) {
+        this.rightArrow.addEventListener("click", () => {
+          this.goTo(this.current + 1);
+        });
+      }
+      this.dots.forEach((dot, i) => {
+        dot.addEventListener("click", () => {
+          this.goTo(i);
+        });
+      });
+      this.goTo(0);
+      let startX, moveX;
+      this.root.addEventListener("touchstart", (e) => {
+        startX = e.touches[0].clientX;
+      }, { passive: true });
+      this.root.addEventListener("touchmove", (e) => {
+        moveX = e.touches[0].clientX;
+      }, { passive: true });
+      this.root.addEventListener("touchend", () => {
+        if (startX && moveX) {
+          const diff = startX - moveX;
+          if (Math.abs(diff) > 50) {
+            if (diff > 0) {
+              this.goTo(this.current + 1);
+            } else {
+              this.goTo(this.current - 1);
+            }
+          }
+        }
+        startX = null;
+        moveX = null;
+      });
+      console.log("Carousel initialized:", this.slides.length, "slides");
+    };
+    RetroCarousel.prototype.goTo = function(idx) {
+      if (idx < 0) idx = this.slides.length - 1;
+      if (idx >= this.slides.length) idx = 0;
+      this.current = idx;
+      if (this.track) {
+        const position = -this.slideWidth * idx;
+        this.track.style.transform = `translateX(${position}%)`;
+      }
+      this.dots.forEach((dot, i) => {
+        dot.classList.toggle("active", i === idx);
+      });
+    };
+    RetroCarousel.init = function() {
+      document.querySelectorAll(".retro-carousel").forEach(function(root) {
+        new RetroCarousel(root);
+      });
+    };
+    window.RetroCarousel = RetroCarousel;
+  })();
+
+  // src/js/tabs.js
+  var RetroTabs = class {
+    constructor(selector, options = {}) {
+      this.tabContainer = document.querySelector(selector);
+      if (!this.tabContainer) return;
+      this.options = {
+        contentSelector: options.contentSelector || ".retro-tab-content",
+        activeClass: options.activeClass || "active",
+        defaultTab: options.defaultTab || 0,
+        ...options
+      };
+      this.tabs = Array.from(this.tabContainer.querySelectorAll(".retro-nav-item"));
+      this.contentElements = this.options.contentContainer ? Array.from(document.querySelector(this.options.contentContainer).children) : Array.from(this.tabContainer.nextElementSibling.querySelectorAll(this.options.contentSelector));
+      this.init();
+    }
+    init() {
+      this.contentElements.forEach((content) => {
+        content.style.display = "none";
+      });
+      this.tabs.forEach((tab, index) => {
+        tab.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.activateTab(index);
+        });
+        tab.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.activateTab(index);
+          }
+          if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            e.preventDefault();
+            const direction = e.key === "ArrowLeft" ? -1 : 1;
+            let newIndex = index + direction;
+            if (newIndex < 0) newIndex = this.tabs.length - 1;
+            if (newIndex >= this.tabs.length) newIndex = 0;
+            this.tabs[newIndex].focus();
+          }
+        });
+      });
+      this.activateTab(this.options.defaultTab);
+    }
+    activateTab(index) {
+      this.tabs.forEach((tab) => {
+        tab.classList.remove(this.options.activeClass);
+        tab.setAttribute("aria-selected", "false");
+      });
+      this.tabs[index].classList.add(this.options.activeClass);
+      this.tabs[index].setAttribute("aria-selected", "true");
+      var visibleContent = null;
+      for (var i = 0; i < this.contentElements.length; i++) {
+        if (this.contentElements[i].style.display === "block") {
+          visibleContent = this.contentElements[i];
+          break;
+        }
+      }
+      this.contentElements.forEach((content) => {
+        if (content !== this.contentElements[index]) {
+          content.style.display = "none";
+        }
+      });
+      var selectedContent = this.contentElements[index];
+      selectedContent.style.opacity = "0";
+      selectedContent.style.display = "block";
+      selectedContent.offsetHeight;
+      setTimeout(function() {
+        selectedContent.style.opacity = "1";
+      }, 10);
+    }
+    static init() {
+    }
+  };
+  var RetroTabsInit = {
+    init: function() {
+      const tabbedNavs = document.querySelectorAll(".retro-nav-tabbed");
+      tabbedNavs.forEach((nav) => {
+        let contentContainer = nav.nextElementSibling;
+        if (!contentContainer || !contentContainer.classList.contains("retro-tab-pane")) {
+          const existingContent = nav.nextElementSibling;
+          if (existingContent) {
+            const wrapper = document.createElement("div");
+            wrapper.className = "retro-tab-pane";
+            nav.parentNode.insertBefore(wrapper, existingContent);
+            const tabs = Array.from(nav.querySelectorAll(".retro-nav-item"));
+            tabs.forEach((tab, i) => {
+              const content = document.createElement("div");
+              content.className = "retro-tab-content";
+              if (i === 0 && tabs[0].classList.contains("active")) {
+                content.appendChild(existingContent);
+              } else {
+                content.textContent = `Content for ${tab.textContent}`;
+                content.style.padding = "20px";
+                content.style.border = "2px solid #000";
+                content.style.borderTop = "0";
+                content.style.background = "#fff";
+              }
+              wrapper.appendChild(content);
+            });
+            contentContainer = wrapper;
+          }
+        }
+        new RetroTabs(nav, {
+          contentContainer: ".retro-tab-pane",
+          defaultTab: Array.from(nav.querySelectorAll(".retro-nav-item")).findIndex((tab) => tab.classList.contains("active"))
+        });
+      });
+      const underlinedNavs = document.querySelectorAll(".retro-nav-underlined");
+      underlinedNavs.forEach((nav) => {
+        let contentContainer = nav.nextElementSibling;
+        if (!contentContainer || !contentContainer.classList.contains("retro-tab-pane")) {
+          const existingContent = nav.nextElementSibling;
+          if (existingContent) {
+            const wrapper = document.createElement("div");
+            wrapper.className = "retro-tab-pane retro-tab-pane-underlined";
+            nav.parentNode.insertBefore(wrapper, existingContent);
+            const tabs = Array.from(nav.querySelectorAll(".retro-nav-item"));
+            tabs.forEach((tab, i) => {
+              const content = document.createElement("div");
+              content.className = "retro-tab-content";
+              if (i === 0 && tabs[0].classList.contains("active")) {
+                content.appendChild(existingContent);
+              } else {
+                content.textContent = `Content for ${tab.textContent}`;
+                content.style.padding = "20px";
+                content.style.marginTop = "10px";
+                content.style.background = "#f5f5f5";
+              }
+              wrapper.appendChild(content);
+            });
+            contentContainer = wrapper;
+          }
+        }
+        new RetroTabs(nav, {
+          contentContainer: ".retro-tab-pane-underlined",
+          defaultTab: Array.from(nav.querySelectorAll(".retro-nav-item")).findIndex((tab) => tab.classList.contains("active"))
+        });
+      });
+      const buttonNavs = document.querySelectorAll(".retro-nav-buttons");
+      buttonNavs.forEach((nav) => {
+        const nextEl = nav.nextElementSibling;
+        if (nextEl && !nextEl.tagName.match(/^(H[1-6]|NAV)$/i)) {
+          let contentContainer = nextEl;
+          if (!contentContainer.classList.contains("retro-tab-pane")) {
+            const wrapper = document.createElement("div");
+            wrapper.className = "retro-tab-pane retro-tab-pane-buttons";
+            nav.parentNode.insertBefore(wrapper, nextEl);
+            const tabs = Array.from(nav.querySelectorAll(".retro-nav-item"));
+            tabs.forEach((tab, i) => {
+              const content = document.createElement("div");
+              content.className = "retro-tab-content";
+              if (i === 0 && tabs[0].classList.contains("active") || tab.classList.contains("active")) {
+                content.appendChild(nextEl);
+              } else {
+                content.textContent = `Content for ${tab.textContent}`;
+                content.style.padding = "20px";
+                content.style.marginTop = "10px";
+                content.style.background = "#f5f5f5";
+              }
+              wrapper.appendChild(content);
+            });
+            contentContainer = wrapper;
+          }
+          new RetroTabs(nav, {
+            contentContainer: ".retro-tab-pane-buttons",
+            defaultTab: Array.from(nav.querySelectorAll(".retro-nav-item")).findIndex((tab) => tab.classList.contains("active"))
+          });
+        }
+      });
+    }
+  };
+  var RetroAccordion = class _RetroAccordion {
+    constructor(selector) {
+      const accordions = document.querySelectorAll(selector);
+      accordions.forEach((accordion) => {
+        const toggles = accordion.querySelectorAll(".retro-accordion-toggle");
+        toggles.forEach((toggle) => {
+          toggle.addEventListener("click", () => {
+            const item = toggle.parentElement;
+            const isActive = item.classList.contains("active");
+            const content = toggle.nextElementSibling;
+            if (!content) return;
+            const icon = toggle.querySelector(".retro-accordion-icon");
+            if (isActive) {
+              item.classList.remove("active");
+              content.style.maxHeight = "0";
+              if (icon) icon.textContent = "+";
+            } else {
+              const siblings = accordion.querySelectorAll(".retro-accordion-item.active");
+              siblings.forEach((sibling) => {
+                sibling.classList.remove("active");
+                const siblingContent = sibling.querySelector(".retro-accordion-content");
+                if (siblingContent) siblingContent.style.maxHeight = "0";
+                const siblingIcon = sibling.querySelector(".retro-accordion-icon");
+                if (siblingIcon) siblingIcon.textContent = "+";
+              });
+              item.classList.add("active");
+              content.style.maxHeight = content.scrollHeight + "px";
+              if (icon) icon.textContent = "-";
+            }
+          });
+        });
+      });
+      console.log("Accordion component initialized");
+    }
+    static init(selector = ".retro-accordion") {
+      new _RetroAccordion(selector);
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "childList" && mutation.addedNodes.length) {
+            mutation.addedNodes.forEach((node) => {
+              if (node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))) {
+                new _RetroAccordion(selector);
+              }
+            });
+          }
+        });
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+  };
+  window.RetroTabs = RetroTabsInit;
+  window.RetroAccordion = RetroAccordion;
+
+  // src/js/code-copy.js
+  var RetroCodeCopy = {
+    init() {
+      const codeBlocks = document.querySelectorAll(".retro-code");
+      codeBlocks.forEach((block) => {
+        if (!block.querySelector(".retro-code-copy")) {
+          const copyButton = document.createElement("button");
+          copyButton.className = "retro-code-copy";
+          copyButton.textContent = "Copy";
+          block.appendChild(copyButton);
+          copyButton.addEventListener("click", async () => {
+            const code = block.querySelector("code").textContent;
+            try {
+              await navigator.clipboard.writeText(code);
+              const originalText = copyButton.textContent;
+              copyButton.textContent = "Copied!";
+              copyButton.style.background = "#c0c0c0";
+              setTimeout(() => {
+                copyButton.textContent = originalText;
+                copyButton.style.background = "";
+              }, 2e3);
+            } catch (err) {
+              console.error("Failed to copy code:", err);
+              copyButton.textContent = "Failed to copy";
+              copyButton.style.background = "#ffcccc";
+              setTimeout(() => {
+                copyButton.textContent = "Copy";
+                copyButton.style.background = "";
+              }, 2e3);
+            }
+          });
+        }
+      });
+    }
+  };
+  window.RetroCodeCopy = RetroCodeCopy;
+
+  // src/js/infinite-scroll.js
+  var RetroInfiniteScroll = {
+    isLoading: false,
+    page: 1,
+    itemsPerPage: 5,
+    maxPages: 5,
+    // For demo purposes
+    init() {
+      const containers = document.querySelectorAll(".retro-infinite-scroll");
+      if (!containers.length) return;
+      containers.forEach((container) => {
+        this.appendItems(container, 1);
+        container.addEventListener("scroll", () => {
+          if (this.isNearBottom(container) && !this.isLoading && this.page < this.maxPages) {
+            this.loadMoreItems(container);
+          }
+        });
+      });
+    },
+    isNearBottom(container) {
+      return container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+    },
+    loadMoreItems(container) {
+      const loader = container.querySelector(".retro-infinite-loader");
+      this.isLoading = true;
+      if (loader) loader.style.display = "flex";
+      setTimeout(() => {
+        this.page++;
+        this.appendItems(container, this.page);
+        this.isLoading = false;
+        if (loader) loader.style.display = "none";
+        if (this.page >= this.maxPages) {
+          const endMessage = document.createElement("div");
+          endMessage.className = "retro-infinite-end";
+          endMessage.textContent = "End of content";
+          endMessage.style.textAlign = "center";
+          endMessage.style.padding = "20px";
+          endMessage.style.color = "var(--retro-border-medium)";
+          container.appendChild(endMessage);
+        }
+      }, 800);
+    },
+    appendItems(container, page) {
+      const loader = container.querySelector(".retro-infinite-loader");
+      for (let i = 1; i <= this.itemsPerPage; i++) {
+        const itemIndex = (page - 1) * this.itemsPerPage + i;
+        const item = document.createElement("div");
+        item.className = "retro-card retro-mb-3";
+        const card = `
+        <div class="retro-card-header">
+          Item ${itemIndex}
+        </div>
+        <div class="retro-card-content">
+          <p>This is demo content for infinite scroll. Scroll down to load more items.</p>
+          <div class="retro-progress" style="margin-top: 10px;">
+            <div class="retro-progress-bar" style="width: ${Math.floor(
+          Math.random() * 100
+        )}%;"></div>
+          </div>
+        </div>
+      `;
+        item.innerHTML = card;
+        if (loader) {
+          container.insertBefore(item, loader);
+        } else {
+          container.appendChild(item);
+        }
+      }
+    }
+  };
+  window.RetroInfiniteScroll = RetroInfiniteScroll;
+
+  // src/js/table-responsive.js
+  document.addEventListener("DOMContentLoaded", function() {
+    document.querySelectorAll("table.retro-table").forEach(function(table) {
+      if (!table.parentElement.classList.contains("retro-table-responsive")) {
+        var wrapper = document.createElement("div");
+        wrapper.className = "retro-table-responsive";
+        table.parentNode.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+      }
+    });
+  });
+
+  // src/js/sidebar.js
+  var RetroSidebar = {
+    // Configuration
+    config: {
+      sidebarSelector: ".retro-sidebar",
+      toggleSelector: ".retro-sidebar-toggle",
+      overlaySelector: ".retro-sidebar-overlay",
+      activeClass: "active",
+      mobileBreakpoint: 768,
+      transitionDuration: 300,
+      // ms
+      bodyOpenClass: "sidebar-open"
+    },
+    // State
+    isOpen: false,
+    // Initialize the sidebar
+    init() {
+      const sidebar = document.querySelector(this.config.sidebarSelector);
+      if (!sidebar) return;
+      sidebar.setAttribute("role", "navigation");
+      sidebar.setAttribute("aria-label", "Sidebar Navigation");
+      this.setupLinks(sidebar);
+      this.setupMobile();
+      this.setupScrollTracking();
+      this.setupResizeHandler();
+      this.setActiveLink();
+    },
+    // Setup sidebar links
+    setupLinks(sidebar) {
+      const sidebarLinks = sidebar.querySelectorAll("a");
+      sidebarLinks.forEach((link) => {
+        link.addEventListener("focus", () => {
+          link.style.outline = "1px dotted var(--retro-primary)";
+        });
+        link.addEventListener("blur", () => {
+          link.style.outline = "";
+        });
+        if (link.getAttribute("href")?.startsWith("#")) {
+          link.addEventListener("click", (e) => {
+            const targetId = link.getAttribute("href");
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+              e.preventDefault();
+              targetElement.scrollIntoView({
+                behavior: "smooth",
+                block: "start"
+              });
+              history.pushState(null, "", targetId);
+              this.setActiveLink(link);
+              if (window.innerWidth < this.config.mobileBreakpoint) {
+                this.closeSidebar();
+              }
+            }
+          });
+        }
+      });
+    },
+    // Setup mobile functionality
+    setupMobile() {
+      let toggleBtn = document.querySelector(this.config.toggleSelector);
+      if (!toggleBtn) {
+        toggleBtn = document.createElement("button");
+        toggleBtn.className = "retro-sidebar-toggle";
+        toggleBtn.innerHTML = '<div class="retro-sidebar-toggle-icon"><span></span></div>';
+        toggleBtn.setAttribute("aria-label", "Toggle Sidebar");
+        const sidebar = document.querySelector(this.config.sidebarSelector);
+        if (sidebar && sidebar.parentNode) {
+          sidebar.parentNode.insertBefore(toggleBtn, sidebar);
+        }
+      }
+      let overlay = document.querySelector(this.config.overlaySelector);
+      if (!overlay) {
+        overlay = document.createElement("div");
+        overlay.className = "retro-sidebar-overlay";
+        document.body.appendChild(overlay);
+      }
+      toggleBtn.addEventListener("click", () => this.toggleSidebar());
+      overlay.addEventListener("click", () => this.closeSidebar());
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && this.isOpen) {
+          this.closeSidebar();
+        }
+      });
+    },
+    // Toggle the sidebar open/closed
+    toggleSidebar() {
+      const sidebar = document.querySelector(this.config.sidebarSelector);
+      const overlay = document.querySelector(this.config.overlaySelector);
+      if (!sidebar || !overlay) return;
+      if (this.isOpen) {
+        this.closeSidebar();
+      } else {
+        sidebar.classList.add(this.config.activeClass);
+        overlay.classList.add(this.config.activeClass);
+        document.body.classList.add(this.config.bodyOpenClass);
+        this.isOpen = true;
+      }
+    },
+    // Close the sidebar
+    closeSidebar() {
+      const sidebar = document.querySelector(this.config.sidebarSelector);
+      const overlay = document.querySelector(this.config.overlaySelector);
+      if (!sidebar || !overlay) return;
+      sidebar.classList.remove(this.config.activeClass);
+      overlay.classList.remove(this.config.activeClass);
+      document.body.classList.remove(this.config.bodyOpenClass);
+      this.isOpen = false;
+    },
+    // Setup scroll position tracking
+    setupScrollTracking() {
+      const sidebar = document.querySelector(this.config.sidebarSelector);
+      if (!sidebar) return;
+      window.addEventListener("scroll", () => {
+        this.updateActiveOnScroll();
+      });
+    },
+    // Update active link based on scroll position
+    updateActiveOnScroll() {
+      const sections = document.querySelectorAll("section[id], div[id]");
+      if (sections.length === 0) return;
+      let currentSection = null;
+      let maxVisiblePercentage = 0;
+      sections.forEach((section) => {
+        const rect = section.getBoundingClientRect();
+        const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
+        if (isVisible) {
+          const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
+          const visiblePercentage = visibleHeight / rect.height;
+          if (visiblePercentage > maxVisiblePercentage) {
+            maxVisiblePercentage = visiblePercentage;
+            currentSection = section;
+          }
+        }
+      });
+      if (currentSection) {
+        const id = currentSection.getAttribute("id");
+        const link = document.querySelector(`.retro-sidebar a[href="#${id}"]`);
+        if (link) {
+          this.setActiveLink(link);
+        }
+      }
+    },
+    // Set active link
+    setActiveLink(activeLink = null) {
+      const sidebar = document.querySelector(this.config.sidebarSelector);
+      if (!sidebar) return;
+      if (!activeLink) {
+        const hash = window.location.hash;
+        if (hash) {
+          activeLink = sidebar.querySelector(`a[href="${hash}"]`);
+        } else {
+          const currentPath = window.location.pathname;
+          activeLink = sidebar.querySelector(`a[href="${currentPath}"]`) || sidebar.querySelector("a");
+        }
+      }
+      sidebar.querySelectorAll("a").forEach((link) => {
+        link.classList.remove(this.config.activeClass);
+      });
+      if (activeLink) {
+        activeLink.classList.add(this.config.activeClass);
+      }
+    },
+    // Setup resize handler
+    setupResizeHandler() {
+      window.addEventListener("resize", () => {
+        if (window.innerWidth >= this.config.mobileBreakpoint && this.isOpen) {
+          this.closeSidebar();
+        }
+      });
+    }
+  };
+  window.RetroSidebar = RetroSidebar;
+
+  // src/js/datetime.js
+  (function() {
+    document.querySelectorAll('input[type="date"], input[type="time"]').forEach(function(input) {
+      input.addEventListener("change", function() {
+        if (window.RetroCSS && RetroCSS.toast) {
+          RetroCSS.toast.show("Selected: " + input.value, { type: "info" });
+        }
+      });
+    });
+  })();
+
+  // src/js/retro.js
+  var RetroCSS2 = {
+    modal: modal_default,
+    toast: toast_default,
+    form: form_default,
+    table: table_default,
+    dropdown: dropdown_default,
+    fileUpload: file_upload_default,
+    events: events_default,
+    // Add references to standalone modules from the window object
+    carousel: window.RetroCarousel,
+    accordion: window.RetroAccordion,
+    tabs: window.RetroTabs,
+    infiniteScroll: window.RetroInfiniteScroll,
+    // Store theme preference
+    theme: localStorage.getItem("retro-theme") || "light",
+    // Initialize all components
+    init() {
+      console.log("RetroCSS initializing components...");
+      modal_default.init();
+      dropdown_default.init();
+      form_default.init();
+      table_default.init();
+      file_upload_default.init();
+      if (window.RetroCarousel && typeof window.RetroCarousel.init === "function") {
+        window.RetroCarousel.init();
+        console.log("Carousel initialized");
+      } else {
+        console.warn("RetroCarousel not available");
+      }
+      if (window.RetroTabsInit && typeof window.RetroTabsInit.init === "function") {
+        window.RetroTabsInit.init();
+        console.log("Tabs initialized");
+      }
+      if (window.RetroAccordion && typeof window.RetroAccordion.init === "function") {
+        window.RetroAccordion.init();
+        console.log("Accordion initialized");
+      }
+      if (window.RetroInfiniteScroll && typeof window.RetroInfiniteScroll.init === "function") {
+        window.RetroInfiniteScroll.init();
+        console.log("Infinite Scroll initialized");
+      }
+      document.querySelectorAll("[data-retro-modal]").forEach((trigger) => {
+        trigger.addEventListener("click", (e) => {
+          e.preventDefault();
+          const modalId = trigger.getAttribute("data-retro-modal");
+          modal_default.show(modalId);
+        });
+      });
+      this.initTooltips();
+      this.initToastTriggers();
+      this.initSearchBars();
+      this.initTagInputs();
+      this.initThemeToggle();
+      this.applyTheme(this.theme);
+      events_default.emit("init", { timestamp: Date.now() });
+      this.initRatingStars();
+      return this;
+    },
+    // Custom tooltip implementation
+    initTooltips() {
+      const tooltipTriggers = document.querySelectorAll("[data-retro-tooltip]");
+      tooltipTriggers.forEach((trigger) => {
+        const content = trigger.getAttribute("data-retro-tooltip");
+        if (!content) return;
+        const position = trigger.getAttribute("data-tooltip-position") || "top";
+        const variant = trigger.getAttribute("data-tooltip-variant") || "";
+        const tooltip = document.createElement("div");
+        tooltip.className = `retro-tooltip retro-tooltip-${position}`;
+        if (variant) tooltip.classList.add(`retro-tooltip-${variant}`);
+        tooltip.textContent = content;
+        const existingTooltip = trigger.querySelector(".retro-tooltip");
+        if (existingTooltip) existingTooltip.remove();
+        trigger.style.position = "relative";
+        trigger.appendChild(tooltip);
+        trigger.addEventListener("mouseenter", () => {
+          tooltip.classList.add("show");
+        });
+        trigger.addEventListener("mouseleave", () => {
+          tooltip.classList.remove("show");
+        });
+      });
+      console.log("Tooltips initialized:", tooltipTriggers.length);
+    },
+    // Initialize toast trigger elements
+    initToastTriggers() {
+      const toastTriggers = document.querySelectorAll("[data-retro-toast]");
+      toastTriggers.forEach((trigger) => {
+        trigger.addEventListener("click", () => {
+          const message = trigger.getAttribute("data-retro-toast");
+          const type = trigger.getAttribute("data-retro-toast-type") || "";
+          const duration = parseInt(trigger.getAttribute("data-retro-toast-duration")) || 3e3;
+          const html = trigger.hasAttribute("data-retro-toast-html");
+          toast_default.show(message, {
+            type,
+            duration,
+            html
+          });
+          if (message === "Stacked Toast 1") {
+            setTimeout(() => {
+              toast_default.show("Stacked Toast 2", { type: "primary" });
+              setTimeout(() => {
+                toast_default.show("Stacked Toast 3", { type: "success" });
+              }, 600);
+            }, 600);
+          }
+        });
+      });
+      console.log("Toast triggers initialized:", toastTriggers.length);
+    },
+    // Initialize search bar components
+    initSearchBars() {
+      const searchBars = document.querySelectorAll(".retro-search-bar");
+      searchBars.forEach((searchBar) => {
+        const input = searchBar.querySelector(".retro-search-input");
+        const suggestions = searchBar.querySelector(".retro-search-suggestions");
+        if (!input) return;
+        input.addEventListener("focus", () => {
+          if (suggestions) {
+            searchBar.classList.add("active");
+          }
+        });
+        document.addEventListener("click", (e) => {
+          if (!searchBar.contains(e.target)) {
+            searchBar.classList.remove("active");
+          }
+        });
+        if (suggestions) {
+          const suggestionItems = suggestions.querySelectorAll(".retro-search-suggestion");
+          suggestionItems.forEach((item) => {
+            item.addEventListener("click", () => {
+              input.value = item.textContent;
+              searchBar.classList.remove("active");
+              input.dispatchEvent(new Event("change", { bubbles: true }));
+              input.focus();
+            });
+          });
+        }
+        input.addEventListener("input", () => {
+          if (!suggestions) return;
+          const value = input.value.trim().toLowerCase();
+          suggestions.innerHTML = "";
+          if (value) {
+            const demoItems = [
+              `${value} - Result 1`,
+              `${value} - Result 2`,
+              `${value} - Result 3`
+            ];
+            demoItems.forEach((item) => {
+              const suggestion = document.createElement("div");
+              suggestion.className = "retro-search-suggestion";
+              suggestion.textContent = item;
+              suggestion.addEventListener("click", () => {
+                input.value = item;
+                searchBar.classList.remove("active");
+                input.focus();
+              });
+              suggestions.appendChild(suggestion);
+            });
+            searchBar.classList.add("active");
+          } else {
+            searchBar.classList.remove("active");
+          }
+        });
+      });
+      console.log("Search bars initialized:", searchBars.length);
+    },
+    // Initialize tag input components
+    initTagInputs() {
+      const tagInputs = document.querySelectorAll(".retro-tag-input");
+      tagInputs.forEach((container) => {
+        const tagsContainer = container.querySelector(".retro-tags");
+        const input = container.querySelector(".retro-tag-text");
+        if (!tagsContainer || !input) return;
+        const tags = [];
+        tagsContainer.querySelectorAll(".retro-tag").forEach((tag) => {
+          const tagText = tag.textContent.replace("\xD7", "").trim();
+          tags.push(tagText);
+          const removeBtn = tag.querySelector(".retro-tag-remove");
+          if (removeBtn) {
+            removeBtn.addEventListener("click", () => {
+              tag.remove();
+              const index = tags.indexOf(tagText);
+              if (index > -1) {
+                tags.splice(index, 1);
+              }
+            });
+          }
+        });
+        const addTag = (tagText) => {
+          if (!tagText || tags.includes(tagText)) {
+            input.value = "";
+            return;
+          }
+          tags.push(tagText);
+          const tag = document.createElement("span");
+          tag.className = "retro-tag";
+          tag.textContent = tagText;
+          const removeBtn = document.createElement("span");
+          removeBtn.className = "retro-tag-remove";
+          removeBtn.textContent = "\xD7";
+          removeBtn.addEventListener("click", () => {
+            tag.remove();
+            const index = tags.indexOf(tagText);
+            if (index > -1) {
+              tags.splice(index, 1);
+            }
+          });
+          tag.appendChild(removeBtn);
+          tagsContainer.appendChild(tag);
+          input.value = "";
+        };
+        input.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === ",") {
+            e.preventDefault();
+            const tagText = input.value.trim().replace(",", "");
+            addTag(tagText);
+          }
+        });
+        input.addEventListener("blur", () => {
+          const tagText = input.value.trim();
+          if (tagText) {
+            addTag(tagText);
+          }
+        });
+      });
+      console.log("Tag inputs initialized:", tagInputs.length);
+    },
+    // Initialize theme toggle button
+    initThemeToggle() {
+      const themeToggles = document.querySelectorAll(".retro-theme-toggle");
+      themeToggles.forEach((toggle) => {
+        toggle.addEventListener("click", () => {
+          this.theme = this.theme === "light" ? "dark" : "light";
+          this.applyTheme(this.theme);
+          localStorage.setItem("retro-theme", this.theme);
+          toast_default.show(`Theme switched to ${this.theme} mode!`, {
+            type: this.theme === "dark" ? "primary" : "light"
+          });
+        });
+      });
+      console.log("Theme toggles initialized:", themeToggles.length);
+    },
+    // Apply theme to document
+    applyTheme(theme) {
+      if (theme === "dark") {
+        document.documentElement.setAttribute("data-theme", "dark");
+      } else {
+        document.documentElement.removeAttribute("data-theme");
+      }
+    },
+    // Interactive rating stars
+    initRatingStars() {
+      const ratings = document.querySelectorAll(".retro-rating");
+      ratings.forEach((rating) => {
+        const stars = rating.querySelectorAll(".retro-rating-star");
+        let selected = -1;
+        if (rating.hasAttribute("data-rating")) {
+          selected = parseInt(rating.getAttribute("data-rating")) - 1;
+          stars.forEach((star, i) => {
+            if (i <= selected) star.classList.add("selected");
+          });
+        }
+        stars.forEach((star, idx) => {
+          star.addEventListener("mouseenter", () => {
+            stars.forEach((s, i) => {
+              s.classList.toggle("active", i <= idx);
+            });
+          });
+          star.addEventListener("mouseleave", () => {
+            stars.forEach((s) => s.classList.remove("active"));
+          });
+          star.addEventListener("click", () => {
+            selected = idx;
+            stars.forEach((s, i) => {
+              s.classList.toggle("selected", i <= idx);
+            });
+            rating.setAttribute("data-rating", idx + 1);
+            rating.dispatchEvent(new CustomEvent("retro:rating", { detail: { rating: idx + 1 } }));
+          });
+        });
+      });
+      console.log("Rating stars initialized:", ratings.length);
+    }
+  };
+  window.RetroCSS = RetroCSS2;
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => RetroCSS2.init());
+  } else {
+    RetroCSS2.init();
+  }
+  var retro_default = RetroCSS2;
+  return __toCommonJS(retro_exports);
+})();