maverick-wave 3.0.0

package/src/partials/spinners-container.html

@@ -0,0 +1,92 @@
+<h3 class="mw-section-subtitle">Loding Spinners</h3>
+
+<h3 class="mw-mt-4">Basic Spinners</h3>
+<div class="mw-grid-3 mw-mt-4">
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Border Spinner</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-border"></div>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Dots Spinner</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-dots">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Dual Ring Spinner</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-dual-ring"></div>
+    </div>
+  </div>
+</div>
+
+<h3 class="mw-mt-6">Spinner Sizes</h3>
+<div class="mw-grid-3 mw-mt-4">
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Small</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-border mw-spinner-sm"></div>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Default</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-border"></div>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Large</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-border mw-spinner-lg"></div>
+    </div>
+  </div>
+</div>
+
+<h3 class="mw-mt-6">Spinner Colors</h3>
+<div class="mw-grid-3 mw-mt-4">
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Default</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-border"></div>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Primary</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-border mw-spinner-primary"></div>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-simple" style="height: 250px">
+    <h4 class="mw-mb-2">Secondary</h4>
+    <div class="mw-spinner-container">
+      <div class="mw-spinner-border mw-spinner-secondary"></div>
+    </div>
+  </div>
+</div>
+
+<h3 class="mw-mt-6">Spinner in Context</h3>
+<div class="mw-grid-2 mw-mt-4">
+  <div class="mw-card mw-card-simple" style="position: relative; height: 280px">
+    <div class="mw-spinner-container-overlay">
+      <div class="mw-spinner-dual-ring mw-spinner-primary"></div>
+    </div>
+    <h4 class="mw-mb-2">Overlay Spinner</h4>
+    <p>This card demonstrates a loading overlay with a spinner.</p>
+    <p>
+      The content remains visible but appears disabled during loading states,
+      providing clear visual feedback to users while data is being processed.
+    </p>
+  </div>
+</div>

package/src/partials/stepper-container.html

@@ -0,0 +1,107 @@
+<h3 class="mw-section-subtitle">Stepper</h3>
+
+<div class="mw-grid-2 mw-gap-6">
+  <!-- LEFT: Horizontal steppers -->
+  <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-4">In Progress (step 2 active)</h5>
+      <div class="mw-stepper mw-mb-5">
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator mw-done">
+            <i class="fas fa-check"></i>
+          </div>
+          <span class="mw-stepper-label mw-done">Account</span>
+        </div>
+        <div class="mw-stepper-connector mw-done"></div>
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator mw-active">2</div>
+          <span class="mw-stepper-label mw-active">Details</span>
+        </div>
+        <div class="mw-stepper-connector"></div>
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator">3</div>
+          <span class="mw-stepper-label">Payment</span>
+        </div>
+        <div class="mw-stepper-connector"></div>
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator">4</div>
+          <span class="mw-stepper-label">Confirm</span>
+        </div>
+      </div>
+
+      <h5 class="mw-text-medium mw-mb-4">Completed</h5>
+      <div class="mw-stepper">
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator mw-done">
+            <i class="fas fa-check"></i>
+          </div>
+          <span class="mw-stepper-label mw-done">Setup</span>
+        </div>
+        <div class="mw-stepper-connector mw-done"></div>
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator mw-done">
+            <i class="fas fa-check"></i>
+          </div>
+          <span class="mw-stepper-label mw-done">Review</span>
+        </div>
+        <div class="mw-stepper-connector mw-done"></div>
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator mw-done">
+            <i class="fas fa-check"></i>
+          </div>
+          <span class="mw-stepper-label mw-done">Deploy</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- RIGHT: Vertical stepper -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Vertical</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-stepper-vertical">
+        <div class="mw-stepper-step mw-done">
+          <div class="mw-stepper-indicator mw-done">
+            <i class="fas fa-check"></i>
+          </div>
+          <div class="mw-stepper-content">
+            <p class="mw-stepper-content-title">Project Initialized</p>
+            <p class="mw-stepper-content-desc">
+              Repository created and base structure set up.
+            </p>
+          </div>
+        </div>
+        <div class="mw-stepper-step mw-done">
+          <div class="mw-stepper-indicator mw-done">
+            <i class="fas fa-check"></i>
+          </div>
+          <div class="mw-stepper-content">
+            <p class="mw-stepper-content-title">Dependencies Installed</p>
+            <p class="mw-stepper-content-desc">
+              All npm packages resolved successfully.
+            </p>
+          </div>
+        </div>
+        <div class="mw-stepper-step mw-active">
+          <div class="mw-stepper-indicator mw-active">3</div>
+          <div class="mw-stepper-content">
+            <p class="mw-stepper-content-title">Running Tests</p>
+            <p class="mw-stepper-content-desc">
+              Unit and integration tests in progress...
+            </p>
+          </div>
+        </div>
+        <div class="mw-stepper-step">
+          <div class="mw-stepper-indicator">4</div>
+          <div class="mw-stepper-content">
+            <p class="mw-stepper-content-title">Deploy to Production</p>
+            <p class="mw-stepper-content-desc">
+              Awaiting test completion before release.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/tables-container.html

