maverick-wave 3.0.0

package/src/partials/code-container.html

@@ -0,0 +1,194 @@
+<h3 class="mw-section-subtitle">Code</h3>
+
+<div class="mw-grid-2 mw-gap-5">
+  <div>
+    <h3 class="mw-mb-4">Inline Code</h3>
+    <div class="mw-card mw-card-simple">
+      <p>
+        Use <code>inline code</code> for variables, function names, or short
+        code snippets within your text.
+      </p>
+      <p>
+        For example, use <code>mw-btn</code> class to create a button or
+        <code>mw-card</code> to create a card component in your layout.
+      </p>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Code Block</h3>
+    <div class="mw-card mw-card-simple">
+      <p>Use code blocks for multi-line code examples:</p>
+      <div class="mw-code-container">
+        <pre><code>// A simple greeting function
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+
+// Display greeting in console
+console.log(greet('Developer'));</code></pre>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="mw-grid-1 mw-mt-6 mw-gap-5">
+  <div>
+    <h3 class="mw-mb-4">Code Block with Filename</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-code-block">
+        <div class="mw-code-block-header">
+          <span class="mw-code-block-filename">counter.jsx</span>
+          <span class="mw-code-block-language">React</span>
+        </div>
+        <div class="mw-code-container">
+          <pre><code>// A simple React counter component
+import { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    ......
+  );
+}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Terminal</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-terminal">
+        <span class="mw-terminal-line">cd my-project</span>
+        <span class="mw-terminal-line"
+          >touch index.html styles.css script.js</span
+        >
+        <span class="mw-terminal-line mw-terminal-output">Created 3 files</span>
+        <span class="mw-terminal-line">mkdir assets</span>
+        <span class="mw-terminal-line">ls -la</span>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Syntax Highlighting (Integration)</h3>
+    <div class="mw-card mw-card-simple">
+      <p>
+        MaverickWave provides styling for code containers
+        (<code>.mw-code-block</code>, <code>.mw-code-container</code>) and basic
+        styles for common code tokens (like keywords, comments, strings) using
+        classes such as <code>.mw-code-keyword</code>,
+        <code>.mw-code-comment</code>, etc.
+      </p>
+      <p>
+        However, MaverickWave
+        <strong>does not include a built-in JavaScript library</strong>
+        for automatically parsing code and applying these highlighting classes.
+      </p>
+      <h5 class="mw-mt-4 mw-mb-2">Option 1: Manual Highlighting</h5>
+      <p>
+        For simple snippets, you can manually wrap parts of your code with
+        <code>&lt;span&gt;</code> tags using the provided
+        <code>.mw-code-*</code> classes:
+      </p>
+      <div class="mw-code-container">
+        <div class="mw-code-block">
+          <div class="mw-code-block-header">
+            <span class="mw-code-block-filename">manual-example.js</span>
+            <span class="mw-code-block-language">JavaScript</span>
+          </div>
+          <pre><code><span class="mw-code-keyword">const</span> <span class="mw-code-function">greet</span> = (<span class="mw-code-keyword">name</span>) <span class="mw-code-operator">=></span> {
+  <span class="mw-code-comment">// Simple greeting</span>
+  <span class="mw-code-keyword">return</span> <span class="mw-code-string">`Hello, ${<span class="mw-code-keyword">name</span>}!`</span>;
+};</code></pre>
+        </div>
+      </div>
+
+      <h5 class="mw-mt-4 mw-mb-2">
+        Option 2: Using a Syntax Highlighting Library
+      </h5>
+      <p>
+        For automatic highlighting of various languages, integrate a dedicated
+        JavaScript library like
+        <a
+          href="https://prismjs.com/"
+          target="_blank"
+          class="mw-btn mw-btn-link mw-p-0"
+          >Prism.js</a
+        >
+        or
+        <a
+          href="https://highlightjs.org/"
+          target="_blank"
+          class="mw-btn mw-btn-link mw-p-0"
+          >Highlight.js</a
+        >.
+      </p>
+      <ol class="mw-list mw-list-dot">
+        <li>Include the library's CSS and JavaScript files in your project.</li>
+        <li>
+          Ensure the library is configured to process code within MaverickWave's
+          <code>&lt;pre&gt;&lt;code&gt;...&lt;/code&gt;&lt;/pre&gt;</code>
+          structures, often by adding specific language classes (e.g.,
+          <code>&lt;code class="language-javascript"&gt;</code>).
+        </li>
+        <li>
+          You might need to slightly adjust the library's theme or
+          MaverickWave's token styles (<code>.mw-code-*</code>) for perfect
+          visual integration, or simply rely entirely on the chosen library's
+          theme.
+        </li>
+      </ol>
+      <p>
+        Using an external library is recommended for robust, multi-language
+        syntax highlighting.
+      </p>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Using Code Components</h3>
+    <div class="mw-card mw-card-simple">
+      <h4>Basic Structure</h4>
+      <p>
+        Here's how to structure the HTML for MaverickWave's code components:
+      </p>
+
+      <h5 class="mw-mt-4 mw-mb-2">Inline Code</h5>
+      <pre
+        class="mw-code-block"
+      ><code>&lt;p&gt;Use the &lt;code&gt;mw-btn&lt;/code&gt; class.&lt;/p&gt;</code></pre>
+
+      <h5 class="mw-mt-4 mw-mb-2">Basic Code Block</h5>
+      <pre class="mw-code-block"><code>&lt;div class="mw-code-container"&gt;
+  &lt;pre&gt;&lt;code&gt;your_code_here();
+    more_code();&lt;/code&gt;&lt;/pre&gt;
+&lt;/div&gt;</code></pre>
+
+      <h5 class="mw-mt-4 mw-mb-2">Code Block with Header</h5>
+      <pre
+        class="mw-code-block"
+      ><code>&lt;div class="mw-code-block"&gt; &lt;!-- Note: .mw-code-block wraps header + container --&gt;
+  &lt;div class="mw-code-block-header"&gt;
+    &lt;span class="mw-code-block-filename"&gt;script.js&lt;/span&gt;
+    &lt;span class="mw-code-block-language"&gt;JavaScript&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class="mw-code-container"&gt;
+    &lt;pre&gt;&lt;code&gt;your_code_here();&lt;/code&gt;&lt;/pre&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+      <h5 class="mw-mt-4 mw-mb-2">Terminal Block</h5>
+      <pre class="mw-code-block"><code>&lt;div class="mw-terminal"&gt;
+  &lt;span class="mw-terminal-line"&gt;npm install maverick-wave&lt;/span&gt;
+  &lt;span class="mw-terminal-line mw-terminal-output"&gt;+ maverick-wave added&lt;/span&gt;
+&lt;/div&gt;</code></pre>
+      <p class="mw-mt-4">
+        Remember to integrate a syntax highlighting library if you need
+        automatic language coloring (see the "Syntax Highlighting" section
+        above).
+      </p>
+    </div>
+  </div>
+</div>

