maverick-wave 3.0.0

package/src/partials/tags-container.html

@@ -0,0 +1,168 @@
+<h3 class="mw-section-subtitle">Tags</h3>
+
+<div class="mw-grid-3 mw-gap-6">
+  <!-- COLUMN 1: Basic & Status -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Status & Types</h3>
+    <div class="mw-card mw-card-simple">
+      <!-- Basic -->
+      <h5 class="mw-text-medium mw-mb-2">Default</h5>
+      <div class="mw-tags mw-mb-4">
+        <span class="mw-tags-item">Frontend</span>
+        <span class="mw-tags-item">Backend</span>
+        <span class="mw-tags-item">DevOps</span>
+      </div>
+
+      <!-- Primary (Main Tech) -->
+      <h5 class="mw-text-medium mw-mb-2">Primary</h5>
+      <div class="mw-tags mw-tags-primary mw-mb-4">
+        <span class="mw-tags-item">Angular</span>
+        <span class="mw-tags-item">Spring Boot</span>
+        <span class="mw-tags-item">Kotlin</span>
+      </div>
+
+      <!-- Success (Status) -->
+      <h5 class="mw-text-medium mw-mb-2">Success</h5>
+      <div class="mw-tags mw-tags-success mw-mb-4">
+        <span class="mw-tags-item">
+          <i class="fas fa-check mw-tags-icon"></i>Completed
+        </span>
+        <span class="mw-tags-item">Deployed</span>
+        <span class="mw-tags-item">Stable</span>
+      </div>
+
+      <!-- Info (Metadata) -->
+      <h5 class="mw-text-medium mw-mb-2">Info</h5>
+      <div class="mw-tags mw-tags-info mw-mb-4">
+        <span class="mw-tags-item">v2.4.0</span>
+        <span class="mw-tags-item">
+          <i class="fas fa-info-circle mw-tags-icon"></i>Beta
+        </span>
+        <span class="mw-tags-item">Documentation</span>
+      </div>
+
+      <!-- Secondary (Tools) -->
+      <h5 class="mw-text-medium mw-mb-2">Secondary</h5>
+      <div class="mw-tags mw-tags-secondary">
+        <span class="mw-tags-item">Docker</span>
+        <span class="mw-tags-item">Kubernetes</span>
+        <span class="mw-tags-item">Git</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- COLUMN 2: Sizes & Icons -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Sizes & Formatting</h3>
+    <div class="mw-card mw-card-simple">
+      <!-- Default -->
+      <h5 class="mw-text-medium mw-mb-2">Default Size</h5>
+      <div class="mw-tags mw-mb-4">
+        <span class="mw-tags-item">Typescript</span>
+        <span class="mw-tags-item">
+          <i class="fas fa-cube mw-tags-icon"></i>Components
+        </span>
+        <span class="mw-tags-item mw-tags-removable">
+          filter: active
+          <button
+            type="button"
+            class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            onclick="this.closest('.mw-tags-item').remove()"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </span>
+      </div>
+
+      <!-- Large (Categories) -->
+      <h5 class="mw-text-medium mw-mb-2">Large (Categories)</h5>
+      <div class="mw-tags mw-tags-lg mw-mb-4">
+        <span class="mw-tags-item">Web Development</span>
+        <span class="mw-tags-item">Design System</span>
+      </div>
+
+      <!-- With Details -->
+      <h5 class="mw-text-medium mw-mb-2">With Details</h5>
+      <div class="mw-tags">
+        <span class="mw-tags-item">
+          <i class="fab fa-npm mw-tags-icon"></i>
+          npm install
+          <span class="mw-text-muted mw-ml-1 mw-text-xs">(latest)</span>
+        </span>
+        <span class="mw-tags-item">
+          <i class="fas fa-code-branch mw-tags-icon"></i>
+          main
+          <span class="mw-text-muted mw-ml-1 mw-text-xs">(protected)</span>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <!-- COLUMN 3: Interaction -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Interactive Tags</h3>
+    <div class="mw-card mw-card-simple">
+      <h5 class="mw-text-medium mw-mb-2">Removable Input (Primary)</h5>
+      <div class="mw-tags mw-tags-primary mw-mb-4">
+        <span class="mw-tags-item mw-tags-removable">
+          React
+          <button
+            type="button"
+            class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            onclick="this.closest('.mw-tags-item').remove()"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </span>
+        <span class="mw-tags-item mw-tags-removable">
+          Vue.js
+          <button
+            type="button"
+            class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            onclick="this.closest('.mw-tags-item').remove()"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </span>
+      </div>
+
+      <h5 class="mw-text-medium mw-mb-2">Removable Status (Success)</h5>
+      <div class="mw-tags mw-tags-success mw-mb-4">
+        <span class="mw-tags-item mw-tags-removable">
+          <i class="fas fa-user-check mw-tags-icon"></i>Online
+          <button
+            type="button"
+            class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            onclick="this.closest('.mw-tags-item').remove()"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </span>
+        <span class="mw-tags-item mw-tags-removable">
+          Available
+          <button
+            type="button"
+            class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            onclick="this.closest('.mw-tags-item').remove()"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </span>
+      </div>
+
+      <h5 class="mw-text-medium mw-mb-2">Large Removable</h5>
+      <div class="mw-tags mw-tags-lg mw-tags-info">
+        <span class="mw-tags-item mw-tags-removable">
+          Filter: Architecture
+          <button
+            type="button"
+            class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
+            onclick="this.closest('.mw-tags-item').remove()"
+          >
+            <i class="fas fa-times"></i>
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/techstack-bucket-container.html

