maverick-wave 3.0.0

package/src/scss/components/_spinners.scss

@@ -0,0 +1,208 @@
+@use '../abstracts' as *;
+
+$_size-default: 4rem;
+$_size-sm: 2.5rem;
+$_size-lg: 7.5rem;
+
+.mw-spinner {
+  display: inline-block;
+  position: relative;
+
+  // Default spinner (circle border)
+  &-border {
+    width: $_size-default;
+    height: $_size-default;
+    border: 0.4rem solid var(--mw-gray-background);
+    border-radius: radius('full');
+    border-top-color: var(--mw-primary-color);
+    animation: mw-spin 1.2s linear infinite;
+
+    // Size variants
+    &.mw-spinner-sm {
+      width: $_size-sm;
+      height: $_size-sm;
+      border-width: 0.3rem;
+      animation: mw-spin 1.4s linear infinite;
+    }
+
+    &.mw-spinner-lg {
+      width: $_size-lg;
+      height: $_size-lg;
+      border-width: 0.6rem;
+      animation: mw-spin 1s linear infinite;
+    }
+
+    // Color variants
+    &.mw-spinner-primary {
+      border-top-color: var(--mw-primary-color);
+    }
+
+    &.mw-spinner-secondary {
+      border-top-color: var(--mw-secondary-color);
+    }
+  }
+
+  // Dots spinner
+  &-dots {
+    width: $_size-default;
+    height: 1rem;
+    text-align: center;
+
+    > div {
+      width: 1rem;
+      height: 1rem;
+      background: var(--mw-primary-color);
+      border-radius: radius('full');
+      display: inline-block;
+      margin: spacing('0') 0.2rem;
+      animation: mw-bounce 1.4s infinite ease-in-out both;
+
+      &:nth-child(1) {
+        animation-delay: -0.32s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -0.16s;
+      }
+    }
+
+    // Size variants
+    &.mw-spinner-sm {
+      width: $_size-sm;
+      height: 0.75rem;
+
+      > div {
+        width: 0.75rem;
+        height: 0.75rem;
+        margin: spacing('0') 0.1rem;
+      }
+    }
+
+    &.mw-spinner-lg {
+      width: $_size-lg;
+      height: 1.5rem;
+
+      > div {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin: spacing('0') 0.3rem;
+      }
+    }
+
+    // Color variants
+    &.mw-spinner-primary > div {
+      background: var(--mw-primary-color);
+    }
+
+    &.mw-spinner-secondary > div {
+      background: var(--mw-secondary-color);
+    }
+  }
+
+  // Dual ring spinner
+  &-dual-ring {
+    width: $_size-default;
+    height: $_size-default;
+
+    &:after {
+      content: ' ';
+      display: block;
+      width: $_size-default;
+      height: $_size-default;
+      border-radius: radius('full');
+      border: 0.4rem solid var(--mw-primary-color);
+      border-color: var(--mw-primary-color) transparent var(--mw-primary-color)
+        transparent;
+      animation: mw-spin 1.5s linear infinite;
+    }
+
+    // Size variants
+    &.mw-spinner-sm {
+      width: $_size-sm;
+      height: $_size-sm;
+
+      &:after {
+        width: $_size-sm;
+        height: $_size-sm;
+        border-width: 0.3rem;
+      }
+    }
+
+    &.mw-spinner-lg {
+      width: $_size-lg;
+      height: $_size-lg;
+
+      &:after {
+        width: $_size-lg;
+        height: $_size-lg;
+        border-width: 0.5rem;
+      }
+    }
+
+    // Color variants
+    &.mw-spinner-primary:after {
+      border-color: var(--mw-primary-color) transparent var(--mw-primary-color)
+        transparent;
+    }
+
+    &.mw-spinner-secondary:after {
+      border-color: var(--mw-secondary-color) transparent
+        var(--mw-secondary-color) transparent;
+    }
+  }
+}
+
+// Spinner container for centering
+.mw-spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 80%; // a little further up than the center
+
+  &-overlay {
+    @extend .mw-spinner-container;
+    position: absolute;
+    top: spacing('0');
+    left: spacing('0');
+    right: spacing('0');
+    bottom: spacing('0');
+    background: var(--mw-gray-background);
+    backdrop-filter: blur(2px);
+    display: flex;
+    height: 100%;
+    z-index: z-index('spinner');
+  }
+}
+
+// Animations
+@keyframes mw-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes mw-bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+@keyframes mw-pulse {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/src/scss/components/_stepper.scss

@@ -0,0 +1,145 @@
+@use 'sass:math';
+@use '../abstracts' as *;
+
+// ===== Horizontal Stepper =====
+.mw-stepper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+
+  &-step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: spacing('2');
+    flex: 1;
+    min-width: 0;
+  }
+
+  // Horizontal connector line between steps
+  &-connector {
+    flex: 1;
+    height: 2px;
+    background: var(--mw-border);
+    margin-top: spacing('4');
+    transition: background 0.3s ease;
+
+    &.mw-done {
+      background: var(--mw-primary-color);
+    }
+  }
+
+  // Step circle with number or icon
+  &-indicator {
+    width: spacing('7');
+    height: spacing('7');
+    border-radius: radius('full');
+    border: 2px solid var(--mw-border);
+    background: var(--mw-card-background);
+    color: var(--mw-text-muted-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: font-size('sm');
+    font-weight: font-weight('bold');
+    transition: var(--mw-transition);
+    flex-shrink: 0;
+
+    &.mw-active {
+      border-color: var(--mw-primary-color);
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
+    }
+
+    &.mw-done {
+      border-color: var(--mw-success-color);
+      background: var(--mw-success-color);
+      color: var(--mw-primary-text-color);
+    }
+  }
+
+  // Step label below the circle
+  &-label {
+    font-size: font-size('xs');
+    color: var(--mw-text-muted-color);
+    text-align: center;
+    line-height: 1.3;
+    transition: color 0.3s ease;
+
+    &.mw-active {
+      color: var(--mw-primary-color);
+      font-weight: font-weight('medium');
+    }
+
+    &.mw-done {
+      color: var(--mw-success-color);
+    }
+  }
+
+  @include media-down('sm') {
+    &-label {
+      font-size: font-size('2xs');
+    }
+  }
+}
+
+// ===== Vertical Stepper =====
+.mw-stepper-vertical {
+  display: flex;
+  flex-direction: column;
+
+  .mw-stepper-step {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: spacing('3');
+    position: relative;
+    padding-bottom: spacing('5');
+
+    &:last-child {
+      padding-bottom: spacing('0');
+    }
+
+    // Connecting line drawn below each step (except last)
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      left: calc(#{spacing('7')} / 2 - 1px);
+      top: spacing('7');
+      bottom: 0;
+      width: 2px;
+      background: var(--mw-border);
+      transition: background 0.3s ease;
+    }
+
+    &.mw-done:not(:last-child)::after {
+      background: var(--mw-primary-color);
+    }
+  }
+
+  .mw-stepper-indicator {
+    flex-shrink: 0;
+  }
+
+  // Content area next to the indicator
+  .mw-stepper-content {
+    flex: 1;
+
+    &-title {
+      font-size: font-size('base');
+      font-weight: font-weight('medium');
+      color: var(--mw-text-color);
+      margin-bottom: spacing('1');
+
+      .mw-stepper-step.mw-active & {
+        color: var(--mw-primary-color);
+      }
+    }
+
+    &-desc {
+      font-size: font-size('sm');
+      color: var(--mw-text-muted-color);
+      line-height: 1.5;
+    }
+  }
+}

