@dodlhuat/basix 1.0.0

package/js/index.ts

@@ -0,0 +1,874 @@
+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, TableColumn, TableRow} 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, ImageData} from "./gallery.js";
+import {Tooltip} from "./tooltip.js";
+import {Dropdown, DropdownSelectDetail} from "./dropdown.js";
+import {VirtualDropdown} from "./virtual-dropdown.js";
+import {TimeSpanPicker} from "./timepicker.js";
+
+// Generate sample table data
+const generateData = (count: number): TableRow[] => {
+    const data: TableRow[] = [];
+    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: TableColumn[] = [
+        {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<HTMLButtonElement>(
+        ".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 as "left" | "right" | undefined;
+            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<HTMLElement>(".uploader-content");
+    if (uploaderElement) {
+        new FileUploader(uploaderElement);
+    }
+
+    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"),
+                ]),
+            ]),
+        ]),
+        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: ImageData[] = [];
+
+                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: CustomEvent<DropdownSelectDetail>,
+    ) => {
+        const {text, element} = event.detail;
+        console.log("User selected:", text);
+        console.log("Selected element:", element);
+    }) as EventListener);
+
+    const generateItems = (count: number, prefix: string) => {
+        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");