maverick-wave 3.0.0

package/src/scss/form-elements/_input-group.scss

@@ -0,0 +1,103 @@
+@use '../abstracts' as *;
+
+// Input with prefix and/or suffix (icon, text, button)
+.mw-input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+
+  // Shared styles for prefix and suffix
+  .mw-input-group-prefix,
+  .mw-input-group-suffix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: spacing('2') spacing('3');
+    background: var(--mw-gray-background);
+    border: 2px solid var(--mw-border);
+    color: var(--mw-text-muted-color);
+    font-size: font-size('sm');
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: var(--mw-transition);
+    line-height: 1;
+    cursor: default;
+  }
+
+  .mw-input-group-prefix {
+    border-right: none;
+    border-radius: radius('sm') 0 0 radius('sm');
+  }
+
+  .mw-input-group-suffix {
+    border-left: none;
+    border-radius: 0 radius('sm') radius('sm') 0;
+  }
+
+  // The input loses its outer rounded corners
+  .mw-input {
+    flex: 1;
+    min-width: 0;
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: radius('sm') 0 0 radius('sm');
+    }
+
+    &:last-child {
+      border-radius: 0 radius('sm') radius('sm') 0;
+    }
+
+    // When input is focused, also highlight adjacent prefix/suffix
+    &:focus + .mw-input-group-suffix,
+    &:focus-within ~ .mw-input-group-suffix {
+      border-color: var(--mw-primary-color);
+    }
+  }
+
+  // Highlight prefix/suffix when inner input is focused
+  &:focus-within {
+    .mw-input-group-prefix,
+    .mw-input-group-suffix {
+      border-color: var(--mw-primary-color);
+    }
+  }
+
+  .mw-input:focus {
+    box-shadow: none;
+  }
+
+  // Button as suffix/prefix (e.g. search button, copy button)
+  .mw-btn {
+    border-radius: 0;
+    border: 2px solid var(--mw-border);
+    flex-shrink: 0;
+
+    &:first-child {
+      border-right: none;
+      border-radius: radius('sm') 0 0 radius('sm');
+    }
+
+    &:last-child {
+      border-left: none;
+      border-radius: 0 radius('sm') radius('sm') 0;
+    }
+  }
+
+  // Size variants — applied to the group, cascades to prefix/suffix
+  &-sm {
+    .mw-input-group-prefix,
+    .mw-input-group-suffix {
+      padding: spacing('1') spacing('2');
+      font-size: font-size('xs');
+    }
+  }
+
+  &-lg {
+    .mw-input-group-prefix,
+    .mw-input-group-suffix {
+      padding: spacing('3') spacing('4');
+      font-size: font-size('base');
+    }
+  }
+}

package/src/scss/form-elements/_input.scss

@@ -0,0 +1,72 @@
+@use '../abstracts' as *;
+
+.mw-input {
+  width: 100%;
+  padding: spacing('2') spacing('3');
+  font-size: font-size('sm');
+  background: var(--mw-form-elements-background);
+  color: var(--mw-form-elements-color);
+  border: 2px solid var(--mw-border);
+  border-radius: radius('sm');
+  transition: var(--mw-transition);
+  font-family: inherit;
+
+  &::placeholder {
+    color: var(--mw-text-muted-color);
+    opacity: 0.7;
+  }
+
+  &:hover:not(:focus):not(:read-only):not(:disabled) {
+    border-color: var(--mw-gray-color);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--mw-primary-color);
+    box-shadow: 0 0 0 2px var(--mw-primary-background);
+  }
+
+  &:read-only {
+    background: var(--mw-gray-background);
+    color: var(--mw-text-muted-color);
+    cursor: default;
+    box-shadow: none;
+  }
+
+  &-sm {
+    padding: spacing('1') spacing('2');
+    font-size: font-size('xs');
+  }
+  &-lg {
+    padding: spacing('3') spacing('4');
+    font-size: font-size('base');
+  }
+  &-xl {
+    padding: spacing('4') spacing('5');
+    font-size: font-size('md');
+  }
+
+  // Date / time inputs — style the native picker indicator
+  &[type='date'],
+  &[type='time'],
+  &[type='datetime-local'] {
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0.55;
+      padding: 0;
+      margin-left: spacing('1');
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  // disabled state
+  &:disabled {
+    background: var(--mw-gray-background);
+    color: var(--mw-text-muted-color);
+    cursor: not-allowed;
+  }
+}