package/src/scss/components/_tables.scss

@@ -0,0 +1,127 @@
+@use '../abstracts' as *;
+
+// Base table styles
+.mw-table {
+  width: 98%;
+  margin: spacing('1');
+  border-collapse: collapse;
+  background: var(--mw-card-background);
+
+  th,
+  td {
+    padding: spacing('2') spacing('3');
+    text-align: left;
+    border: 1px solid var(--mw-border);
+    color: var(--mw-text-muted-color);
+  }
+
+  th {
+    font-weight: font-weight('medium');
+    color: var(--mw-primary-text-color);
+    background: var(--mw-primary-color);
+  }
+
+  // Zebra striping
+  tr:nth-child(even) {
+    background: var(--mw-gray-background);
+  }
+
+  tr:hover {
+    td {
+      background: var(--mw-primary-background-hover);
+      color: var(--mw-text-color);
+    }
+  }
+
+  @include media-down('sm') {
+    th,
+    td {
+      padding: spacing('1') spacing('3');
+      font-size: font-size('xs');
+    }
+  }
+}
+
+// Responsive table container
+.mw-table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: spacing('1');
+
+  .mw-table {
+    margin-bottom: spacing('0');
+  }
+}
+
+// Card view for mobile - clean and simple approach
+.mw-table-cards {
+  @include media-down('md') {
+    // Hide table header on mobile
+    thead {
+      display: none;
+    }
+
+    // Make each row a card
+    tr {
+      display: block;
+      margin-bottom: spacing('3');
+      box-shadow: 0 5px 7px var(--mw-shadow);
+      background: var(--mw-card-background);
+    }
+
+    // Style each cell as a row in the card
+    td {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: spacing('1') spacing('4');
+
+      // Add the column header as a label
+      &::before {
+        content: attr(data-label);
+        font-weight: font-weight('medium');
+        color: var(--mw-text-color);
+        flex: 1;
+        text-align: left;
+      }
+
+      // The cell value
+      span,
+      a,
+      div {
+        flex: 2;
+        text-align: right;
+      }
+    }
+
+    // Add some visual separation between cards
+    tr:not(:last-child) {
+      margin-bottom: spacing('4');
+    }
+  }
+}
+
+// Compact table
+.mw-table-compact {
+  th,
+  td {
+    padding: spacing('1') spacing('2');
+    font-size: font-size('sm');
+  }
+
+  @include media-down('sm') {
+    th,
+    td {
+      font-size: font-size('2xs');
+    }
+  }
+}
+
+// Hoverable rows
+.mw-table-hover {
+  tbody tr:hover {
+    background: var(--mw-primary-background-hover);
+  }
+}