@@ -0,0 +1,120 @@
+<h3 class="mw-section-subtitle">Tables</h3>
+
+<div class="mw-grid-1">
+  <div class="mw-card mw-card-simple mw-mb-6">
+    <h4 class="mw-mb-2">Basic Table</h4>
+    <p class="mw-text-muted">
+      This is the basic table that supports all functions except the complete
+      responsive feeling with the cards
+    </p>
+
+    <table class="mw-table">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Name</th>
+          <th>Position</th>
+          <th>Location</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>John Doe</td>
+          <td>Developer</td>
+          <td>New York</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jane Smith</td>
+          <td>Designer</td>
+          <td>London</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>Bob Johnson</td>
+          <td>Manager</td>
+          <td>Berlin</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="mw-card mw-card-simple mw-mb-6">
+    <h4 class="mw-mb-2">Compact Table</h4>
+    <p class="mw-text-muted">
+      Same table as basic table but a bit with less spacing and smaller fonts
+    </p>
+
+    <table class="mw-table mw-table-compact">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Name</th>
+          <th>Position</th>
+          <th>Location</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>John Doe</td>
+          <td>Developer</td>
+          <td>New York</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>Jane Smith</td>
+          <td>Designer</td>
+          <td>London</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>Bob Johnson</td>
+          <td>Manager</td>
+          <td>Berlin</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="mw-card mw-card-simple">
+    <h4 class="mw-mb-2">Responsive Table</h4>
+    <p class="mw-text-muted">
+      This is the same table but with cards for smaller screens
+    </p>
+
+    <div class="mw-table-responsive">
+      <table class="mw-table mw-table-cards">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Name</th>
+            <th>Position</th>
+            <th>Location</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td data-label="#">1</td>
+            <td data-label="Name">John Doe</td>
+            <td data-label="Position">Developer</td>
+            <td data-label="Location">New York</td>
+          </tr>
+          <tr>
+            <td data-label="#">2</td>
+            <td data-label="Name">Jane Smith</td>
+            <td data-label="Position">Designer</td>
+            <td data-label="Location">London</td>
+          </tr>
+          <tr>
+            <td data-label="#">3</td>
+            <td data-label="Name">Bob Johnson</td>
+            <td data-label="Position">Manager</td>
+            <td data-label="Location">Berlin</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

package/src/partials/tabs-container.html