package/src/scss/form-elements/_login.scss

@@ -0,0 +1,62 @@
+@use '../abstracts' as *;
+
+.mw-login {
+  background: var(--mw-card-background);
+  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  box-shadow: 0 5px 10px var(--mw-shadow);
+  transition: var(--mw-transition);
+  border: 1px solid var(--mw-border);
+  position: relative;
+  overflow: hidden;
+  width: min(330px, 85%);
+  margin: spacing('2') auto;
+  padding: spacing('5');
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  @include media-down('xs') {
+    padding: spacing('7') spacing('4');
+  }
+
+  &-logo {
+    margin-bottom: spacing('8');
+
+    img {
+      display: block;
+      margin: spacing('0') auto;
+      height: 60px;
+      object-fit: contain;
+    }
+  }
+
+  &-message {
+    font-size: font-size('sm');
+    text-align: center;
+    margin-bottom: spacing('6');
+    line-height: 1.5;
+    color: var(--mw-text-muted-color);
+
+    // Variants
+    &-info {
+      color: var(--mw-info-color);
+    }
+
+    &-error {
+      color: var(--mw-danger-color);
+    }
+
+    // Multiple messages spacing
+    & + & {
+      margin-top: spacing('-3');
+    }
+  }
+
+  &-error {
+    border: 2px solid var(--mw-danger-color);
+  }
+
+  &.mw-form-actions {
+    width: 100%;
+  }
+}

package/src/scss/form-elements/_radio.scss

@@ -0,0 +1,144 @@
+@use '../abstracts' as *;
+
+$_mw-radio-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),
+);
+
+$_size-sm: spacing('3');
+$_size-default: spacing('4');
+$_size-lg: spacing('5');
+$_size-xl: spacing('6');
+
+.mw-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: spacing('3');
+
+  &-inline {
+    flex-direction: row;
+    align-items: center;
+    gap: spacing('6');
+    @include media-down('sm') {
+      gap: spacing('4');
+    }
+  }
+}
+
+.mw-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing('2');
+  cursor: pointer;
+  user-select: none;
+
+  // hide native radio
+  input[type='radio'] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .mw-radio-button {
+    position: relative;
+    flex-shrink: 0;
+    width: $_size-default;
+    height: $_size-default;
+    border: 2px solid var(--mw-border);
+    border-radius: 50%;
+    transition: var(--mw-transition);
+    background: var(--mw-form-elements-background);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 50%;
+      height: 50%;
+      background: var(--mw-primary-color);
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: var(--mw-transition);
+    }
+  }
+
+  // focus-visible state
+  input[type='radio']:focus-visible + .mw-radio-button {
+    box-shadow: 0 0 0 2px var(--mw-primary-background);
+    border-color: var(--mw-primary-color);
+  }
+
+  input[type='radio']:checked + .mw-radio-button {
+    border-color: var(--mw-primary-color);
+  }
+  input[type='radio']:checked + .mw-radio-button::after {
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  .mw-radio-label {
+    font-size: font-size('sm');
+    color: var(--mw-text-color);
+  }
+
+  // size variants
+  &-sm {
+    .mw-radio-button {
+      width: $_size-sm;
+      height: $_size-sm;
+    }
+    .mw-radio-label {
+      font-size: font-size('xs');
+    }
+  }
+  &-lg {
+    .mw-radio-button {
+      width: $_size-lg;
+      height: $_size-lg;
+    }
+    .mw-radio-label {
+      font-size: font-size('base');
+    }
+  }
+  &-xl {
+    .mw-radio-button {
+      width: $_size-xl;
+      height: $_size-xl;
+    }
+    .mw-radio-label {
+      font-size: font-size('md');
+    }
+  }
+
+  // color variants
+  @each $name, $col in $_mw-radio-colors {
+    &-#{$name} {
+      input[type='radio']:checked + .mw-radio-button {
+        border-color: #{$col};
+      }
+      input[type='radio']:checked + .mw-radio-button::after {
+        background: #{$col};
+      }
+    }
+  }
+
+  // disabled
+  &-disabled {
+    cursor: not-allowed;
+
+    input[type='radio'] {
+      cursor: not-allowed;
+    }
+    .mw-radio-button {
+      background: var(--mw-gray-background);
+    }
+    .mw-radio-label {
+      color: var(--mw-text-muted-color);
+    }
+  }
+}

