@dodlhuat/basix 1.1.0 → 1.2.0

package/js/index.js

@@ -18,6 +18,10 @@ 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 = [];
@@ -189,9 +193,9 @@ utils.ready(() => {
         },
     });
     // Initialize code viewer with usage example
-    const usageTabs = `new Tabs('.horizontal', {
-    layout: 'horizontal',
-    defaultTab: 0
+    const usageTabs = `new Tabs('.horizontal', {
+    layout: 'horizontal',
+    defaultTab: 0
 });`;
     new CodeViewer("#usage-tabs", usageTabs, "js");
     // Initialize file uploader
@@ -294,425 +298,519 @@ utils.ready(() => {
             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>
+    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>
+    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"
-/>
+    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>
+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>
+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" />
+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>
+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>
+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",
+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>
+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>
+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);
+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",
-);
+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,
-  );
+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
+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.
+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>
+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>
+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>
+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>
+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 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
+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);
-  },
+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"),
-        ]),
-      ]),
-    ]),
-  ];
+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>
+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);
+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>
+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);
-    },
+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>
+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>
+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,
+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>
+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);
-    }),
+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");