ngwr 6.1.1 → 7.0.0

package/select/styles/_index.scss

@@ -1,237 +1,323 @@
-@forward './vars';
+@use '../../theme/styles' as theme;
 
 .wr-select {
-  position: relative;
-  width: 100%;
+  --wr-select-color: var(--wr-color-dark);
+  --wr-select-bg: var(--wr-color-white);
+  --wr-select-border: var(--wr-color-light);
+  --wr-select-radius: var(--wr-border-radius-base);
+  --wr-select-padding-y: 0.4375rem;
+  --wr-select-padding-x: 0.75rem;
+  --wr-select-font-size: 0.875rem;
+  --wr-select-line-height: 1.25rem;
+
+  display: inline-flex;
+  vertical-align: middle;
+
+  &--rounded {
+    --wr-select-radius: var(--wr-border-radius-pill);
+    --wr-select-padding-x: 1rem;
+    corner-shape: round; // override squircle from smooth-br for pills
+  }
 
-  color: var(--wr-select-color);
-  font-size: var(--wr-select-font-size);
-  font-weight: var(--wr-select-font-weight);
-  line-height: var(--wr-select-line-height);
+  &--disabled {
+    --wr-select-color: var(--wr-color-medium);
+    --wr-select-bg: rgba(var(--wr-color-light-rgb), 0.35);
+  }
 
-  background-color: var(--wr-select-bg-color);
-  border: 1px solid var(--wr-select-border-color);
-  border-radius: var(--wr-select-border-radius);
-  box-shadow: var(--wr-select-box-shadow);
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    min-width: 10rem;
+    appearance: none;
+    background: var(--wr-select-bg);
+    color: var(--wr-select-color);
+    border: 1px solid var(--wr-select-border);
+    @include theme.smooth-br(var(--wr-select-radius));
+    padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1))
+      calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
+    font-family: var(--wr-font-family-base);
+    font-size: var(--wr-select-font-size);
+    line-height: var(--wr-select-line-height);
+    cursor: pointer;
+    text-align: left;
+    transition:
+      border-color var(--wr-transition-base),
+      box-shadow var(--wr-transition-base);
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--wr-color-primary);
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+    }
 
-  transition: var(--wr-transition-base);
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
 
-  &--disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
+  &--open &__trigger {
+    border-color: var(--wr-color-primary);
+    box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
   }
 
