@dodlhuat/basix 1.2.0 → 1.2.1

package/js/index.js

@@ -1,816 +0,0 @@
-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";
-import { BottomSheet } from "./bottom-sheet.js";
-import { Editor } from "./editor.js";
-import { Stepper } from "./stepper.js";
-import { ContextMenu } from "./context-menu.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 bottom sheet
-    const bottomSheetTrigger = document.querySelector('.show-bottom-sheet');
-    if (bottomSheetTrigger) {
-        bottomSheetTrigger.addEventListener('click', () => {
-            const buttons = '<div class="buttons"><button class="button-light">Cancel</button>&nbsp;<button>Confirm</button></div>';
-            const sheet = new BottomSheet({
-                content: '<p>This is the bottom sheet content. It slides up from the bottom and can be dismissed by dragging down, tapping the backdrop, or pressing Escape.</p>',
-                header: 'Bottom Sheet',
-                footer: buttons,
-                closeable: true,
-                snapHeight: 'auto',
-            });
-            sheet.show();
-        });
-    }
-    // Initialize context menu demo
-    new ContextMenu('.context-menu-target', [
-        { group: 'File' },
-        { label: 'Open', icon: 'folder_open', shortcut: '⌘O', action: () => { } },
-        { label: 'Rename', icon: 'edit', shortcut: 'F2', action: () => { } },
-        { label: 'Duplicate', icon: 'library_add', action: () => { } },
-        'separator',
-        {
-            label: 'Share',
-            icon: 'send',
-            submenu: [
-                { label: 'Copy link', icon: 'attachment', action: () => { } },
-                { label: 'Send by mail', icon: 'mail', action: () => { } },
-            ]
-        },
-        'separator',
-        { label: 'Delete', icon: 'delete', shortcut: '⌫', destructive: true, action: () => { } },
-    ]);
-    // Initialize stepper demo
-    const stepperEl = document.querySelector('#stepper-demo');
-    if (stepperEl) {
-        const stepper = new Stepper(stepperEl, { defaultStep: 1 });
-        document.querySelector('#stepper-next')?.addEventListener('click', () => stepper.next());
-        document.querySelector('#stepper-prev')?.addEventListener('click', () => stepper.prev());
-    }
-    // Initialize range sliders
-    RangeSlider.initAll();
-    Tooltip.initializeAll();
-    new Editor({ simple: true });
-    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-bottom-sheet-demo", `const sheet = new BottomSheet({
-  content: '<p>Sheet content here.</p>',
-  header: 'Title',
-  footer: '<div class="buttons"><button>Confirm</button></div>',
-  closeable: true,
-  snapHeight: 'auto',
-});
-sheet.show();`, "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-stepper-demo", `<div class="stepper">
-  <div class="stepper-step completed">
-    <div class="stepper-indicator">
-      <svg class="icon-svg"><use href="svg-icons/icons.svg#check"/></svg>
-    </div>
-    <div class="stepper-label">
-      <span class="stepper-title">Account</span>
-    </div>
-  </div>
-  <div class="stepper-connector completed"></div>
-  <div class="stepper-step active">
-    <div class="stepper-indicator">2</div>
-    <div class="stepper-label">
-      <span class="stepper-title">Profile</span>
-    </div>
-  </div>
-  <div class="stepper-connector"></div>
-  <div class="stepper-step">
-    <div class="stepper-indicator">3</div>
-    <div class="stepper-label">
-      <span class="stepper-title">Review</span>
-    </div>
-  </div>
-</div>
-
-const stepper = new Stepper('#my-stepper');
-stepper.next();
-stepper.prev();
-stepper.goTo(2);
-stepper.setError(1);`, "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-context-menu-demo", `new ContextMenu('.my-element', [
-  { group: 'File' },
-  { label: 'Open',      icon: 'folder_open', shortcut: '⌘O', action: (t) => {} },
-  { label: 'Rename',    icon: 'edit',        shortcut: 'F2', action: (t) => {} },
-  'separator',
-  {
-    label: 'Share', icon: 'send',
-    submenu: [
-      { label: 'Copy link',   icon: 'attachment', action: (t) => {} },
-      { label: 'Send by mail', icon: 'mail',      action: (t) => {} },
-    ]
-  },
-  'separator',
-  { label: 'Delete', icon: 'delete', destructive: true, action: (t) => {} },
-]);`, "javascript");
-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");