package/src/scss/form-elements/_select.scss

@@ -0,0 +1,56 @@
+@use '../abstracts' as *;
+
+.mw-select {
+  width: 100%;
+  padding: spacing('2') spacing('6') spacing('2') spacing('3');
+  font-size: font-size('sm');
+  background: var(--mw-form-elements-background);
+  color: var(--mw-form-elements-color);
+  border: 2px solid var(--mw-border);
+  border-radius: radius('sm');
+  transition: var(--mw-transition);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right spacing('3') center;
+  background-size: spacing('3') spacing('3');
+  font-family: inherit;
+
+  &:hover:not(:focus):not(:disabled) {
+    border-color: var(--mw-gray-color);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--mw-primary-color);
+    box-shadow: 0 0 0 2px var(--mw-primary-background);
+  }
+
+  // size modifiers
+  &-sm {
+    padding: spacing('1') spacing('5') spacing('1') spacing('2');
+    font-size: font-size('xs');
+    background-position: right spacing('2') center;
+    background-size: spacing('2') spacing('2');
+  }
+  &-lg {
+    padding: spacing('3') spacing('7') spacing('3') spacing('4');
+    font-size: font-size('base');
+    background-position: right spacing('4') center;
+    background-size: spacing('4') spacing('4');
+  }
+  &-xl {
+    padding: spacing('4') spacing('8') spacing('4') spacing('5');
+    font-size: font-size('md');
+    background-position: right spacing('5') center;
+    background-size: spacing('5') spacing('5');
+  }
+
+  // disabled state
+  &:disabled {
+    background: var(--mw-gray-background);
+    color: var(--mw-text-muted-color);
+    cursor: not-allowed;
+  }
+}

package/src/scss/form-elements/_slider.scss