-  &--focused {
-    --wr-select-border-color: var(--wr-color-primary);
-    --wr-select-box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.125);
+  &__value,
+  &__placeholder {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  &__trigger {
-    display: flex;
+  &__placeholder {
+    color: rgba(var(--wr-color-medium-rgb), 0.85);
+  }
+
+  &__chevron {
+    --wr-icon-size: 1rem;
+    flex: 0 0 auto;
+    color: var(--wr-color-medium);
+    transition: transform var(--wr-transition-base);
+  }
+
+  &--open &__chevron {
+    transform: rotate(180deg);
+  }
+
+  // Multi-mode trigger chrome
+  // Chips fill the trigger's flex row; the trigger grows vertically as
+  // needed. A clear-all (×) button appears at the row's tail.
+
+  &--multi &__trigger,
+  &--tag &__trigger {
+    flex-wrap: wrap;
     align-items: center;
-    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
-    cursor: pointer;
-    min-height: var(--wr-select-option-height);
+    padding: 0.25rem 0.5rem;
+    min-height: calc(var(--wr-select-line-height) + var(--wr-select-padding-y) * 2);
   }
 
-  &__value {
-    display: flex;
-    flex: 1;
+  // Search-mode trigger: inline text input + chevron + clear
+  &__trigger--search {
+    cursor: text;
+    padding: 0;
+
+    &:focus-within {
+      border-color: var(--wr-color-primary);
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+    }
+  }
+
+  &__search-input {
+    flex: 1 1 auto;
     min-width: 0;
-    margin-right: 8px;
+    border: 0;
+    outline: 0;
+    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: var(--wr-select-font-size);
+    line-height: var(--wr-select-line-height);
 
-    &:empty::before {
-      content: attr(placeholder);
-      color: var(--wr-select-placeholder-color);
+    &::placeholder {
+      color: rgba(var(--wr-color-medium-rgb), 0.85);
     }
 
-    wr-tag {
-      line-height: var(--wr-select-tag-line-height);
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 
-  &__arrow {
-    --wr-icon-size: 1rem;
-    transition: transform 0.2s;
+  // Tag-mode trigger: focusable div hosting chips + inline input.
+  &__trigger--tag {
+    cursor: text;
 
-    .wr-select--open & {
-      transform: rotate(180deg);
+    &:focus-within {
+      border-color: var(--wr-color-primary);
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
     }
   }
 
-  &__dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    margin-top: 4px;
-
-    background: var(--wr-select-dropdown-bg);
-    border: 1px solid var(--wr-select-dropdown-border-color);
-    border-radius: var(--wr-select-border-radius);
-    box-shadow: var(--wr-select-dropdown-shadow);
-
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-10px);
-    transition: var(--wr-transition-base);
-
-    &--open {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
+  &__tag-input {
+    flex: 1 0 6rem;
+    min-width: 4rem;
+    border: 0;
+    outline: 0;
+    padding: 0.125rem 0.25rem;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.4;
 
-    &-content {
-      max-height: var(--wr-select-dropdown-max-height);
-      overflow-y: auto;
+    &::placeholder {
+      color: rgba(var(--wr-color-medium-rgb), 0.85);
     }
-  }
 
-  &__counter {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 4px;
-    margin-left: auto;
-    padding: 2px 6px;
-    font-size: var(--wr-select-counter-font-size);
-    color: var(--wr-color-medium);
-    border-radius: var(--wr-select-tag-border-radius);
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
-  &__tags {
+  &__chips {
     display: flex;
+    flex: 1 1 auto;
     flex-wrap: wrap;
-    gap: 4px;
     align-items: center;
-    width: 100%;
-
-    &-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-    }
+    gap: 0.25rem;
+    min-width: 0;
   }
 
-  &__tag {
-    &-remove {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: var(--wr-select-tag-line-height);
-      margin-right: -3px;
-      padding: 0;
-      font-size: 14px;
-      background: none;
-      border: none;
-      border-radius: 50%;
-      cursor: pointer;
-    }
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    max-width: 100%;
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    border-radius: 999px;
+    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    color: var(--wr-color-primary);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    user-select: none;
   }
 
-  &__search-wrapper {
-    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
-    border-bottom: 1px solid var(--wr-select-border-color);
+  &__chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  &__search {
-    flex: 1;
-    min-width: 50px;
-    border: none;
-    background: none;
-    outline: none;
-    padding: 0;
-    font-size: inherit;
-    font-family: inherit;
-    color: inherit;
+  &__chip-remove {
+    --wr-icon-size: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 999px;
+    cursor: pointer;
+    transition: background 0.12s ease;
 
-    &::placeholder {
-      color: var(--wr-select-placeholder-color);
+    &:hover {
+      background: rgba(var(--wr-color-primary-rgb), 0.2);
     }
   }
 
+  &__chip--more {
+    background: rgba(var(--wr-color-dark-rgb), 0.08);
+    color: rgba(var(--wr-color-dark-rgb), 0.7);
+  }
+
   &__clear {
-    display: flex;
+    --wr-icon-size: 0.875rem;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
-    margin: 0 8px 0 0;
-    border: none;
-    background: none;
-    cursor: pointer;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-right: -0.25rem;
+    border-radius: 999px;
     color: var(--wr-color-medium);
-    transition: color 0.2s;
+    cursor: pointer;
+    transition:
+      background 0.12s ease,
+      color 0.12s ease;
 
     &:hover {
+      background: rgba(var(--wr-color-dark-rgb), 0.06);
       color: var(--wr-color-dark);
     }
-
-    wr-icon {
-      --wr-icon-size: 16px;
-    }
-
-    &--multiple {
-      margin-left: auto;
-    }
   }
+}
 
-  &__no-data {
-    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
-    color: var(--wr-select-placeholder-color);
+.wr-select-overlay {
+  padding-top: 0.25rem;
+}
+
+.wr-select-panel {
+  --wr-select-panel-bg: var(--wr-color-white);
+  --wr-select-panel-border: var(--wr-color-light);
+  --wr-select-panel-radius: var(--wr-border-radius-base);
+  --wr-select-panel-shadow: var(--wr-shadow-overlay);
+  --wr-select-panel-max-height: 16rem;
+
+  display: flex;
+  flex-direction: column;
+  background: var(--wr-select-panel-bg);
+  border: 1px solid var(--wr-select-panel-border);
+  @include theme.smooth-br(var(--wr-select-panel-radius));
+  box-shadow: var(--wr-select-panel-shadow);
+  padding: 0.25rem;
+  max-height: var(--wr-select-panel-max-height);
+  overflow-y: auto;
+  font-family: var(--wr-font-family-base);
+
+  &__loading,
+  &__empty {
+    padding: 0.625rem 0.75rem;
+    color: var(--wr-color-medium);
+    font-size: 0.875rem;
     text-align: center;
   }
 }
 
 .wr-option {
-  display: block;
-  padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
+  display: flex;
+  align-items: center;
+  padding: 0.4375rem 0.625rem;
+  border-radius: var(--wr-border-radius-sm);
+  color: var(--wr-color-dark);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   cursor: pointer;
-  transition: background-color 0.2s;
-  min-height: var(--wr-select-option-height);
-
-  &__content {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
+  user-select: none;
+  transition: background var(--wr-transition-short);
 
-  &:hover:not(&--disabled) {
-    background-color: var(--wr-select-option-hover-bg);
+  &:hover {
+    background: rgba(var(--wr-color-light-rgb), 0.4);
   }
 
   &--selected {
-    color: var(--wr-select-option-selected-color);
-    background-color: var(--wr-select-option-selected-bg);
+    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    color: var(--wr-color-primary);
+    font-weight: 500;
   }
 
   &--disabled {
-    color: var(--wr-select-option-disabled-color);
+    color: var(--wr-color-medium);
     cursor: not-allowed;
-  }
+    opacity: 0.6;
 
-  &--highlighted {
-    background-color: var(--wr-select-option-hover-bg);
+    &:hover {
+      background: transparent;
+    }
   }
 
-  &--filtered {
+  // Search-mode filter — out-of-match options collapse but stay in the
+  // DOM so registration order survives the panel re-open.
+  &--hidden {
     display: none;
   }
 }
 
-.wr-select-group {
-  &__label {
-    padding: var(--wr-select-padding-y) var(--wr-select-padding-x);
-    color: var(--wr-select-group-label-color);
-    font-size: var(--wr-select-group-label-font-size);
-  }
+.wr-option-group {
+  display: flex;
+  flex-direction: column;
 
-  &__content {
+  &__label {
+    padding: 0.5rem 0.625rem 0.25rem;
+    color: var(--wr-color-medium);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
   }
 
-  &--disabled {
-    opacity: 0.6;
+  + .wr-option-group {
+    border-top: 1px solid var(--wr-color-light);
+    margin-top: 0.25rem;
+    padding-top: 0.25rem;
   }
 }

package/shiny-text/shiny-text.scss

@@ -0,0 +1 @@
+@forward './styles';

package/shiny-text/styles/_index.scss

@@ -0,0 +1,101 @@
+// Shimmering text (reactbits port). Clips an animated linear gradient to
+// the text via `background-clip: text`.
+//
+// The keyframes are 0% → 50%, then hold at the end position. Inputs set
+// `animation-duration` to (speed + delay); the keyframe hits the end at
+// the 50%/totalDuration mark and rests for the rest, which collapses to
+// `speed` of motion + `delay` of pause — without needing two animations.
+
+.wr-shiny-text {
+  // Theme-default sweep (overridden by `[color]` / `[shineColor]`):
+  // gray base with a dark shine on light surfaces; dark theme restores
+  // the reactbits gray-with-white-flash below.
+  --wr-shiny-text-base: var(--wr-color-medium, #8594a4);
+  --wr-shiny-text-shine: var(--wr-color-dark, #0f172a);
+
+  display: inline-block;
+  background-size: 200% auto;
+  background-position: 150% center;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation-name: wr-shiny-text-sweep;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: normal;
+  animation-fill-mode: both;
+  animation-play-state: running;
+
+  &--reverse {
+    animation-direction: reverse;
+  }
+
+  &--yoyo {
+    animation-direction: alternate;
+
+    &.wr-shiny-text--reverse {
+      animation-direction: alternate-reverse;
+    }
+  }
+
+  &--paused {
+    animation-play-state: paused;
+  }
+
+  &--pause-on-hover:hover {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes wr-shiny-text-sweep {
+  0% {
+    background-position: 150% center;
+  }
+  50% {
+    background-position: -50% center;
+  }
+  100% {
+    background-position: -50% center;
+  }
+}
+
+// Reduced motion: freeze the sweep at its rest position — the gradient's
+// base color fills the text, so it stays readable with zero movement.
+@media (prefers-reduced-motion: reduce) {
+  .wr-shiny-text {
+    animation: none !important;
+  }
+}
+
+// [wrShimmer] directive
+// Same package as <wr-shiny-text>. Lightweight host-class directive —
+// gradient sweep across text via `background-clip: text`.
+@keyframes wr-shimmer {
+  100% {
+    background-position-x: -200%;
+  }
+}
+
+.wr-shimmer {
+  background: linear-gradient(
+    110deg,
+    var(--wr-color-dark) 30%,
+    rgba(var(--wr-color-primary-rgb), 0.9) 50%,
+    var(--wr-color-dark) 70%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: wr-shimmer 2.5s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+[data-theme='dark'] .wr-shiny-text {
+  --wr-shiny-text-base: #b5b5b5;
+  --wr-shiny-text-shine: #ffffff;
+}