package/src/partials/colors-container.html

@@ -0,0 +1,125 @@
+<h3 class="mw-section-subtitle">Main Colors</h3>
+
+<!-- the hex code string is getting updated via javascript! -->
+
+<div class="mw-grid-auto-sm">
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-primary-color)"
+      ></div>
+      <p>Primary</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-secondary-color)"
+      ></div>
+      <p>Secondary</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-page-background)"
+      ></div>
+      <p>Page Background</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-card-background)"
+      ></div>
+      <p>Card Background</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div class="color-swatch" style="background: var(--mw-border)"></div>
+      <p>Border</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div class="color-swatch" style="background: var(--mw-shadow)"></div>
+      <p>Shadow</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div class="color-swatch" style="background: var(--mw-text-color)"></div>
+      <p>Text</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-text-muted-color)"
+      ></div>
+      <p>Text Secondary</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-success-color)"
+      ></div>
+      <p>Success</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-warning-color)"
+      ></div>
+      <p>Warning</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div
+        class="color-swatch"
+        style="background: var(--mw-danger-color)"
+      ></div>
+      <p>Danger</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple color-card">
+    <div class="mw-text-center">
+      <div class="color-swatch" style="background: var(--mw-info-color)"></div>
+      <p>Info</p>
+      <p class="mw-text-muted">#000000</p>
+    </div>
+  </div>
+</div>