@@ -0,0 +1,174 @@
+<h3 class="mw-section-subtitle mw-mb-6">Technology Stack Bucket</h3>
+<p class="mw-text-muted">
+  The Techstack component allows you to showcase toolsets and skills in a clean,
+  organized bucket layout. Each item can feature a logo, optional labels, and a
+  direct link to the technology's homepage.
+</p>
+
+<div class="mw-grid-4">
+  <div>
+    <h4 class="mw-mb-2">Large Items with Description</h4>
+    <div class="mw-techstack-bucket">
+      <a href="https://angular.io" target="_blank" class="mw-techstack-item">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/6/67/Angular_gradient_logo.png"
+          alt="Angular"
+          class="mw-techstack-logo"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">Angular</span>
+          <span class="mw-techstack-desc">Frontend</span>
+        </div>
+      </a>
+      <a href="https://sass-lang.com" target="_blank" class="mw-techstack-item">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/9/96/Sass_Logo_Color.svg"
+          alt="Sass"
+          class="mw-techstack-logo"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">SCSS</span>
+          <span class="mw-techstack-desc">Styles</span>
+        </div>
+      </a>
+      <a
+        href="https://www.typescriptlang.org"
+        target="_blank"
+        class="mw-techstack-item"
+      >
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg"
+          alt="TypeScript"
+          class="mw-techstack-logo"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">TypeScript</span>
+          <span class="mw-techstack-desc">Strict Typing</span>
+        </div>
+      </a>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Small Items (Logos Only)</h4>
+    <div class="mw-techstack-bucket mw-justify-center">
+      <a
+        href="#"
+        class="mw-techstack-item mw-techstack-item-sm"
+        data-tooltip="Git"
+      >
+        <img
+          src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg"
+          class="mw-techstack-logo"
+          alt="Git"
+        />
+      </a>
+      <a
+        href="#"
+        class="mw-techstack-item mw-techstack-item-sm"
+        data-tooltip="VS Code"
+      >
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg"
+          class="mw-techstack-logo"
+          alt="VS Code"
+        />
+      </a>
+      <a
+        href="#"
+        class="mw-techstack-item mw-techstack-item-sm"
+        data-tooltip="Docker"
+      >
+        <img
+          src="https://www.vectorlogo.zone/logos/docker/docker-icon.svg"
+          class="mw-techstack-logo"
+          alt="Docker"
+        />
+      </a>
+      <a
+        href="#"
+        class="mw-techstack-item mw-techstack-item-sm"
+        data-tooltip="Figma"
+      >
+        <img
+          src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg"
+          class="mw-techstack-logo"
+          alt="Figma"
+        />
+      </a>
+      <a
+        href="#"
+        class="mw-techstack-item mw-techstack-item-sm"
+        data-tooltip="NPM"
+      >
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/d/db/Npm-logo.svg"
+          class="mw-techstack-logo"
+          alt="NPM"
+        />
+      </a>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Small Items with Name</h4>
+    <div class="mw-techstack-bucket">
+      <a href="#" class="mw-techstack-item mw-techstack-item-sm">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
+          class="mw-techstack-logo"
+          alt="React"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">React</span>
+        </div>
+      </a>
+      <a href="#" class="mw-techstack-item mw-techstack-item-sm">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg"
+          class="mw-techstack-logo"
+          alt="Vue"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">Vue.js</span>
+        </div>
+      </a>
+      <a href="#" class="mw-techstack-item mw-techstack-item-sm">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Tailwind_CSS_Logo.svg"
+          class="mw-techstack-logo"
+          alt="Tailwind"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">Tailwind</span>
+        </div>
+      </a>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Dashed Variant (Mixed Content)</h4>
+    <div class="mw-techstack-bucket mw-techstack-bucket-dashed">
+      <a href="#" class="mw-techstack-item mw-techstack-item-sm">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Rust_programming_language_black_logo.svg"
+          class="mw-techstack-logo"
+          alt="Rust"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">Rust</span>
+        </div>
+      </a>
+      <a href="#" class="mw-techstack-item mw-techstack-item-sm">
+        <img
+          src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg"
+          class="mw-techstack-logo"
+          alt="Python"
+        />
+        <div class="mw-techstack-info">
+          <span class="mw-techstack-name">Python</span>
+        </div>
+      </a>
+    </div>
+  </div>
+</div>