@@ -0,0 +1,174 @@
+// _slider.scss
+@use '../abstracts' as *;
+
+// color map
+$_mw-slider-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-slider {
+  --value: 0%;
+  --fill: var(--mw-primary-color);
+  --track: var(--mw-gray-background);
+
+  width: 100%;
+  height: 10px;
+  background: linear-gradient(
+    to right,
+    var(--fill) 0,
+    var(--fill) var(--value),
+    var(--track) var(--value),
+    var(--track) 100%
+  );
+  border-radius: radius('sm');
+  appearance: none;
+  cursor: pointer;
+  margin-top: 0.35rem;
+
+  // thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: spacing('5');
+    height: spacing('5');
+    background: var(--fill);
+    border: 2px solid var(--mw-border);
+    border-radius: 50%;
+    margin-top: spacing('0');
+    transition:
+      transform 0.2s ease,
+      border-color 0.2s ease;
+  }
+  &::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  &::-moz-range-thumb {
+    width: spacing('5');
+    height: spacing('5');
+    border: 2px solid var(--fill);
+    border-radius: 50%;
+    transition:
+      transform 0.2s ease,
+      border-color 0.2s ease;
+  }
+  &::-moz-range-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  // track styling for Firefox
+  &::-moz-range-track {
+    background: transparent;
+  }
+
+  // IE
+  &::-ms-fill-lower {
+    background: var(--fill);
+  }
+  &::-ms-fill-upper {
+    background: var(--track);
+  }
+  &::-ms-thumb {
+    width: spacing('5');
+    height: spacing('5');
+    border: 2px solid var(--fill);
+    border-radius: 50%;
+  }
+
+  // sizes
+  &-sm {
+    height: 6px;
+    &::-webkit-slider-thumb {
+      width: spacing('4');
+      height: spacing('4');
+    }
+    &::-moz-range-thumb {
+      width: spacing('4');
+      height: spacing('4');
+    }
+    &::-ms-thumb {
+      width: spacing('4');
+      height: spacing('4');
+    }
+  }
+  &-lg {
+    height: 16px;
+    margin-top: 0.35rem;
+    &::-webkit-slider-thumb {
+      width: spacing('6');
+      height: spacing('6');
+    }
+    &::-moz-range-thumb {
+      width: spacing('6');
+      height: spacing('6');
+    }
+    &::-ms-thumb {
+      width: spacing('6');
+      height: spacing('6');
+    }
+  }
+  &-xl {
+    height: 22px;
+    margin-top: 0.45rem;
+    &::-webkit-slider-thumb {
+      width: spacing('7');
+      height: spacing('7');
+    }
+    &::-moz-range-thumb {
+      width: spacing('7');
+      height: spacing('7');
+    }
+    &::-ms-thumb {
+      width: spacing('7');
+      height: spacing('7');
+    }
+  }
+
+  // disabled
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  // color variants
+  @each $name, $col in $_mw-slider-colors {
+    &-#{$name} {
+      --fill: #{$col};
+    }
+  }
+}
+
+.mw-slider-container {
+  position: relative;
+  width: 100%;
+  line-height: 0.9;
+  padding-bottom: 0.4rem;
+
+  // the badge in top-right
+  .mw-slider-value {
+    position: absolute;
+    top: -17px;
+    right: 7px;
+    font-size: font-size('sm');
+    color: var(--mw-text-muted-color);
+    pointer-events: none;
+
+    @include media-down('sm') {
+      font-size: font-size('xs');
+      top: -15px;
+    }
+
+    // 1–10 numeric style
+    &.mw-slider-numeric::after {
+      content: attr(data-value) '/10';
+    }
+    // percentage style
+    &.mw-slider-percent::after {
+      content: attr(data-value) '%';
+    }
+  }
+}

package/src/scss/form-elements/_textarea.scss

@@ -0,0 +1,74 @@
+// _textarea.scss
+@use '../abstracts' as *;
+
+.mw-textarea {
+  width: 100%;
+  height: auto;
+  padding: spacing('2') spacing('3');
+  font-size: font-size('sm');
+  background: var(--mw-form-elements-background);
+  color: var(--mw-form-elements-color);
+  border: 2px solid var(--mw-border);
+  border-radius: radius('sm');
+  transition: var(--mw-transition);
+  resize: none;
+  font-family: inherit;
+
+  &::placeholder {
+    color: var(--mw-text-muted-color);
+    opacity: 0.7;
+  }
+
+  &:hover:not(:focus):not(:read-only):not(:disabled) {
+    border-color: var(--mw-gray-color);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--mw-primary-color);
+    box-shadow: 0 0 0 2px var(--mw-primary-background);
+  }
+
+  &:read-only {
+    background: var(--mw-gray-background);
+    color: var(--mw-text-muted-color);
+    cursor: default;
+    box-shadow: none;
+  }
+
+  &-sm {
+    padding: spacing('1') spacing('2');
+    font-size: font-size('xs');
+  }
+  &-lg {
+    min-height: spacing('11');
+    padding: spacing('3') spacing('4');
+    font-size: font-size('base');
+  }
+  &-xl {
+    min-height: spacing('12');
+    padding: spacing('4') spacing('5');
+    font-size: font-size('md');
+  }
+
+  &-resizable {
+    resize: both;
+  }
+  &-resizable-vertical {
+    resize: vertical;
+  }
+  &-resizable-horizontal {
+    resize: horizontal;
+  }
+
+  // disabled state
+  &:disabled {
+    background: var(--mw-gray-background);
+    color: var(--mw-text-muted-color);
+    cursor: not-allowed;
+  }
+}
+
+.mw-textarea:not([rows]) {
+  min-height: spacing('10');
+}