package/src/partials/coming-soon-container.html

@@ -0,0 +1,6 @@
+<h3 class="mw-section-subtitle">Coming Soon Banner</h3>
+
+<div class="mw-coming-soon">
+  <i class="mw-coming-soon-icon fas fa-tools"></i>
+  <div class="mw-coming-soon-text">Coming Soon</div>
+</div>

package/src/partials/content-slider-container.html

@@ -0,0 +1,47 @@
+<h3 class="mw-section-subtitle">Content Slider</h3>
+<p class="mw-text-muted mw-text-center">Image Slider</p>
+
+<div class="mw-image-slider">
+  <div class="mw-image-slider-base" data-index="0">
+    <img
+      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=500&fit=crop"
+      class="mw-image-slider-base-image"
+      alt="Mountain Landscape"
+    />
+  </div>
+
+  <div class="mw-image-slider-overlay">
+    <div class="mw-image-slider-overlay-image" data-index="1">
+      <img
+        src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=800&h=500&fit=crop"
+        alt="Lake"
+      />
+    </div>
+    <div class="mw-image-slider-overlay-image" data-index="2">
+      <img
+        src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=800&h=500&fit=crop"
+        alt="Forest"
+      />
+    </div>
+    <div class="mw-image-slider-overlay-image" data-index="3">
+      <img
+        src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&h=500&fit=crop"
+        alt="Field"
+      />
+    </div>
+    <div class="mw-image-slider-overlay-image" data-index="4">
+      <img
+        src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=500&fit=crop"
+        alt="Trees"
+      />
+    </div>
+  </div>
+
+  <div class="mw-image-slider-controls-grid-3">
+    <button class="mw-btn mw-btn-primary" data-index="0">Base View</button>
+    <button class="mw-btn mw-btn-primary" data-index="1">Lake</button>
+    <button class="mw-btn mw-btn-primary" data-index="2">Forest</button>
+    <button class="mw-btn mw-btn-primary" data-index="3">Field</button>
+    <button class="mw-btn mw-btn-primary" data-index="4">Trees</button>
+  </div>
+</div>

package/src/partials/divider-container.html

@@ -0,0 +1,52 @@
+<h3 class="mw-section-subtitle">Divider</h3>
+
+<div class="mw-grid-2 mw-gap-6">
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Horizontal</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-2">Default</h5>
+      <p class="mw-text-muted">Content above</p>
+      <hr class="mw-divider" />
+      <p class="mw-text-muted">Content below</p>
+
+      <h5 class="mw-text-medium mw-mb-2">Thick</h5>
+      <hr class="mw-divider mw-divider-thick" />
+
+      <h5 class="mw-text-medium mw-mb-2">Dashed</h5>
+      <hr class="mw-divider mw-divider-dashed" />
+
+      <h5 class="mw-text-medium mw-mb-2">Primary color</h5>
+      <hr class="mw-divider mw-divider-primary" />
+
+      <h5 class="mw-text-medium mw-mb-2">Secondary color</h5>
+      <hr class="mw-divider mw-divider-secondary" />
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-card-title mw-mb-4">With Text & Vertical</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-2">With label</h5>
+      <div class="mw-divider-text">
+        <span>or</span>
+      </div>
+
+      <div class="mw-divider-text">
+        <span>Section Title</span>
+      </div>
+
+      <div class="mw-divider-text mw-divider-primary">
+        <span><i class="fas fa-star"></i> Featured</span>
+      </div>
+
+      <h5 class="mw-text-medium mw-mt-4 mw-mb-3">Vertical (inside flex row)</h5>
+      <div style="display: flex; align-items: center; gap: 1rem; height: 70px">
+        <span class="mw-text-muted">Left</span>
+        <div class="mw-divider-vertical"></div>
+        <span class="mw-text-muted">Middle</span>
+        <div class="mw-divider-vertical"></div>
+        <span class="mw-text-muted">Right</span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/documentation-container.html

