maverick-wave 3.0.0

package/src/scss/components/_avatars.scss

@@ -0,0 +1,123 @@
+@use '../abstracts' as *;
+
+$_mw-avatar-colors: (
+  primary: var(--mw-primary-color),
+  secondary: var(--mw-secondary-color),
+  info: var(--mw-info-color),
+  success: var(--mw-success-color),
+  warning: var(--mw-warning-color),
+  danger: var(--mw-danger-color),
+);
+
+.mw-avatar {
+  display: inline-flex;
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid var(--mw-border);
+  box-shadow: 0 6px 15px var(--mw-shadow);
+  margin: spacing('1');
+
+  // Standard (md)
+  width: 96px;
+  height: 96px;
+  flex-shrink: 0; // Prevents the avatar from shrinking
+  flex-grow: 0; // Prevents the avatar from growing
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  // Sizes
+  &-xs {
+    width: 32px;
+    height: 32px;
+    border-width: 2px;
+  }
+
+  &-sm {
+    width: 64px;
+    height: 64px;
+    border-width: 2px;
+  }
+
+  &-lg {
+    width: 144px;
+    height: 144px;
+    border-width: 5px;
+  }
+
+  &-xl {
+    width: 250px;
+    height: 250px;
+    border-width: 7px;
+  }
+
+  // Square
+  &-square {
+    border-radius: radius('sm');
+  }
+
+  // Groups
+  &-group {
+    display: flex;
+    flex-wrap: wrap; // Allow items to wrap to next line
+    justify-content: flex-start;
+    margin: spacing('1');
+
+    .mw-avatar {
+      margin-right: -15px;
+      margin-bottom: -15px;
+      border: 2px solid var(--mw-secondary-color);
+      transition: transform 0.3s ease;
+
+      &:hover {
+        transform: translateY(-5px);
+        z-index: z-index('lift');
+      }
+
+      &:last-child {
+        margin-right: spacing('0');
+      }
+    }
+
+    // Group sizes
+    &-sm .mw-avatar {
+      margin-right: -10px;
+    }
+
+    &-lg .mw-avatar {
+      margin-right: -20px;
+    }
+
+    @include media-down('sm') {
+      // For small screens, create a more compact layout
+      .mw-avatar {
+        margin-right: -10px; // Reduce overlap on small screens
+      }
+    }
+  }
+
+  @include media-down('sm') {
+    &-lg {
+      width: 120px;
+      height: 120px;
+      border-width: 4px;
+    }
+
+    &-xl {
+      width: 170px;
+      height: 170px;
+      border-width: 6px;
+    }
+  }
+}
+
+@each $name, $col in $_mw-avatar-colors {
+  .mw-avatar-#{$name} {
+    border-color: #{$col};
+  }
+}

package/src/scss/components/_blog-post.scss