package/src/partials/tiles-container.html

@@ -0,0 +1,245 @@
+<h3 class="mw-section-subtitle">Tiles</h3>
+<p class="mw-text-muted">
+  Here you can create clickable tiles with header, information and a possible
+  image.
+</p>
+
+<div class="mw-grid-stack-stretch">
+  <div>
+    <h4 class="mw-mb-2">Basic Tiles in 3 Columns</h4>
+    <div class="mw-tiles">
+      <div class="mw-tile">
+        <h3 class="mw-tile-header">Project Management</h3>
+        <div class="mw-tile-body">
+          <p>Organize tasks and track project progress</p>
+          <p>Collaborate with team members efficiently</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-15</div>
+      </div>
+
+      <div class="mw-tile">
+        <h3 class="mw-tile-header">Analytics Dashboard</h3>
+        <div class="mw-tile-body">
+          <p>Real-time data visualization and insights</p>
+          <p>Track KPIs and performance metrics</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2025-01-02</div>
+      </div>
+
+      <div class="mw-tile">
+        <h3 class="mw-tile-header">Customer Support</h3>
+        <div class="mw-tile-body">
+          <p>24/7 help desk and ticket management</p>
+          <p>Live chat and knowledge base access</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-11-23</div>
+      </div>
+
+      <div class="mw-tile">
+        <h3 class="mw-tile-header">Document Management</h3>
+        <div class="mw-tile-body">
+          <p>Secure file storage and version control</p>
+          <p>Easy sharing and collaboration tools</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-30</div>
+      </div>
+
+      <div class="mw-tile">
+        <h3 class="mw-tile-header">Billing & Invoices</h3>
+        <div class="mw-tile-body">
+          <p>Automated invoicing and payment tracking</p>
+          <p>Financial reporting and tax preparation</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2025-01-01</div>
+      </div>
+
+      <div class="mw-tile">
+        <h3 class="mw-tile-header">User Management</h3>
+        <div class="mw-tile-body">
+          <p>Role-based access control and permissions</p>
+          <p>User authentication and security settings</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-28</div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Basic Tiles with Images in 2 Columns</h4>
+    <div class="mw-tiles mw-tiles-2col">
+      <div class="mw-tile">
+        <div class="mw-tile-img">
+          <img
+            src="https://picsum.photos/80/80?random=1"
+            alt="E-commerce platform"
+          />
+        </div>
+        <h3 class="mw-tile-header">E-commerce Platform</h3>
+        <div class="mw-tile-body">
+          <p>Complete online store management solution</p>
+          <p>Inventory tracking and order fulfillment</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-15</div>
+      </div>
+
+      <div class="mw-tile">
+        <div class="mw-tile-img">
+          <img
+            src="https://picsum.photos/80/80?random=2"
+            alt="Marketing automation"
+          />
+        </div>
+        <h3 class="mw-tile-header">Marketing Automation</h3>
+        <div class="mw-tile-body">
+          <p>Email campaigns and lead nurturing workflows</p>
+          <p>Social media scheduling and analytics</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2025-01-02</div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Small Tiles in 4 Columns</h4>
+    <div class="mw-tiles mw-tiles-4col">
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">API Documentation</h3>
+        <div class="mw-tile-body">
+          <p>REST API reference guide</p>
+          <p>Code examples and tutorials</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2025-01-01</div>
+      </div>
+
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">Security Center</h3>
+        <div class="mw-tile-body">
+          <p>Two-factor authentication</p>
+          <p>Security audit logs</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-31</div>
+      </div>
+
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">Backup & Recovery</h3>
+        <div class="mw-tile-body">
+          <p>Automated daily backups</p>
+          <p>One-click data restoration</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-29</div>
+      </div>
+
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">Performance Monitor</h3>
+        <div class="mw-tile-body">
+          <p>Server uptime: 99.9%</p>
+          <p>Response time: 150ms</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2025-01-02</div>
+      </div>
+
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">Integration Hub</h3>
+        <div class="mw-tile-body">
+          <p>Connect third-party apps</p>
+          <p>Webhook configurations</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-27</div>
+      </div>
+
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">Mobile App</h3>
+        <div class="mw-tile-body">
+          <p>iOS and Android apps</p>
+          <p>Offline sync capabilities</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-25</div>
+      </div>
+
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">Training Center</h3>
+        <div class="mw-tile-body">
+          <p>Video tutorials available</p>
+          <p>Certification programs</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2025-01-01</div>
+      </div>
+
+      <div class="mw-tile mw-tile-sm">
+        <h3 class="mw-tile-header">System Status</h3>
+        <div class="mw-tile-body">
+          <p>All systems operational</p>
+          <p>Last incident: None</p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-30</div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Large Tiles</h4>
+    <div class="mw-tiles">
+      <div class="mw-tile mw-tile-lg">
+        <div class="mw-tile-img">
+          <img
+            src="https://picsum.photos/80/80?random=3"
+            alt="Cloud infrastructure"
+          />
+        </div>
+        <h2 class="mw-tile-header">Cloud Infrastructure</h2>
+        <div class="mw-tile-body">
+          <p>
+            Scalable cloud hosting with auto-scaling capabilities and 99.99%
+            uptime guarantee
+          </p>
+          <p>
+            Global CDN distribution with edge servers in 25+ locations worldwide
+          </p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-28</div>
+      </div>
+
+      <div class="mw-tile mw-tile-lg">
+        <div class="mw-tile-img">
+          <img
+            src="https://picsum.photos/100/100?random=8"
+            alt="Business intelligence"
+          />
+        </div>
+        <h2 class="mw-tile-header">Business Intelligence Suite</h2>
+        <div class="mw-tile-body">
+          <p>
+            Advanced data analytics with machine learning insights and
+            predictive modeling
+          </p>
+          <p>
+            Custom dashboards with real-time data visualization and automated
+            reporting
+          </p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-31</div>
+      </div>
+
+      <div class="mw-tile mw-tile-lg">
+        <div class="mw-tile-img">
+          <img
+            src="https://picsum.photos/100/100?random=9"
+            alt="Enterprise solutions"
+          />
+        </div>
+        <h2 class="mw-tile-header">Enterprise Solutions</h2>
+        <div class="mw-tile-body">
+          <p>
+            Comprehensive business management platform with CRM, ERP, and
+            workflow automation
+          </p>
+          <p>
+            Custom integrations and dedicated support for enterprise-level
+            requirements
+          </p>
+        </div>
+        <div class="mw-tile-footer">Last updated: 2024-12-23</div>
+      </div>
+    </div>
+  </div>
+</div>