@@ -0,0 +1,161 @@
+<div class="mw-card mw-card-simple">
+  <h3>Table of Contents</h3>
+
+  <ul class="mw-list mw-list-link">
+    <li>
+      <a href="#foundations">Foundations</a>
+    </li>
+    <ul class="mw-list mw-list-link">
+      <li>
+        <a href="#typography">Typography</a>
+      </li>
+      <li>
+        <a href="#colors">Colors</a>
+      </li>
+      <li>
+        <a href="#utilities">Utilities</a>
+      </li>
+      <li>
+        <a href="#header-utilities">Header Utilities</a>
+      </li>
+      <li>
+        <a href="#coming-soon">Coming Soon Banner</a>
+      </li>
+      <li>
+        <a href="#divider">Divider</a>
+      </li>
+    </ul>
+    <!-- seperator -->
+    <li>
+      <a href="#layout">Layout</a>
+    </li>
+    <ul class="mw-list mw-list-link">
+      <li>
+        <a href="#grid">Grid System</a>
+      </li>
+      <li>
+        <a href="#cards">Cards</a>
+      </li>
+      <li>
+        <a href="#panels">Panels</a>
+      </li>
+      <li>
+        <a href="#tabs">Tabs</a>
+      </li>
+      <li>
+        <a href="#accordions">Accordions</a>
+      </li>
+      <li>
+        <a href="#tiles">Tiles</a>
+      </li>
+      <li>
+        <a href="#breadcrumbs">Breadcrumbs</a>
+      </li>
+      <li>
+        <a href="#modals">Modals</a>
+      </li>
+      <li>
+        <a href="#html-lists">HTML Lists</a>
+      </li>
+      <li>
+        <a href="#item-lists">Item Lists</a>
+      </li>
+      <li>
+        <a href="#stepper">Stepper</a>
+      </li>
+    </ul>
+    <!-- seperator -->
+    <li>
+      <a href="#components">Components</a>
+    </li>
+    <ul class="mw-list mw-list-link">
+      <li>
+        <a href="#buttons">Buttons</a>
+      </li>
+      <li>
+        <a href="#button-bar">Button Bar</a>
+      </li>
+      <li>
+        <a href="#progress">Progress Bars</a>
+      </li>
+      <li>
+        <a href="#spinners">Loading Spinners</a>
+      </li>
+      <li>
+        <a href="#avatars">Avatars</a>
+      </li>
+      <li>
+        <a href="#tags">Tags</a>
+      </li>
+      <li>
+        <a href="#ratings">Ratings</a>
+      </li>
+      <li>
+        <a href="#info">Info</a>
+      </li>
+      <li>
+        <a href="#alerts">Alerts</a>
+      </li>
+      <li>
+        <a href="#code">Code</a>
+      </li>
+      <li>
+        <a href="#skeleton">Skeleton Loader</a>
+      </li>
+      <li>
+        <a href="#empty-state">Empty State</a>
+      </li>
+    </ul>
+    <!-- seperator -->
+    <li>
+      <a href="#forms">Forms</a>
+    </li>
+    <ul class="mw-list mw-list-link">
+      <li>
+        <a href="#form-elements">Form Elements</a>
+      </li>
+      <li>
+        <a href="#input-group">Input Group</a>
+      </li>
+      <li>
+        <a href="#form-field">Field Pattern</a>
+      </li>
+      <li>
+        <a href="#form">Form</a>
+      </li>
+      <li>
+        <a href="#login">Login</a>
+      </li>
+    </ul>
+    <!-- seperator -->
+    <li>
+      <a href="#data-display">Data & Display</a>
+    </li>
+    <ul class="mw-list mw-list-link">
+      <li>
+        <a href="#meta-info">Meta Info</a>
+      </li>
+      <li>
+        <a href="#tables">Tables</a>
+      </li>
+      <li>
+        <a href="#pagination">Pagination</a>
+      </li>
+      <li>
+        <a href="#timelines">Timelines</a>
+      </li>
+      <li>
+        <a href="#gallery">Image Gallery</a>
+      </li>
+      <li>
+        <a href="#techstack-bucket">Techstack Bucket</a>
+      </li>
+      <li>
+        <a href="#content-slider">Content Slider</a>
+      </li>
+      <li>
+        <a href="#blog-posts">Blog Posts</a>
+      </li>
+    </ul>
+  </ul>
+</div>