package/src/scss/components/_tabs.scss

@@ -0,0 +1,146 @@
+@use '../abstracts' as *;
+
+.mw-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-nav {
+    display: flex;
+    border-bottom: 1px solid var(--mw-primary-color-hover);
+    margin-bottom: spacing('3');
+    overflow-x: auto;
+
+    @include media-down('sm') {
+      flex-wrap: nowrap;
+      -webkit-overflow-scrolling: touch;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &-nav-item {
+    padding: spacing('3');
+    cursor: pointer;
+    font-weight: font-weight('medium');
+    color: var(--mw-text-muted-color);
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+
+    &:hover {
+      color: var(--mw-primary-color);
+    }
+
+    &.active {
+      color: var(--mw-primary-color);
+      border-bottom-color: var(--mw-primary-color);
+    }
+  }
+
+  &-content {
+    flex: 1;
+  }
+
+  &-panel {
+    display: none;
+
+    &.active {
+      display: block;
+      animation: fadeIn 1.4s ease;
+    }
+  }
+
+  // Vertical tabs variant
+  &-vertical {
+    flex-direction: row;
+
+    @include media-down('sm') {
+      flex-direction: column;
+      display: block;
+    }
+
+    .mw-tabs-nav {
+      flex-direction: column;
+      border-bottom: none;
+      border-right: 1px solid var(--mw-primary-color-hover);
+      margin-bottom: spacing('0');
+      margin-right: spacing('3');
+      min-width: 160px;
+      max-width: 200px;
+
+      @include media-down('sm') {
+        flex-direction: row;
+        border-right: none;
+        border-bottom: 1px solid var(--mw-primary-color-hover);
+        margin-right: spacing('0');
+        margin-bottom: spacing('4');
+        width: 100%;
+        max-width: 100%;
+        min-width: 100%;
+        overflow-x: auto;
+        display: flex;
+      }
+    }
+
+    .mw-tabs-nav-item {
+      border-bottom: none;
+      border-right: 2px solid transparent;
+
+      &.active {
+        border-right-color: var(--mw-primary-color);
+      }
+
+      @include media-down('sm') {
+        border-right: none;
+        border-bottom: 2px solid transparent;
+        flex-shrink: 0;
+
+        &.active {
+          border-right-color: transparent;
+          border-bottom-color: var(--mw-primary-color);
+        }
+      }
+    }
+
+    .mw-tabs-content {
+      flex: 1;
+
+      @include media-down('sm') {
+        width: 100%;
+        margin-top: spacing('4');
+      }
+    }
+  }
+
+  // Pills variant
+  &-pills {
+    .mw-tabs-nav {
+      border-bottom: none;
+      gap: spacing('2');
+    }
+
+    .mw-tabs-nav-item {
+      border-radius: radius('2xl');
+      height: 40px;
+      line-height: 0.9;
+      border: 1px solid var(--mw-primary-color-hover);
+      background: var(--mw-card-background);
+
+      &.active {
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-text-color);
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/scss/components/_tags.scss

@@ -0,0 +1,93 @@
+@use '../abstracts' as *;
+
+.mw-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: spacing('2');
+}
+
+// Tag item
+.mw-tags-item {
+  display: inline-flex;
+  align-items: center;
+  background: var(--mw-primary-background);
+  color: var(--mw-text-color);
+  font-weight: font-weight('medium');
+  padding: spacing('1') spacing('3');
+  border-radius: radius('xl');
+  font-size: font-size('xs');
+  border: 1px solid var(--mw-border);
+  transition: all 0.2s ease;
+  user-select: none;
+
+  &:hover {
+    background: var(--mw-primary-background-hover);
+  }
+
+  // Removable tag styling
+  &.mw-tags-removable {
+    padding-right: spacing('1');
+  }
+}
+
+// Remove button - pure CSS
+.mw-tags-remove {
+  flex-shrink: 0;
+  margin-left: spacing('3');
+}
+
+.mw-tags-icon {
+  display: inline-flex;
+  margin-right: spacing('1');
+  font-size: 1.1em;
+}
+
+// Color variants
+.mw-tags-primary .mw-tags-item {
+  background-color: var(--mw-primary-background);
+  border-color: var(--mw-primary-color);
+  &:hover {
+    background: var(--mw-primary-background-hover);
+  }
+}
+
+.mw-tags-secondary .mw-tags-item {
+  background-color: var(--mw-secondary-background);
+  border-color: var(--mw-secondary-color);
+  &:hover {
+    background: var(--mw-secondary-background-hover);
+  }
+}
+
+.mw-tags-success .mw-tags-item {
+  background-color: var(--mw-success-info-background);
+  border-color: var(--mw-success-color);
+  &:hover {
+    background: var(--mw-success-info-background-hover);
+  }
+}
+
+.mw-tags-info .mw-tags-item {
+  background-color: var(--mw-info-info-background);
+  border-color: var(--mw-info-color);
+  &:hover {
+    background: var(--mw-info-info-background-hover);
+  }
+}
+
+// Size variants
+.mw-tags-lg .mw-tags-item {
+  font-size: font-size('sm');
+  padding: spacing('1') spacing('3');
+
+  .mw-tags-remove {
+    width: 22px;
+    height: 22px;
+
+    i,
+    fa-icon,
+    svg {
+      font-size: 0.8rem !important;
+    }
+  }
+}