@@ -0,0 +1,268 @@
+@use '../abstracts' as *;
+
+.mw-blog-post {
+  margin: spacing('1');
+  padding: spacing('3') spacing('5');
+  animation: pageReveal 1.6s ease-out forwards;
+  border-radius: radius('sm') radius('2xl') radius('sm') radius('2xl');
+  box-shadow:
+    var(--mw-border) 0 30px 60px -18px inset,
+    var(--mw-border) 0 18px 36px -18px inset;
+
+  @keyframes pageReveal {
+    0% {
+      opacity: 0;
+      transform: translateY(-30px) rotateX(10deg);
+      transform-origin: top;
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) rotateX(0);
+      transform-origin: top;
+    }
+  }
+
+  // Book-like left border
+  &::before {
+    content: '';
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    width: 7px;
+    height: 99%;
+    background: linear-gradient(
+      to bottom,
+      var(--mw-primary-color),
+      var(--mw-secondary-color)
+    );
+    border-radius: radius('sm');
+  }
+
+  &-title {
+    margin-bottom: spacing('6');
+    text-align: start;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: spacing('-2');
+      left: spacing('0');
+      width: 200px;
+      height: 5px;
+      background: var(--mw-primary-color);
+    }
+  }
+
+  &-header {
+    margin-bottom: spacing('5');
+    position: relative;
+
+    &-icon {
+      width: 60px;
+      height: 60px;
+      border-radius: radius('full');
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: spacing('4');
+      font-size: font-size('xl');
+      box-shadow: 0 5px 9px var(--mw-shadow);
+      animation: iconFlip 2s ease-out forwards;
+
+      @keyframes iconFlip {
+        0% {
+          transform: rotateY(90deg);
+        }
+        100% {
+          transform: rotateY(0);
+        }
+      }
+    }
+  }
+
+  &-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: spacing('6');
+    font-size: font-size('sm');
+    color: var(--mw-text-muted-color);
+    row-gap: spacing('1');
+
+    @include media-down('sm') {
+      flex-direction: column;
+      gap: spacing('2');
+      margin-top: spacing('5');
+      align-items: start;
+    }
+
+    &-item {
+      display: inline-flex;
+      align-items: center;
+      row-gap: spacing('1');
+      gap: spacing('2');
+      &:not(:first-child) {
+        margin-left: spacing('9');
+        @include media-down('sm') {
+          margin-left: spacing('0');
+        }
+      }
+
+      i {
+        color: var(--mw-primary-color);
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  &-featured-image {
+    width: 100%;
+    max-height: 400px;
+    object-fit: contain;
+    border-radius: radius('sm');
+    margin-bottom: spacing('5');
+    box-shadow: 0 5px 12px var(--mw-shadow);
+  }
+
+  // Content section
+  &-content {
+    line-height: 1.6;
+
+    h2 {
+      font-size: font-size('3xl');
+      margin: spacing('5') spacing('1') spacing('4') spacing('1');
+
+      @include media-down('md') {
+        font-size: font-size('2xl');
+      }
+    }
+
+    h3 {
+      font-size: font-size('2xl');
+      margin: spacing('4') spacing('1') spacing('3') spacing('1');
+
+      @include media-down('md') {
+        font-size: font-size('xl');
+      }
+    }
+
+    h4 {
+      font-size: font-size('xl');
+      margin: spacing('3') spacing('2') spacing('2') spacing('2');
+
+      @include media-down('md') {
+        font-size: font-size('lg');
+      }
+    }
+
+    h5 {
+      font-size: font-size('lg');
+      margin: spacing('3') spacing('3') spacing('2') spacing('3');
+
+      @include media-down('md') {
+        font-size: font-size('md');
+      }
+    }
+  }
+
+  &-content-markdown {
+    @extend .mw-blog-post-content;
+
+    a {
+      display: inline-block;
+      position: relative;
+      color: var(--mw-text-muted-color);
+      text-decoration: none;
+      padding-bottom: 2px;
+
+      // subtle default underline via box‐shadow
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 1px;
+        width: 100%;
+        height: 1px;
+        background: currentColor;
+        opacity: 0.4;
+        transform: scaleX(1);
+        transform-origin: left;
+        transition:
+          transform 0.2s ease,
+          opacity 0.2s ease;
+      }
+
+      &:hover {
+        color: var(--mw-primary-color);
+        &::after {
+          opacity: 1;
+          height: 2px;
+          transform: scaleX(1.1);
+        }
+      }
+    }
+
+    ul {
+      list-style: disc;
+      ul {
+        list-style: circle;
+        margin: spacing('1') spacing('1') spacing('2') spacing('3');
+        ul {
+          list-style: square;
+          margin: spacing('1') spacing('1') spacing('2') spacing('3');
+        }
+      }
+    }
+
+    ul,
+    ol {
+      margin: spacing('3') spacing('0') spacing('3') spacing('4');
+    }
+
+    pre {
+      border: 1px solid var(--mw-border);
+      background: var(--mw-card-background);
+    }
+
+    img {
+      max-width: 100%;
+      border-radius: radius('md');
+      margin: spacing('5') spacing('0');
+    }
+  }
+
+  // Footer section
+  &-footer {
+    margin-top: spacing('6');
+    padding-top: spacing('3');
+    border-top: 1px solid var(--mw-secondary-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @include media-down('sm') {
+      flex-direction: column;
+      gap: spacing('2');
+    }
+
+    &-button {
+      transition: var(--mw-transition);
+      color: var(--mw-primary-color);
+
+      &:hover {
+        transform: translateX(-7px);
+      }
+
+      &.next {
+        flex-direction: row-reverse;
+
+        &:hover {
+          transform: translateX(7px);
+        }
+      }
+    }
+  }
+}

package/src/scss/components/_breadcrumbs.scss

@@ -0,0 +1,108 @@
+@use '../abstracts' as *;
+
+.mw-breadcrumbs {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: spacing('1');
+  padding: spacing('0') spacing('2');
+
+  &-list {
+    display: flex;
+    align-items: center;
+    margin: spacing('0');
+    padding: spacing('0');
+    list-style: none;
+  }
+
+  &-item {
+    margin-left: -2px;
+
+    &:first-child {
+      margin-left: 0;
+      a {
+        border-radius: radius('md') 0 0 radius('md');
+      }
+    }
+
+    &:last-child {
+      a {
+        border-radius: 0 radius('md') radius('md') 0;
+      }
+    }
+
+    a {
+      background: var(--mw-card-background);
+      color: var(--mw-text-muted-color);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      text-decoration: none;
+      font-size: font-size('md');
+      border: 2px solid var(--mw-border);
+      height: spacing('7');
+      padding: spacing('0') spacing('5');
+      border-radius: 0;
+      transform: skew(-30deg);
+      position: relative;
+      transition: var(--mw-transition);
+
+      &:hover,
+      &:focus,
+      &.mw-breadcrumbs-active {
+        outline: 0;
+        color: var(--mw-primary-color);
+        border-color: var(--mw-primary-color);
+        z-index: z-index('lift');
+      }
+
+      // Counter-skew the content
+      & > * {
+        transform: skew(30deg);
+      }
+    }
+
+    // Current page styling
+    &.mw-breadcrumbs-current a,
+    &:last-child a {
+      color: var(--mw-text-color);
+      border-color: var(--mw-primary-color);
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  // Size variants
+  &-sm {
+    .mw-breadcrumbs-item a {
+      font-size: font-size('sm');
+      height: spacing('6');
+      padding: spacing('0') spacing('4');
+    }
+  }
+
+  // Responsive behavior
+  @include media-down('md') {
+    .mw-breadcrumbs-item a {
+      font-size: font-size('xs');
+      height: spacing('6');
+      padding: spacing('0') spacing('3');
+    }
+  }
+
+  @include media-down('lg') {
+    // Collapse middle items on small screens
+    &.mw-breadcrumbs-collapse {
+      .mw-breadcrumbs-item:not(:first-child):not(:last-child):not(
+          :nth-last-child(2)
+        ) {
+        display: none;
+      }
+
+      .mw-breadcrumbs-item:nth-last-child(2) a::before {
+        content: '...';
+        margin-right: spacing('1');
+      }
+    }
+  }
+}

package/src/scss/components/_button-bar.scss

@@ -0,0 +1,139 @@
+@use '../abstracts' as *;
+
+// Base button bar
+.mw-button-bar {
+  display: flex;
+  gap: spacing('3');
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  border: 1px solid var(--mw-border);
+  border-radius: radius('md');
+  padding: spacing('2');
+
+  &:hover {
+    border-color: var(--mw-primary-color-hover);
+  }
+
+  @include media-down('sm') {
+    flex-direction: column;
+    gap: spacing('2');
+
+    .mw-btn {
+      width: 96%;
+      min-width: 200px;
+    }
+  }
+}
+
+// Alignment variants
+.mw-button-bar-left {
+  justify-content: flex-start;
+}
+
+.mw-button-bar-right {
+  justify-content: flex-end;
+}
+
+.mw-button-bar-between {
+  justify-content: space-between;
+
+  @include media-down('sm') {
+    justify-content: center;
+  }
+}
+
+// Primary button bar (applies primary styling to all buttons)
+.mw-button-bar-primary {
+  .mw-btn:not([class*='mw-btn-secondary']):not([class*='mw-btn-outline']):not(
+      [class*='mw-btn-link']
+    ) {
+    background: var(--mw-primary-color);
+    color: var(--mw-primary-text-color);
+
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-color-hover);
+    }
+  }
+}
+
+// Secondary button bar (applies secondary styling to all buttons)
+.mw-button-bar-secondary {
+  .mw-btn:not([class*='mw-btn-primary']):not([class*='mw-btn-outline']):not(
+      [class*='mw-btn-link']
+    ) {
+    background: var(--mw-secondary-color);
+    color: var(--mw-primary-text-color);
+
+    &:hover:not(:disabled) {
+      background: var(--mw-secondary-color-hover);
+    }
+  }
+}
+
+// Outline button bar
+.mw-button-bar-outline {
+  .mw-btn:not([class*='mw-btn-primary']):not([class*='mw-btn-secondary']):not(
+      [class*='mw-btn-link']
+    ) {
+    background: transparent;
+    border-color: var(--mw-primary-color);
+    color: var(--mw-primary-color);
+
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
+    }
+  }
+}
+
+// Mixed button bar for navigation (common pattern)
+.mw-button-bar-nav {
+  justify-content: space-between;
+
+  // First and last buttons get outline style
+  .mw-btn:first-child:not([class*='mw-btn-']),
+  .mw-btn:last-child:not([class*='mw-btn-']) {
+    background: transparent;
+    border-color: var(--mw-primary-color);
+    color: var(--mw-primary-color);
+
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
+    }
+  }
+
+  // Middle button(s) get primary style
+  .mw-btn:not(:first-child):not(:last-child):not([class*='mw-btn-']) {
+    background: var(--mw-primary-color);
+    color: var(--mw-primary-text-color);
+
+    &:hover:not(:disabled) {
+      background: var(--mw-primary-color-hover);
+    }
+  }
+}
+
+// Compact variant with smaller spacing
+.mw-button-bar-sm {
+  gap: spacing('2');
+
+  @include media-down('sm') {
+    gap: spacing('1');
+  }
+}
+
+// Large variant with bigger spacing and larger buttons
+.mw-button-bar-lg {
+  gap: spacing('4');
+
+  .mw-btn {
+    padding: spacing('3') spacing('5');
+    font-size: font-size('md');
+  }
+
+  @include media-down('sm') {
+    gap: spacing('3');
+  }
+}