@@ -0,0 +1,263 @@
+<h3 class="mw-section-subtitle">Tabs</h3>
+
+<h3 class="mw-mb-4">Default Tabs</h3>
+<div class="mw-tabs mw-mb-6">
+  <div class="mw-tabs-nav">
+    <div class="mw-tabs-nav-item active" data-tab="tab1">Features</div>
+    <div class="mw-tabs-nav-item" data-tab="tab2">Specifications</div>
+    <div class="mw-tabs-nav-item" data-tab="tab3">Reviews</div>
+    <div class="mw-tabs-nav-item" data-tab="tab4">Support</div>
+  </div>
+  <div class="mw-tabs-content">
+    <div class="mw-tabs-panel active" id="tab1">
+      <div class="mw-card mw-card-simple">
+        <h4>Key Features</h4>
+        <p>
+          MaverickWave CSS framework provides a comprehensive set of features to
+          make your web development faster and more efficient:
+        </p>
+        <ul>
+          <li>Responsive grid system with flexible layouts</li>
+          <li>Customizable components with consistent design language</li>
+          <li>Dark and light theme support with smooth transitions</li>
+          <li>Utility classes for rapid development and prototyping</li>
+          <li>Modern design aesthetic with attention to detail</li>
+        </ul>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="tab2">
+      <div class="mw-card mw-card-simple">
+        <h4>Technical Specifications</h4>
+        <p>
+          MaverickWave CSS framework is built with modern web standards in mind:
+        </p>
+        <ul>
+          <li>Built with SCSS for better organization and maintainability</li>
+          <li>Optimized file size (under 30KB minified and gzipped)</li>
+          <li>
+            Compatible with all modern browsers (Chrome, Firefox, Safari, Edge)
+          </li>
+          <li>No JavaScript dependencies for core functionality</li>
+          <li>CSS custom properties for easy theming and customization</li>
+        </ul>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="tab3">
+      <div class="mw-card mw-card-simple">
+        <h4>User Reviews</h4>
+        <div class="mw-mb-4">
+          <h5>Alex T. - Frontend Developer</h5>
+          <p>
+            "MaverickWave CSS framework has simplified my workflow tremendously.
+            The components are well-designed and the utility classes save me
+            hours of custom CSS writing. The documentation is clear and
+            comprehensive."
+          </p>
+        </div>
+        <div class="mw-mb-4">
+          <h5>Jamie L. - UX Designer</h5>
+          <p>
+            "I love how easy it is to customize the framework to match my brand.
+            The dark/light theme toggle was a breeze to implement and my clients
+            are impressed with the polished look!"
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="tab4">
+      <div class="mw-card mw-card-simple">
+        <h4>Support Options</h4>
+        <p>I offer multiple support channels for MaverickWave:</p>
+        <ul>
+          <li>Comprehensive documentation</li>
+          <li>Regular updates with new features and improvements</li>
+          <li>Dedicated support for power users</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h3 class="mw-mb-4">Vertical Tabs</h3>
+<div class="mw-tabs mw-tabs-vertical mw-mb-6">
+  <div class="mw-tabs-nav">
+    <div class="mw-tabs-nav-item active" data-tab="vtab1">Getting Started</div>
+    <div class="mw-tabs-nav-item" data-tab="vtab2">Configuration</div>
+    <div class="mw-tabs-nav-item" data-tab="vtab3">Customization</div>
+    <div class="mw-tabs-nav-item" data-tab="vtab4">Best Practices</div>
+  </div>
+  <div class="mw-tabs-content">
+    <div class="mw-tabs-panel active" id="vtab1">
+      <div class="mw-card mw-card-simple">
+        <h4>Getting Started Guide</h4>
+        <p>Begin by creating a new project folder:</p>
+        <div class="mw-terminal mw-my-3">
+          <span class="mw-terminal-line">mkdir my-project</span>
+          <span class="mw-terminal-line">cd my-project</span>
+          <span class="mw-terminal-line">touch index.html styles.css</span>
+        </div>
+        <p>Add the CSS to your HTML:</p>
+        <div class="mw-code-container">
+          <pre><code>&lt;link rel="stylesheet" 
+href="path/maverick-wave.min.css"&gt;</code></pre>
+        </div>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="vtab2">
+      <div class="mw-card mw-card-simple">
+        <h4>Configuration Options</h4>
+        <p>
+          MaverickWave offers flexibility in how you configure and customize its
+          appearance. The primary methods involve overriding CSS variables or,
+          for deeper integration, overriding Sass variables during a build
+          process.
+        </p>
+
+        <h5 class="mw-mt-4 mw-mb-2">Theme Mode (SCSS Build Only)</h5>
+        <p>
+          If using the SCSS source files, you can control the theme output by
+          setting the <code>$mw-theme-mode</code> variable before importing the
+          framework:
+        </p>
+        <ul>
+          <li>
+            <code>'switchable'</code> (Default): Includes dark and light themes,
+            controlled by JS.
+          </li>
+          <li><code>'dark'</code>: Compiles only dark theme styles.</li>
+          <li><code>'light'</code>: Compiles only light theme styles.</li>
+        </ul>
+        <pre class="mw-code-block"><code>// Your main.scss
+$mw-theme-mode: 'switchable'; // Or 'dark', 'light'    
+@import 'path/to/maverick-wave/scss/maverick-wave';</code></pre>
+        <p class="mw-text-warning mw-mt-2">
+          <i class="fas fa-exclamation-triangle mw-mr-1"></i>
+          Note: The main header/navigation currently retains its default dark
+          appearance regardless of this setting.
+        </p>
+
+        <h5 class="mw-mt-4 mw-mb-2">Color & Font Overrides</h5>
+        <p>
+          See the "Customization" tab for details on overriding colors and fonts
+          using either CSS or SCSS variables.
+        </p>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="vtab3">
+      <div class="mw-card mw-card-simple">
+        <h4>Customization Guide</h4>
+        <p>
+          Choose the customization method that best suits your project setup:
+        </p>
+
+        <h5 class="mw-mt-4 mw-mb-2">Method 1: CSS Variable Overrides</h5>
+        <p>
+          Ideal for CDN/pre-compiled CSS usage. Define overrides in your own CSS
+          file (loaded after MaverickWave):
+        </p>
+        <pre class="mw-code-block"><code>/* your-custom-styles.css */
+:root {
+  --mw-primary-color: #e94560; 
+  --mw-dark-page-background: #1a1a2e; 
+  --mw-font-family-base: 'Your Custom Font', sans-serif; 
+  /* ... other overrides ... */
+}</code></pre>
+
+        <h5 class="mw-mt-4 mw-mb-2">Method 2: SCSS Variable Overrides</h5>
+        <p>
+          Requires a Sass build process. Define overrides in your main SCSS file
+          <em>before</em> importing MaverickWave:
+        </p>
+        <pre class="mw-code-block"><code>// your-main.scss
+$primary-color: #e94560;
+$font-family: 'Your Custom Font', sans-serif;
+// ... other overrides ...
+    
+@import 'path/to/maverick-wave/scss/maverick-wave';</code></pre>
+        <p>
+          This method allows framework-internal calculations (like derived alert
+          backgrounds) to use your custom base colors.
+        </p>
+
+        <h5 class="mw-mt-4 mw-mb-2">Adding Custom Fonts</h5>
+        <p>
+          Remember to load custom fonts using <code>@font-face</code> rules in
+          your CSS/SCSS before applying them via the
+          <code>--mw-font-family-base</code> or
+          <code>$font-family</code> variable.
+        </p>
+        <p class="mw-mt-4">
+          <button
+            type="button"
+            onclick="location.href = '#get-started'"
+            class="mw-btn mw-btn-link mw-p-0"
+          >
+            Refer to the "Get Started" section
+          </button>
+          for more detailed examples.
+        </p>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="vtab4">
+      <div class="mw-card mw-card-simple">
+        <h4>Best Practices</h4>
+        <p>When working with MaverickWave:</p>
+        <ul>
+          <li>Use semantic HTML elements for better accessibility</li>
+          <li>Leverage utility classes for quick adjustments</li>
+          <li>Customize variables to match your brand identity</li>
+          <li>Test thoroughly across different browsers and devices</li>
+          <li>Consider performance by only including components you need</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h3 class="mw-mb-4">Pills Style Tabs</h3>
+<div class="mw-tabs mw-tabs-pills">
+  <div class="mw-tabs-nav">
+    <div class="mw-tabs-nav-item active" data-tab="ptab1">Dashboard</div>
+    <div class="mw-tabs-nav-item" data-tab="ptab2">Profile</div>
+    <div class="mw-tabs-nav-item" data-tab="ptab3">Messages</div>
+    <div class="mw-tabs-nav-item" data-tab="ptab4">Settings</div>
+  </div>
+  <div class="mw-tabs-content">
+    <div class="mw-tabs-panel active" id="ptab1">
+      <div class="mw-card mw-card-simple">
+        <h4>Dashboard Overview</h4>
+        <p>
+          Welcome to your dashboard! Here you can monitor key metrics, recent
+          activity, and important notifications at a glance.
+        </p>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="ptab2">
+      <div class="mw-card mw-card-simple">
+        <h4>User Profile</h4>
+        <p>
+          Manage your profile information, update your avatar, and customize
+          your bio and contact details.
+        </p>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="ptab3">
+      <div class="mw-card mw-card-simple">
+        <h4>Message Center</h4>
+        <p>
+          View and respond to messages from your team members. Organize
+          conversations and track important communications.
+        </p>
+      </div>
+    </div>
+    <div class="mw-tabs-panel" id="ptab4">
+      <div class="mw-card mw-card-simple">
+        <h4>Account Settings</h4>
+        <p>
+          Configure your account preferences, notification settings, privacy
+          options, and security features.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>