@dodlhuat/basix 1.0.0 → 1.1.0

package/js/index.js

@@ -1,720 +1,718 @@
-import { utils } from "./utils.js";
-import { Scrollbar } from "./scrollbar.js";
-import { Modal } from "./modal.js";
-import { PushMenu } from "./push-menu.js";
-import { Toast } from "./toast.js";
-import { DatePicker } from "./datepicker.js";
-import { Theme } from "./theme.js";
-import { Table } from "./table.js";
-import { FlyoutMenu } from "./flyout-menu.js";
-import { Tabs } from "./tabs.js";
-import { Carousel } from "./carousel.js";
-import { CodeViewer } from "./code-viewer.js";
-import { FileUploader } from "./file-uploader.js";
-import { TreeComponent, TreeNode } from "./tree.js";
-import { MasonryGallery } from "./gallery.js";
-import { Tooltip } from "./tooltip.js";
-import { Dropdown } from "./dropdown.js";
-import { VirtualDropdown } from "./virtual-dropdown.js";
-import { TimeSpanPicker } from "./timepicker.js";
-// Generate sample table data
-const generateData = (count) => {
-    const data = [];
-    const firstNames = [
-        "John",
-        "Jane",
-        "Mike",
-        "Sarah",
-        "Robert",
-        "Emily",
-        "David",
-        "Emma",
-        "James",
-        "Olivia",
-    ];
-    const lastNames = [
-        "Smith",
-        "Johnson",
-        "Williams",
-        "Brown",
-        "Jones",
-        "Garcia",
-        "Miller",
-        "Davis",
-        "Rodriguez",
-        "Martinez",
-    ];
-    const roles = ["Admin", "User", "Editor", "Viewer", "Manager", "Developer"];
-    const statuses = ["Active", "Inactive", "Pending", "Banned"];
-    for (let i = 1; i <= count; i++) {
-        const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
-        const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
-        const role = roles[Math.floor(Math.random() * roles.length)];
-        const status = statuses[Math.floor(Math.random() * statuses.length)];
-        const lastLoginDate = new Date(Date.now() - Math.floor(Math.random() * 10000000000));
-        data.push({
-            id: i,
-            name: `${firstName} ${lastName}`,
-            email: `user${i}@example.com`,
-            role,
-            status,
-            lastLogin: lastLoginDate.toLocaleDateString(),
-        });
-    }
-    return data;
-};
-// Initialize all components when DOM is ready
-utils.ready(() => {
-    // Initialize scrollbars
-    Scrollbar.initAll(".scroll-container");
-    // Initialize theme
-    Theme.init();
-    // Initialize horizontal tabs
-    const horizontalTabs = new Tabs(".horizontal", {
-        layout: "horizontal",
-    });
-    // Initialize vertical tabs
-    const verticalTabs = new Tabs(".vertical", {
-        layout: "vertical",
-    });
-    // Initialize carousel
-    const carousel = new Carousel("#carouselIdHere", {
-        loop: true,
-    });
-    // Initialize advanced table with data
-    const columns = [
-        { key: "id", label: "ID" },
-        { key: "name", label: "Name" },
-        { key: "email", label: "Email" },
-        { key: "role", label: "Role" },
-        { key: "status", label: "Status" },
-        { key: "lastLogin", label: "Last Login" },
-    ];
-    const tableData = generateData(50);
-    new Table("#demo-table-js", {
-        data: tableData,
-        columns: columns,
-        pageSize: 10,
-    });
-    // Initialize modal
-    const modalTrigger = document.querySelector(".show-modal");
-    if (modalTrigger) {
-        modalTrigger.addEventListener("click", () => {
-            const buttons = '<div class="buttons"><button class="button-light">Close</button>&nbsp;<button>Save Changes</button></div>';
-            const modal = new Modal("bluffi", "<strong>blaffi</strong>", buttons, true, "default");
-            modal.show();
-            console.warn("Buttons have no bound listeners");
-        });
-    }
-    // Initialize toast
-    const toastTrigger = document.querySelector(".show-toast");
-    if (toastTrigger) {
-        toastTrigger.addEventListener("click", () => {
-            const toast = new Toast("some content. maybe even more text in here!", "some header", "success", true);
-            toast.show(3000);
-        });
-    }
-    // Initialize push menu
-    PushMenu.init();
-    // Initialize flyout menu
-    const menu = new FlyoutMenu({
-        direction: "right",
-        triggerSelector: ".trigger-flyout-menu",
-    });
-    // Flyout menu controls: Switch direction
-    const directionBtns = document.querySelectorAll(".flyout-controls > button");
-    directionBtns.forEach((btn) => {
-        btn.addEventListener("click", () => {
-            // Remove active class from all buttons
-            directionBtns.forEach((b) => b.classList.remove("active"));
-            // Add active class to clicked button
-            btn.classList.add("active");
-            // Update menu direction
-            const direction = btn.dataset.direction;
-            if (direction) {
-                menu.setDirection(direction);
-            }
-        });
-    });
-    new DatePicker("#datepicker-single", {
-        mode: "single",
-        onSelect: (date) => {
-            console.log("Single selected:", date);
-        },
-    });
-    new DatePicker("#datepicker-time", {
-        mode: "single",
-        timePicker: true,
-        onSelect: (date) => {
-            console.log("Single selected:", date);
-        },
-    });
-    new DatePicker("#datepicker-range", {
-        mode: "range",
-        onSelect: (range) => {
-            console.log("Range selected:", range);
-        },
-    });
-    new DatePicker("#datepicker-localized", {
-        mode: "single",
-        startDay: 1, // Monday
-        locales: {
-            days: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
-            months: [
-                "Enero",
-                "Febrero",
-                "Marzo",
-                "Abril",
-                "Mayo",
-                "Junio",
-                "Julio",
-                "Agosto",
-                "Septiembre",
-                "Octubre",
-                "Noviembre",
-                "Diciembre",
-            ],
-        },
-        format: (date) => {
-            return date.toLocaleDateString("es-ES", {
-                weekday: "long",
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-            });
-        },
-        onSelect: (date) => {
-            console.log("Localized selected:", date);
-        },
-    });
-    // Initialize code viewer with usage example
-    const usageTabs = `new Tabs('.horizontal', {
-    layout: 'horizontal',
-    defaultTab: 0
-});`;
-    new CodeViewer("#usage-tabs", usageTabs, "js");
-    // Initialize file uploader
-    const uploaderElement = document.querySelector(".uploader-content");
-    if (uploaderElement) {
-        new FileUploader(uploaderElement);
-    }
-    const sampleData = [
-        new TreeNode("Documents", "folder", [
-            new TreeNode("Work", "folder", [
-                new TreeNode("presentation.pptx", "file"),
-                new TreeNode("report.docx", "file"),
-                new TreeNode("budget.xlsx", "file"),
-            ]),
-            new TreeNode("Personal", "folder", [
-                new TreeNode("resume.pdf", "file"),
-                new TreeNode("vacation-photos", "folder", [
-                    new TreeNode("beach.jpg", "file"),
-                    new TreeNode("mountain.jpg", "file"),
-                ]),
-            ]),
-        ]),
-        new TreeNode("Projects", "folder", [
-            new TreeNode("website", "folder", [
-                new TreeNode("index.html", "file"),
-                new TreeNode("styles.css", "file"),
-                new TreeNode("script.js", "file"),
-            ]),
-            new TreeNode("app", "folder", [
-                new TreeNode("src", "folder", [
-                    new TreeNode("main.js", "file"),
-                    new TreeNode("utils.js", "file"),
-                ]),
-                new TreeNode("package.json", "file"),
-            ]),
-        ]),
-        new TreeNode("Downloads", "folder", [
-            new TreeNode("installer.exe", "file"),
-            new TreeNode("readme.txt", "file"),
-        ]),
-        new TreeNode("README.md", "file"),
-    ];
-    const tree = new TreeComponent("#tree-root", sampleData);
-    const batchSize = 12;
-    let indexNumber = 1;
-    const gallery = new MasonryGallery("gallery", {
-        minColumnWidth: 300,
-        fetchFunction: new Promise((resolve) => {
-            setTimeout(() => {
-                const images = [];
-                for (let i = 0; i < batchSize; i++) {
-                    const width = 400;
-                    const height = Math.floor(Math.random() * 301) + 300; // 300-600
-                    const id = Math.floor(Math.random() * 1000);
-                    const imageIndex = indexNumber * batchSize + i;
-                    images.push({
-                        src: `https://picsum.photos/${width}/${height}?random=${imageIndex}`,
-                        title: `Image ${imageIndex + 1}`,
-                        desc: `A random caption for image ${id}`,
-                    });
-                }
-                indexNumber++;
-                resolve(images);
-            }, 800);
-        }),
-    });
-    const dropdown = new Dropdown("#myDropdown");
-    const dropdownElement = document.querySelector("#myDropdown");
-    dropdownElement?.addEventListener("dropdown-select", ((event) => {
-        const { text, element } = event.detail;
-        console.log("User selected:", text);
-        console.log("Selected element:", element);
-    }));
-    const generateItems = (count, prefix) => {
-        return Array.from({ length: count }, (_, i) => ({
-            label: `${prefix} Item ${i + 1}`,
-            value: `${prefix.toLowerCase()}_${i + 1}`,
-        }));
-    };
-    const bigData = generateItems(10000, "Option");
-    const smallData = generateItems(50, "Choice");
-    const singleDropdown = new VirtualDropdown({
-        container: "#dropdown-single",
-        options: bigData,
-        searchable: true,
-        placeholder: "Search 10k items...",
-        renderLimit: 15,
-        onSelect: (val) => {
-            console.log("Single Select:", val);
-        },
-    });
-    const multiDropdown = new VirtualDropdown({
-        container: "#dropdown-multi",
-        options: smallData,
-        searchable: true,
-        multiSelect: true,
-        placeholder: "Choose multiple...",
-        renderLimit: 10,
-        onSelect: (vals) => {
-            console.log("Multi Select:", vals);
-        },
-    });
-    Tooltip.initializeAll();
-    const timeSpanPicker = new TimeSpanPicker('timespan-1', {
-        onChange: (start, end) => {
-            console.log(`Start: ${start}, Ende: ${end}`);
-        }
-    });
-    new CodeViewer("#usage-text-input", `<label for="text-input-demo">Text Input</label>
-<input type="text" id="text-input-demo"/>`, "html");
-    new CodeViewer("#usage-textarea", `<label for="textarea-demo">Text Area</label>
-<textarea id="textarea-demo"></textarea>`, "html");
-    new CodeViewer("#usage-checkbox-demo", `<input class="styled-checkbox"
-    id="checkbox-1"
-    type="checkbox"
-    value="1"
-/>
-<label for="checkbox-1">Checkbox</label>`, "html");
-});
-new CodeViewer("#usage-radiobutton-demo", `<label class="radio-button-container">Three
-    <input type="radio" name="radio"/>
-    <span class="checkmark"></span>
-</label>`, "html");
-new CodeViewer("#usage-switch-demo", `<div class="switch">
-    <input type="checkbox" id="switch"/><label for="switch">Toggle</label>
-</div>`, "html");
-new CodeViewer("#usage-slider-demo", `<label for="range-slider" class="hidden">Slider</label>
-<input
-    type="range"
-    min="1"
-    max="100"
-    value="50"
-    id="range-slider-demo"
-/>`, "html");
-new CodeViewer("#usage-pushmenu-control-demo", `<div class="open-menu">
-    <div class="navigation-controls">
-        <input type="checkbox" id="menu-navigation" class="navigation"/>
-        <label for="menu-navigation">
-            <span class="icon icon-menu"></span>
-        </label>
-    </div>
-</div>`, "html");
-new CodeViewer("#usage-pushmenu-demo", `<nav class="push-menu">
-    <ul>
-        <li>
-            <a onclick="window.Scroll.to('#grid')">Grid</a>
-        </li>
-        <li>
-            <a onclick="window.Scroll.to('#typography')">Typography</a>
-        </li>
-    </ul>
-</nav>`, "html");
-new CodeViewer("#usage-pushmenu-script-demo", `PushMenu.init();`, "js");
-new CodeViewer("#usage-flyout-script-demo", `const menu = new FlyoutMenu({
-  direction: "right",
-  triggerSelector: ".trigger-flyout-menu",
-});`, "js");
-new CodeViewer("#usage-flyout-demo", `<div class="flyout-overlay" id="flyoutOverlay"></div>
-<div class="flyout-menu" id="flyoutMenu">
-    <ul>
-        <li><a href="#">Home</a></li>
-        <li>
-            About
-            <ul>
-                <li><a href="#">Our Story</a></li>
-                <li><a href="#">Team</a></li>
-                <li><a href="#">Careers</a></li>
-            </ul>
-        </li>
-        <li>
-            Services
-            <ul>
-                <li>
-                    Web Design
-                    <ul>
-                        <li><a href="#">eCommerce</a></li>
-                        <li><a href="#">Landing Pages</a></li>
-                        <li><a href="#">Portfolios</a></li>
-                    </ul>
-                </li>
-                <li><a href="#">Development</a></li>
-                <li><a href="#">SEO</a></li>
-            </ul>
-        </li>
-        <li><a href="#">Portfolio</a></li>
-        <li><a href="#">Contact</a></li>
-    </ul>
-</div>`, "html");
-new CodeViewer("#usage-dropdown-menu-demo", `<div class="dropdown-container" id="myDropdown">
-  <button class="dropdown-trigger">Select Option</button>
-  <ul class="dropdown-menu">
-    <li>
-      <div class="dropdown-item">Profile</div>
-    </li>
-    <li>
-      <div class="dropdown-item">Settings</div>
-      <ul>
-        <li>
-          <div class="dropdown-item">Account</div>
-        </li>
-        <li>
-          <div class="dropdown-item">Privacy</div>
-          <ul>
-            <li>
-              <div class="dropdown-item">Public</div>
-            </li>
-            <li>
-              <div class="dropdown-item">Private</div>
-            </li>
-            <li>
-              <div class="dropdown-item">Friends Only</div>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <div class="dropdown-item">Notifications</div>
-        </li>
-      </ul>
-    </li>
-    <li>
-      <div class="dropdown-item">Help</div>
-    </li>
-    <li>
-      <div class="dropdown-item">Logout</div>
-    </li>
-  </ul>
-</div>`, "html");
-new CodeViewer("#usage-dropdown-menu-js-demo", `const dropdown = new Dropdown("#myDropdown");
-const dropdownElement = document.querySelector("#myDropdown");
-dropdownElement?.addEventListener("dropdown-select", ((
-  event: CustomEvent<DropdownSelectDetail>,
-) => {
-  const { text, element } = event.detail;
-  console.log("User selected:", text);
-  console.log("Selected element:", element);
-}) as EventListener);`, "js");
-new CodeViewer("#usage-modal-demo", `const modal = new Modal(
-  "content",
-  "<strong>header</strong>",
-  "controls",
-  true,
-  "default",
-);
-modal.show();`, "js");
-new CodeViewer("#usage-toast-demo", `const toast = new Toast(
-    "some content. maybe even more text in here!",
-    "some header",
-    "success",
-    true,
-  );
-  toast.show(3000);`, "js");
-new CodeViewer("#usage-tooltip-demo", `<button class="tooltip-trigger" data-tooltip="This is a simple tooltip">
-  Simple Tooltip
-</button>`, "html");
-new CodeViewer("#usage-tooltip-js-demo", `Tooltip.initializeAll();`, "js");
-new CodeViewer("#usage-spinner-demo", `<div class="spinner"></div>`, "html");
-new CodeViewer("#usage-loading-demo", `<div class="loading"></div>`, "html");
-new CodeViewer("#usage-alerts-demo", `<div class="alert alert-default">
-    <strong>Default:</strong> This is a default alert message.
-</div>`, "html");
-new CodeViewer("#usage-chips-demo", `<div class="chips">
-  <div class="chip">Example Chip</div>
-  <div class="chip clickable">Example Chip with hover</div>
-  <div class="chip closeable">
-    Example Chip with closure
-    <button class="close">
-      <span class="icon icon-close"></span>
-    </button>
-  </div>
-</div>`, "html");
-new CodeViewer("#usage-accordion-demo", `<div class="accordion">
-  <div class="accordion-item">
-    <input
-      type="radio"
-      name="accordion"
-      id="acc1"
-      class="accordion-input"
-      checked
-    />
-    <label for="acc1" class="accordion-label"> What is this? </label>
-    <div class="accordion-content">
-      <div class="accordion-body">
-        <div>
-          <p>
-            This is a pure CSS accordion component. It uses the "Radio
-            Button Hack" to manage state without a single line of
-            JavaScript.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="accordion-item">
-    <input
-      type="radio"
-      name="accordion"
-      id="acc2"
-      class="accordion-input"
-    />
-    <label for="acc2" class="accordion-label"> How does it work? </label>
-    <div class="accordion-content">
-      <div class="accordion-body">
-        <div>
-          <p>It links label elements to hidden radio buttons.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="accordion-item">
-    <input
-      type="radio"
-      name="accordion"
-      id="acc3"
-      class="accordion-input"
-    />
-    <label for="acc3" class="accordion-label"> Is it accessible? </label>
-    <div class="accordion-content">
-      <div class="accordion-body">
-        <div>
-          <p>
-            It's reasonably accessible as it uses semantic form elements.
-            Users can tab through the headers (radio inputs) and select
-            them with the keyboard. However, for full ARIA support, a
-            small amount of JS is usually recommended to manage
-            aria-expanded attributes.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>`, "html");
-new CodeViewer("#usage-timeline-demo", `<div class="timeline">
-  <div class="timeline-item active">
-    <div class="timeline-content">
-      <span class="timeline-date">October 12, 2023</span>
-      <h3 class="timeline-title">Project Kickoff</h3>
-      <p class="timeline-body">
-        Initial meeting with shareholders to discuss the scope and
-        requirements of the project. Team roles were assigned and the
-        roadmap was drafted.
-      </p>
-    </div>
-  </div>
-  <div class="timeline-item">
-    <div class="timeline-content">
-      <span class="timeline-date">January 15, 2024</span>
-      <h3 class="timeline-title">Beta Launch</h3>
-      <p class="timeline-body">
-        Opened the platform to a closed beta group of 500 users. Collected
-        feedback regarding the onboarding flow and notification settings.
-      </p>
-    </div>
-  </div>
-</div>`, "html");
-new CodeViewer("#usage-progress-bar-demo", `<div class="progress-bar">
-  <div class="progress" style="height: 24px; width: 50%"></div>
-</div>`, "html");
-new CodeViewer("#usage-placeholder-demo", `<span class="placeholder w-6">`, "html");
-new CodeViewer("#usage-table-demo", `const columns: TableColumn[] = [
-  { key: "id", label: "ID" },
-  { key: "name", label: "Name" },
-];
-const tableData: TableRow[] = [
-  { id: 1, name: "John Doe" },
-  { id: 2, name: "Jane Smith" },
-  { id: 3, name: "Mike Johnson" },
-];
-new Table("#demo-table-js", {
-  data: tableData,
-  columns: columns,
-  pageSize: 10,
-});
-
-// Initialize basic table from html data
-new Table("#demo-table", { pageSize: 5 });`, "js");
-new CodeViewer("#usage-datepicker-html-demo", `<label for="datepicker-range">Datepicker Range</label>
-<input
-  type="text"
-  id="datepicker-range"
-  class="datepicker-input"
-  placeholder="Select a date range"
-  readonly
-/>`, "html");
-new CodeViewer("#usage-datepicker-js-demo", `new DatePicker("#datepicker-single", {
-  mode: "single",
-  onSelect: (date) => {
-    console.log("Single selected:", date);
-  },
-});`, "js");
-new CodeViewer("#usage-tree-demo-html", `<ul id="tree-root" class="tree"></ul>`, "html");
-new CodeViewer("#usage-tree-demo-js", `const sampleData: TreeNode[] = [
-    new TreeNode("Documents", "folder", [
-      new TreeNode("Work", "folder", [
-        new TreeNode("presentation.pptx", "file"),
-        new TreeNode("report.docx", "file"),
-        new TreeNode("budget.xlsx", "file"),
-      ]),
-      new TreeNode("Personal", "folder", [
-        new TreeNode("resume.pdf", "file"),
-        new TreeNode("vacation-photos", "folder", [
-          new TreeNode("beach.jpg", "file"),
-          new TreeNode("mountain.jpg", "file"),
-        ]),
-      ]),
-    ]),
-  ];
-  const tree = new TreeComponent("#tree-root", sampleData);`, "js");
-new CodeViewer("#usage-file-uploader-demo", `<div class="uploader-content">
-        <div class="header">
-            <h2>Upload Files</h2>
-            <p>Select or drag files to upload</p>
-        </div>
-        <div id="drop-zone" class="drop-zone">
-            <input type="file" id="file-input" multiple hidden/>
-            <div class="drop-zone-content">
-                <div class="icon-container">
-                    <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class="upload-icon"
-                    >
-                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                        <polyline points="17 8 12 3 7 8"></polyline>
-                        <line x1="12" y1="3" x2="12" y2="15"></line>
-                    </svg>
-                </div>
-                <p class="primary-text">Click to upload or drag and drop</p>
-                <p class="secondary-text">
-                    SVG, PNG, JPG or GIF (max. 800x400px)
-                </p>
-            </div>
-        </div>
-
-        <div id="file-list" class="file-list"></div>
-
-        <div class="actions">
-            <button id="upload-btn" disabled>Upload Files</button>
-        </div>
-    </div>`, "html");
-new CodeViewer("#usage-file-uploader-demo-js", `const uploaderElement =
-    document.querySelector<HTMLElement>(".uploader-content");
-  if (uploaderElement) {
-    new FileUploader(uploaderElement);
-  }`, "js");
-new CodeViewer("#usage-virtual-dropdown-demo-html", `<div class="virtual-dropdown">
-                <h2>1. Searchable Single Select (10,000 items)</h2>
-                <p>
-                    This list uses virtual scrolling to handle 10k items efficiently.
-                </p>
-                <div id="dropdown-single"></div>
-            </div>`, "html");
-new CodeViewer("#usage-virtual-dropdown-demo-js", `const singleDropdown = new VirtualDropdown({
-    container: "#dropdown-single",
-    options: bigData,
-    searchable: true,
-    placeholder: "Search 10k items...",
-    renderLimit: 15,
-    onSelect: (val) => {
-      console.log("Single Select:", val);
-    },
-  });`, "js");
-new CodeViewer("#usage-scrollbar-demo", `Scrollbar.initAll(".scroll-container");`, "js");
-new CodeViewer("#usage-theme-demo", `Theme.init();`, "js");
-new CodeViewer("#usage-scroll-demo", `window.Scroll.to('#grid')`, "js");
-new CodeViewer("#usage-chat-demo-html", `<div class="chat-container">
-                <div class="message message-incoming">
-                    Hi there! How are you doing today?
-                    <span class="message-meta">10:42 AM</span>
-                </div>
-                <div class="message message-outgoing">
-                    I'm doing great, thanks! Just working on some new CSS
-                    components.<br/>And other stuff.
-                    <span class="message-meta">10:43 AM</span>
-                </div>
-                <div class="message message-outgoing">
-                    Trying to make a simple chat UI.
-                    <span class="message-meta">10:43 AM</span>
-                </div>
-                <div class="message message-incoming">
-                    That sounds cool!
-                    <span class="message-meta">10:45 AM</span>
-                </div>
-            </div>`, "html");
-new CodeViewer("#usage-carousel-demo-html", `<div class="carousel" id="carouselIdHere">
-                <div>Slide 1</div>
-                <div>Slide 2</div>
-                <div>Slide 3</div>
-                <div>Slide 4</div>
-            </div>`, "html");
-new CodeViewer("#usage-carousel-demo-js", `const carousel = new Carousel("#carouselIdHere", {
-    loop: true,
-  });`, "js");
-new CodeViewer("#usage-gallery-demo-html", `<div id="gallery" class="masonry-container"></div>
-            <div class="loader hidden">
-                <div class="spinner"></div>
-            </div>`, "html");
-new CodeViewer("#usage-gallery-demo-js", `const gallery = new MasonryGallery("gallery", {
-    minColumnWidth: 300,
-    fetchFunction: new Promise((resolve) => {
-      setTimeout(() => {
-        const images: ImageData[] = [];
-
-        for (let i = 0; i < batchSize; i++) {
-          const width = 400;
-          const height = Math.floor(Math.random() * 301) + 300;
-          const id = Math.floor(Math.random() * 1000);
-          const imageIndex = indexNumber * batchSize + i;
-
-          images.push({
-            src: \`https://picsum.photos/$\{width}/$\{height}?random=$\{imageIndex}\`,
-            title: \`Image $\{imageIndex + 1}\`,
-            desc: \`A random caption for image $\{id}\`,
-          });
-        }
-
-        indexNumber++;
-        resolve(images);
-      }, 800);
-    }),
-  });`, "js");
+import { utils } from "./utils.js";
+import { Scrollbar } from "./scrollbar.js";
+import { Modal } from "./modal.js";
+import { PushMenu } from "./push-menu.js";
+import { Toast } from "./toast.js";
+import { DatePicker } from "./datepicker.js";
+import { Theme } from "./theme.js";
+import { Table } from "./table.js";
+import { FlyoutMenu } from "./flyout-menu.js";
+import { Tabs } from "./tabs.js";
+import { Carousel } from "./carousel.js";
+import { CodeViewer } from "./code-viewer.js";
+import { FileUploader } from "./file-uploader.js";
+import { TreeComponent, TreeNode } from "./tree.js";
+import { MasonryGallery } from "./gallery.js";
+import { Tooltip } from "./tooltip.js";
+import { Dropdown } from "./dropdown.js";
+import { VirtualDropdown } from "./virtual-dropdown.js";
+import { TimeSpanPicker } from "./timepicker.js";
+import { RangeSlider } from "./range-slider.js";
+// Generate sample table data
+const generateData = (count) => {
+    const data = [];
+    const firstNames = [
+        "John",
+        "Jane",
+        "Mike",
+        "Sarah",
+        "Robert",
+        "Emily",
+        "David",
+        "Emma",
+        "James",
+        "Olivia",
+    ];
+    const lastNames = [
+        "Smith",
+        "Johnson",
+        "Williams",
+        "Brown",
+        "Jones",
+        "Garcia",
+        "Miller",
+        "Davis",
+        "Rodriguez",
+        "Martinez",
+    ];
+    const roles = ["Admin", "User", "Editor", "Viewer", "Manager", "Developer"];
+    const statuses = ["Active", "Inactive", "Pending", "Banned"];
+    for (let i = 1; i <= count; i++) {
+        const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
+        const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+        const role = roles[Math.floor(Math.random() * roles.length)];
+        const status = statuses[Math.floor(Math.random() * statuses.length)];
+        const lastLoginDate = new Date(Date.now() - Math.floor(Math.random() * 10000000000));
+        data.push({
+            id: i,
+            name: `${firstName} ${lastName}`,
+            email: `user${i}@example.com`,
+            role,
+            status,
+            lastLogin: lastLoginDate.toLocaleDateString(),
+        });
+    }
+    return data;
+};
+// Initialize all components when DOM is ready
+utils.ready(() => {
+    // Initialize scrollbars
+    Scrollbar.initAll(".scroll-container");
+    // Initialize theme
+    Theme.init();
+    // Initialize horizontal tabs
+    const horizontalTabs = new Tabs(".horizontal", {
+        layout: "horizontal",
+    });
+    // Initialize vertical tabs
+    const verticalTabs = new Tabs(".vertical", {
+        layout: "vertical",
+    });
+    // Initialize carousel
+    const carousel = new Carousel("#carouselIdHere", {
+        loop: true,
+    });
+    // Initialize advanced table with data
+    const columns = [
+        { key: "id", label: "ID" },
+        { key: "name", label: "Name" },
+        { key: "email", label: "Email" },
+        { key: "role", label: "Role" },
+        { key: "status", label: "Status" },
+        { key: "lastLogin", label: "Last Login" },
+    ];
+    const tableData = generateData(50);
+    new Table("#demo-table-js", {
+        data: tableData,
+        columns: columns,
+        pageSize: 10,
+    });
+    // Initialize modal
+    const modalTrigger = document.querySelector(".show-modal");
+    if (modalTrigger) {
+        modalTrigger.addEventListener("click", () => {
+            const buttons = '<div class="buttons"><button class="button-light">Close</button>&nbsp;<button>Save Changes</button></div>';
+            const modal = new Modal("bluffi", "<strong>blaffi</strong>", buttons, true, "default");
+            modal.show();
+            console.warn("Buttons have no bound listeners");
+        });
+    }
+    // Initialize toast
+    const toastTrigger = document.querySelector(".show-toast");
+    if (toastTrigger) {
+        toastTrigger.addEventListener("click", () => {
+            const toast = new Toast("some content. maybe even more text in here!", "some header", "success", true);
+            toast.show(3000);
+        });
+    }
+    // Initialize push menu
+    PushMenu.init();
+    // Initialize flyout menu
+    const menu = new FlyoutMenu({
+        direction: "right",
+        triggerSelector: ".trigger-flyout-menu",
+    });
+    // Flyout menu controls: Switch direction
+    const directionBtns = document.querySelectorAll(".flyout-controls > button");
+    directionBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+            // Remove active class from all buttons
+            directionBtns.forEach((b) => b.classList.remove("active"));
+            // Add active class to clicked button
+            btn.classList.add("active");
+            // Update menu direction
+            const direction = btn.dataset.direction;
+            if (direction) {
+                menu.setDirection(direction);
+            }
+        });
+    });
+    new DatePicker("#datepicker-single", {
+        mode: "single",
+        onSelect: (date) => {
+            console.log("Single selected:", date);
+        },
+    });
+    new DatePicker("#datepicker-time", {
+        mode: "single",
+        timePicker: true,
+        onSelect: (date) => {
+            console.log("Single selected:", date);
+        },
+    });
+    new DatePicker("#datepicker-range", {
+        mode: "range",
+        onSelect: (range) => {
+            console.log("Range selected:", range);
+        },
+    });
+    new DatePicker("#datepicker-localized", {
+        mode: "single",
+        startDay: 1, // Monday
+        locales: {
+            days: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
+            months: [
+                "Enero",
+                "Febrero",
+                "Marzo",
+                "Abril",
+                "Mayo",
+                "Junio",
+                "Julio",
+                "Agosto",
+                "Septiembre",
+                "Octubre",
+                "Noviembre",
+                "Diciembre",
+            ],
+        },
+        format: (date) => {
+            return date.toLocaleDateString("es-ES", {
+                weekday: "long",
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            });
+        },
+        onSelect: (date) => {
+            console.log("Localized selected:", date);
+        },
+    });
+    // Initialize code viewer with usage example
+    const usageTabs = `new Tabs('.horizontal', {
+    layout: 'horizontal',
+    defaultTab: 0
+});`;
+    new CodeViewer("#usage-tabs", usageTabs, "js");
+    // Initialize file uploader
+    const uploaderElement = document.querySelector(".uploader-content");
+    if (uploaderElement) {
+        new FileUploader(uploaderElement);
+    }
+    const sampleData = [
+        new TreeNode("Documents", "folder", [
+            new TreeNode("Work", "folder", [
+                new TreeNode("presentation.pptx", "file"),
+                new TreeNode("report.docx", "file"),
+                new TreeNode("budget.xlsx", "file"),
+            ]),
+            new TreeNode("Personal", "folder", [
+                new TreeNode("resume.pdf", "file"),
+                new TreeNode("vacation-photos", "folder", [
+                    new TreeNode("beach.jpg", "file"),
+                    new TreeNode("mountain.jpg", "file"),
+                ]),
+            ]),
+        ]),
+        new TreeNode("Projects", "folder", [
+            new TreeNode("website", "folder", [
+                new TreeNode("index.html", "file"),
+                new TreeNode("styles.css", "file"),
+                new TreeNode("script.js", "file"),
+            ]),
+            new TreeNode("app", "folder", [
+                new TreeNode("src", "folder", [
+                    new TreeNode("main.js", "file"),
+                    new TreeNode("utils.js", "file"),
+                ]),
+                new TreeNode("package.json", "file"),
+            ]),
+        ]),
+        new TreeNode("Downloads", "folder", [
+            new TreeNode("installer.exe", "file"),
+            new TreeNode("readme.txt", "file"),
+        ]),
+        new TreeNode("README.md", "file"),
+    ];
+    const tree = new TreeComponent("#tree-root", sampleData);
+    const batchSize = 12;
+    let indexNumber = 1;
+    const gallery = new MasonryGallery("gallery", {
+        minColumnWidth: 300,
+        fetchFunction: () => new Promise((resolve) => {
+            setTimeout(() => {
+                const images = [];
+                for (let i = 0; i < batchSize; i++) {
+                    const width = 400;
+                    const height = Math.floor(Math.random() * 301) + 300; // 300-600
+                    const id = Math.floor(Math.random() * 1000);
+                    const imageIndex = indexNumber * batchSize + i;
+                    images.push({
+                        src: `https://picsum.photos/${width}/${height}?random=${imageIndex}`,
+                        title: `Image ${imageIndex + 1}`,
+                        desc: `A random caption for image ${id}`,
+                    });
+                }
+                indexNumber++;
+                resolve(images);
+            }, 800);
+        }),
+    });
+    const dropdown = new Dropdown("#myDropdown");
+    const dropdownElement = document.querySelector("#myDropdown");
+    dropdownElement?.addEventListener("dropdown-select", ((event) => {
+        const { text, element } = event.detail;
+        console.log("User selected:", text);
+        console.log("Selected element:", element);
+    }));
+    const generateItems = (count, prefix) => {
+        return Array.from({ length: count }, (_, i) => ({
+            label: `${prefix} Item ${i + 1}`,
+            value: `${prefix.toLowerCase()}_${i + 1}`,
+        }));
+    };
+    const bigData = generateItems(10000, "Option");
+    const smallData = generateItems(50, "Choice");
+    const singleDropdown = new VirtualDropdown({
+        container: "#dropdown-single",
+        options: bigData,
+        searchable: true,
+        placeholder: "Search 10k items...",
+        renderLimit: 15,
+        onSelect: (val) => {
+            console.log("Single Select:", val);
+        },
+    });
+    const multiDropdown = new VirtualDropdown({
+        container: "#dropdown-multi",
+        options: smallData,
+        searchable: true,
+        multiSelect: true,
+        placeholder: "Choose multiple...",
+        renderLimit: 10,
+        onSelect: (vals) => {
+            console.log("Multi Select:", vals);
+        },
+    });
+    // Initialize range sliders
+    RangeSlider.initAll();
+    Tooltip.initializeAll();
+    const timeSpanPicker = new TimeSpanPicker('timespan-1', {
+        onChange: (start, end) => {
+            console.log(`Start: ${start}, Ende: ${end}`);
+        }
+    });
+    new CodeViewer("#usage-text-input", `<label for="text-input-demo">Text Input</label>
+<input type="text" id="text-input-demo"/>`, "html");
+    new CodeViewer("#usage-textarea", `<label for="textarea-demo">Text Area</label>
+<textarea id="textarea-demo"></textarea>`, "html");
+    new CodeViewer("#usage-checkbox-demo", `<input class="styled-checkbox"
+    id="checkbox-1"
+    type="checkbox"
+    value="1"
+/>
+<label for="checkbox-1">Checkbox</label>`, "html");
+});
+new CodeViewer("#usage-radiobutton-demo", `<label class="radio-button-container">Three
+    <input type="radio" name="radio"/>
+    <span class="checkmark"></span>
+</label>`, "html");
+new CodeViewer("#usage-switch-demo", `<div class="switch">
+    <input type="checkbox" id="switch"/><label for="switch">Toggle</label>
+</div>`, "html");
+new CodeViewer("#usage-slider-demo", `<div class="range-slider">
+    <input type="range" min="1" max="100" value="50" />
+</div>`, "html");
+new CodeViewer("#usage-pushmenu-control-demo", `<div class="open-menu">
+    <div class="navigation-controls">
+        <input type="checkbox" id="menu-navigation" class="navigation"/>
+        <label for="menu-navigation">
+            <span class="icon icon-menu"></span>
+        </label>
+    </div>
+</div>`, "html");
+new CodeViewer("#usage-pushmenu-demo", `<nav class="push-menu">
+    <ul>
+        <li>
+            <a onclick="window.Scroll.to('#grid')">Grid</a>
+        </li>
+        <li>
+            <a onclick="window.Scroll.to('#typography')">Typography</a>
+        </li>
+    </ul>
+</nav>`, "html");
+new CodeViewer("#usage-pushmenu-script-demo", `PushMenu.init();`, "js");
+new CodeViewer("#usage-flyout-script-demo", `const menu = new FlyoutMenu({
+  direction: "right",
+  triggerSelector: ".trigger-flyout-menu",
+});`, "js");
+new CodeViewer("#usage-flyout-demo", `<div class="flyout-overlay" id="flyoutOverlay"></div>
+<div class="flyout-menu" id="flyoutMenu">
+    <ul>
+        <li><a href="#">Home</a></li>
+        <li>
+            About
+            <ul>
+                <li><a href="#">Our Story</a></li>
+                <li><a href="#">Team</a></li>
+                <li><a href="#">Careers</a></li>
+            </ul>
+        </li>
+        <li>
+            Services
+            <ul>
+                <li>
+                    Web Design
+                    <ul>
+                        <li><a href="#">eCommerce</a></li>
+                        <li><a href="#">Landing Pages</a></li>
+                        <li><a href="#">Portfolios</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Development</a></li>
+                <li><a href="#">SEO</a></li>
+            </ul>
+        </li>
+        <li><a href="#">Portfolio</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</div>`, "html");
+new CodeViewer("#usage-dropdown-menu-demo", `<div class="dropdown-container" id="myDropdown">
+  <button class="dropdown-trigger">Select Option</button>
+  <ul class="dropdown-menu">
+    <li>
+      <div class="dropdown-item">Profile</div>
+    </li>
+    <li>
+      <div class="dropdown-item">Settings</div>
+      <ul>
+        <li>
+          <div class="dropdown-item">Account</div>
+        </li>
+        <li>
+          <div class="dropdown-item">Privacy</div>
+          <ul>
+            <li>
+              <div class="dropdown-item">Public</div>
+            </li>
+            <li>
+              <div class="dropdown-item">Private</div>
+            </li>
+            <li>
+              <div class="dropdown-item">Friends Only</div>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <div class="dropdown-item">Notifications</div>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <div class="dropdown-item">Help</div>
+    </li>
+    <li>
+      <div class="dropdown-item">Logout</div>
+    </li>
+  </ul>
+</div>`, "html");
+new CodeViewer("#usage-dropdown-menu-js-demo", `const dropdown = new Dropdown("#myDropdown");
+const dropdownElement = document.querySelector("#myDropdown");
+dropdownElement?.addEventListener("dropdown-select", ((
+  event: CustomEvent<DropdownSelectDetail>,
+) => {
+  const { text, element } = event.detail;
+  console.log("User selected:", text);
+  console.log("Selected element:", element);
+}) as EventListener);`, "js");
+new CodeViewer("#usage-modal-demo", `const modal = new Modal(
+  "content",
+  "<strong>header</strong>",
+  "controls",
+  true,
+  "default",
+);
+modal.show();`, "js");
+new CodeViewer("#usage-toast-demo", `const toast = new Toast(
+    "some content. maybe even more text in here!",
+    "some header",
+    "success",
+    true,
+  );
+  toast.show(3000);`, "js");
+new CodeViewer("#usage-tooltip-demo", `<button class="tooltip-trigger" data-tooltip="This is a simple tooltip">
+  Simple Tooltip
+</button>`, "html");
+new CodeViewer("#usage-tooltip-js-demo", `Tooltip.initializeAll();`, "js");
+new CodeViewer("#usage-spinner-demo", `<div class="spinner"></div>`, "html");
+new CodeViewer("#usage-loading-demo", `<div class="loading"></div>`, "html");
+new CodeViewer("#usage-alerts-demo", `<div class="alert alert-default">
+    <strong>Default:</strong> This is a default alert message.
+</div>`, "html");
+new CodeViewer("#usage-chips-demo", `<div class="chips">
+  <div class="chip">Example Chip</div>
+  <div class="chip clickable">Example Chip with hover</div>
+  <div class="chip closeable">
+    Example Chip with closure
+    <button class="close">
+      <span class="icon icon-close"></span>
+    </button>
+  </div>
+</div>`, "html");
+new CodeViewer("#usage-accordion-demo", `<div class="accordion">
+  <div class="accordion-item">
+    <input
+      type="radio"
+      name="accordion"
+      id="acc1"
+      class="accordion-input"
+      checked
+    />
+    <label for="acc1" class="accordion-label"> What is this? </label>
+    <div class="accordion-content">
+      <div class="accordion-body">
+        <div>
+          <p>
+            This is a pure CSS accordion component. It uses the "Radio
+            Button Hack" to manage state without a single line of
+            JavaScript.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input
+      type="radio"
+      name="accordion"
+      id="acc2"
+      class="accordion-input"
+    />
+    <label for="acc2" class="accordion-label"> How does it work? </label>
+    <div class="accordion-content">
+      <div class="accordion-body">
+        <div>
+          <p>It links label elements to hidden radio buttons.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input
+      type="radio"
+      name="accordion"
+      id="acc3"
+      class="accordion-input"
+    />
+    <label for="acc3" class="accordion-label"> Is it accessible? </label>
+    <div class="accordion-content">
+      <div class="accordion-body">
+        <div>
+          <p>
+            It's reasonably accessible as it uses semantic form elements.
+            Users can tab through the headers (radio inputs) and select
+            them with the keyboard. However, for full ARIA support, a
+            small amount of JS is usually recommended to manage
+            aria-expanded attributes.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>`, "html");
+new CodeViewer("#usage-timeline-demo", `<div class="timeline">
+  <div class="timeline-item active">
+    <div class="timeline-content">
+      <span class="timeline-date">October 12, 2023</span>
+      <h3 class="timeline-title">Project Kickoff</h3>
+      <p class="timeline-body">
+        Initial meeting with shareholders to discuss the scope and
+        requirements of the project. Team roles were assigned and the
+        roadmap was drafted.
+      </p>
+    </div>
+  </div>
+  <div class="timeline-item">
+    <div class="timeline-content">
+      <span class="timeline-date">January 15, 2024</span>
+      <h3 class="timeline-title">Beta Launch</h3>
+      <p class="timeline-body">
+        Opened the platform to a closed beta group of 500 users. Collected
+        feedback regarding the onboarding flow and notification settings.
+      </p>
+    </div>
+  </div>
+</div>`, "html");
+new CodeViewer("#usage-progress-bar-demo", `<div class="progress-bar">
+  <div class="progress" style="height: 24px; width: 50%"></div>
+</div>`, "html");
+new CodeViewer("#usage-placeholder-demo", `<span class="placeholder w-6">`, "html");
+new CodeViewer("#usage-table-demo", `const columns: TableColumn[] = [
+  { key: "id", label: "ID" },
+  { key: "name", label: "Name" },
+];
+const tableData: TableRow[] = [
+  { id: 1, name: "John Doe" },
+  { id: 2, name: "Jane Smith" },
+  { id: 3, name: "Mike Johnson" },
+];
+new Table("#demo-table-js", {
+  data: tableData,
+  columns: columns,
+  pageSize: 10,
+});
+
+// Initialize basic table from html data
+new Table("#demo-table", { pageSize: 5 });`, "js");
+new CodeViewer("#usage-datepicker-html-demo", `<label for="datepicker-range">Datepicker Range</label>
+<input
+  type="text"
+  id="datepicker-range"
+  class="datepicker-input"
+  placeholder="Select a date range"
+  readonly
+/>`, "html");
+new CodeViewer("#usage-datepicker-js-demo", `new DatePicker("#datepicker-single", {
+  mode: "single",
+  onSelect: (date) => {
+    console.log("Single selected:", date);
+  },
+});`, "js");
+new CodeViewer("#usage-tree-demo-html", `<ul id="tree-root" class="tree"></ul>`, "html");
+new CodeViewer("#usage-tree-demo-js", `const sampleData: TreeNode[] = [
+    new TreeNode("Documents", "folder", [
+      new TreeNode("Work", "folder", [
+        new TreeNode("presentation.pptx", "file"),
+        new TreeNode("report.docx", "file"),
+        new TreeNode("budget.xlsx", "file"),
+      ]),
+      new TreeNode("Personal", "folder", [
+        new TreeNode("resume.pdf", "file"),
+        new TreeNode("vacation-photos", "folder", [
+          new TreeNode("beach.jpg", "file"),
+          new TreeNode("mountain.jpg", "file"),
+        ]),
+      ]),
+    ]),
+  ];
+  const tree = new TreeComponent("#tree-root", sampleData);`, "js");
+new CodeViewer("#usage-file-uploader-demo", `<div class="uploader-content">
+        <div class="header">
+            <h2>Upload Files</h2>
+            <p>Select or drag files to upload</p>
+        </div>
+        <div id="drop-zone" class="drop-zone">
+            <input type="file" id="file-input" multiple hidden/>
+            <div class="drop-zone-content">
+                <div class="icon-container">
+                    <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class="upload-icon"
+                    >
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                </div>
+                <p class="primary-text">Click to upload or drag and drop</p>
+                <p class="secondary-text">
+                    SVG, PNG, JPG or GIF (max. 800x400px)
+                </p>
+            </div>
+        </div>
+
+        <div id="file-list" class="file-list"></div>
+
+        <div class="actions">
+            <button id="upload-btn" disabled>Upload Files</button>
+        </div>
+    </div>`, "html");
+new CodeViewer("#usage-file-uploader-demo-js", `const uploaderElement =
+    document.querySelector<HTMLElement>(".uploader-content");
+  if (uploaderElement) {
+    new FileUploader(uploaderElement);
+  }`, "js");
+new CodeViewer("#usage-virtual-dropdown-demo-html", `<div class="virtual-dropdown">
+                <h2>1. Searchable Single Select (10,000 items)</h2>
+                <p>
+                    This list uses virtual scrolling to handle 10k items efficiently.
+                </p>
+                <div id="dropdown-single"></div>
+            </div>`, "html");
+new CodeViewer("#usage-virtual-dropdown-demo-js", `const singleDropdown = new VirtualDropdown({
+    container: "#dropdown-single",
+    options: bigData,
+    searchable: true,
+    placeholder: "Search 10k items...",
+    renderLimit: 15,
+    onSelect: (val) => {
+      console.log("Single Select:", val);
+    },
+  });`, "js");
+new CodeViewer("#usage-scrollbar-demo", `Scrollbar.initAll(".scroll-container");`, "js");
+new CodeViewer("#usage-theme-demo", `Theme.init();`, "js");
+new CodeViewer("#usage-scroll-demo", `window.Scroll.to('#grid')`, "js");
+new CodeViewer("#usage-chat-demo-html", `<div class="chat-container">
+                <div class="message message-incoming">
+                    Hi there! How are you doing today?
+                    <span class="message-meta">10:42 AM</span>
+                </div>
+                <div class="message message-outgoing">
+                    I'm doing great, thanks! Just working on some new CSS
+                    components.<br/>And other stuff.
+                    <span class="message-meta">10:43 AM</span>
+                </div>
+                <div class="message message-outgoing">
+                    Trying to make a simple chat UI.
+                    <span class="message-meta">10:43 AM</span>
+                </div>
+                <div class="message message-incoming">
+                    That sounds cool!
+                    <span class="message-meta">10:45 AM</span>
+                </div>
+            </div>`, "html");
+new CodeViewer("#usage-carousel-demo-html", `<div class="carousel" id="carouselIdHere">
+                <div>Slide 1</div>
+                <div>Slide 2</div>
+                <div>Slide 3</div>
+                <div>Slide 4</div>
+            </div>`, "html");
+new CodeViewer("#usage-carousel-demo-js", `const carousel = new Carousel("#carouselIdHere", {
+    loop: true,
+  });`, "js");
+new CodeViewer("#usage-gallery-demo-html", `<div id="gallery" class="masonry-container"></div>
+            <div class="loader hidden">
+                <div class="spinner"></div>
+            </div>`, "html");
+new CodeViewer("#usage-gallery-demo-js", `const gallery = new MasonryGallery("gallery", {
+    minColumnWidth: 300,
+    fetchFunction: () => new Promise((resolve) => {
+      setTimeout(() => {
+        const images: ImageData[] = [];
+
+        for (let i = 0; i < batchSize; i++) {
+          const width = 400;
+          const height = Math.floor(Math.random() * 301) + 300;
+          const id = Math.floor(Math.random() * 1000);
+          const imageIndex = indexNumber * batchSize + i;
+
+          images.push({
+            src: \`https://picsum.photos/$\{width}/$\{height}?random=$\{imageIndex}\`,
+            title: \`Image $\{imageIndex + 1}\`,
+            desc: \`A random caption for image $\{id}\`,
+          });
+        }
+
+        indexNumber++;
+        resolve(images);
+      }, 800);
+    }),
+  });`, "js");