package/src/partials/empty-state-container.html

@@ -0,0 +1,74 @@
+<h3 class="mw-section-subtitle">Empty State</h3>
+
+<div class="mw-grid-2 mw-gap-6">
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Basic & Color Variants</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-2">Default</h5>
+      <div class="mw-empty-state">
+        <div class="mw-empty-state-icon"><i class="fas fa-inbox"></i></div>
+        <p class="mw-empty-state-title">Nothing here yet</p>
+        <p class="mw-empty-state-desc">
+          Start by adding your first item to see it appear here.
+        </p>
+        <button class="mw-btn mw-btn-primary">Add Item</button>
+      </div>
+    </div>
+
+    <div class="mw-card mw-card-simple mw-mt-4">
+      <h5 class="mw-text-medium mw-mb-2">Warning</h5>
+      <div class="mw-empty-state mw-empty-state-warning mw-empty-state-sm">
+        <div class="mw-empty-state-icon">
+          <i class="fas fa-exclamation-triangle"></i>
+        </div>
+        <p class="mw-empty-state-title">No results found</p>
+        <p class="mw-empty-state-desc">
+          Try adjusting your search or filter to find what you're looking for.
+        </p>
+        <button class="mw-btn mw-btn-outline">Clear Filters</button>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-card-title mw-mb-4">More Variants</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-2">Success</h5>
+      <div class="mw-empty-state mw-empty-state-success mw-empty-state-sm">
+        <div class="mw-empty-state-icon">
+          <i class="fas fa-check-circle"></i>
+        </div>
+        <p class="mw-empty-state-title">All done!</p>
+        <p class="mw-empty-state-desc">
+          You've completed all your tasks. Enjoy the rest of the day.
+        </p>
+      </div>
+    </div>
+
+    <div class="mw-card mw-card-simple mw-mt-4">
+      <h5 class="mw-text-medium mw-mb-2">Primary (small)</h5>
+      <div class="mw-empty-state mw-empty-state-primary mw-empty-state-sm">
+        <div class="mw-empty-state-icon"><i class="fas fa-search"></i></div>
+        <p class="mw-empty-state-title">No items match</p>
+        <p class="mw-empty-state-desc">
+          We couldn't find anything matching your query.
+        </p>
+        <button class="mw-btn mw-btn-primary mw-btn-sm">Try Again</button>
+      </div>
+    </div>
+
+    <div class="mw-card mw-card-simple mw-mt-4">
+      <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+      <div class="mw-empty-state mw-empty-state-danger mw-empty-state-sm">
+        <div class="mw-empty-state-icon">
+          <i class="fas fa-times-circle"></i>
+        </div>
+        <p class="mw-empty-state-title">Failed to load</p>
+        <p class="mw-empty-state-desc">
+          Something went wrong while fetching the data.
+        </p>
+        <button class="mw-btn mw-btn-sm mw-btn-outline">Retry</button>
+      </div>
+    </div>
+  </div>
+</div>