ngwr 6.1.1 → 7.0.0

package/glitch-text/styles/_index.scss

@@ -0,0 +1,144 @@
+// Glitch text (reactbits port). Two pseudo-element clones of the text
+// are offset by ±5px and tinted with `text-shadow` (red / cyan).
+// A clip-path keyframe slices random horizontal bands of each clone.
+
+.wr-glitch-text {
+  --wr-glitch-text-before-duration: 2s;
+  --wr-glitch-text-after-duration: 3s;
+  --wr-glitch-text-before-shadow: 5px 0 cyan;
+  --wr-glitch-text-after-shadow: -5px 0 red;
+  // Clone backgrounds must match the page surface for the slicing
+  // illusion; the text itself uses the readable foreground token.
+  --wr-glitch-text-bg: var(--wr-color-white, #fff);
+
+  position: relative;
+  display: inline-block;
+  white-space: nowrap;
+  user-select: none;
+  font-weight: 900;
+  color: var(--wr-color-dark, #0f172a);
+
+  &::before,
+  &::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    color: inherit;
+    background-color: var(--wr-glitch-text-bg);
+    overflow: hidden;
+    clip-path: inset(0 0 0 0);
+  }
+
+  // Always-on variant — pseudos animate continuously.
+  &:not(&--hover-only)::before {
+    left: -10px;
+    text-shadow: var(--wr-glitch-text-before-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
+  }
+  &:not(&--hover-only)::after {
+    left: 10px;
+    text-shadow: var(--wr-glitch-text-after-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse;
+  }
+
+  // Hover-only variant — pseudos hidden by default, animate on :hover.
+  &--hover-only::before,
+  &--hover-only::after {
+    content: '';
+    opacity: 0;
+    animation: none;
+  }
+
+  &--hover-only:hover::before {
+    content: attr(data-text);
+    opacity: 1;
+    left: -10px;
+    text-shadow: var(--wr-glitch-text-before-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
+  }
+  &--hover-only:hover::after {
+    content: attr(data-text);
+    opacity: 1;
+    left: 10px;
+    text-shadow: var(--wr-glitch-text-after-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse;
+  }
+}
+
+// Reduced motion: drop the glitch clones entirely — a frozen glitch frame
+// reads as broken double-vision text, so plain text is the right fallback.
+// `!important` outweighs the higher-specificity `:hover` re-enable rules.
+@media (prefers-reduced-motion: reduce) {
+  .wr-glitch-text::before,
+  .wr-glitch-text::after {
+    content: '' !important;
+    opacity: 0 !important;
+    animation: none !important;
+  }
+}
+
+@keyframes wr-glitch-text-tear {
+  0% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  5% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  10% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  15% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  20% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  25% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  30% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  35% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  40% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  45% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  50% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  55% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  60% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  65% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  70% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  75% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  80% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  85% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  90% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  95% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  100% {
+    clip-path: inset(30% 0 40% 0);
+  }
+}

package/gradient-text/gradient-text.scss

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

package/gradient-text/styles/_index.scss

@@ -0,0 +1,113 @@
+// Animated gradient text (reactbits port). The gradient is shared between
+// the text fill (via `background-clip: text`) and an optional outer ring.
+// Both layers use the same animation, so the ring + text stay in sync.
+
+.wr-gradient-text {
+  --wr-gradient-text-image: linear-gradient(to right, #5227ff, #ff9ffc, #b497cf, #5227ff);
+  --wr-gradient-text-size: 300% 100%;
+  --wr-gradient-text-duration: 8s;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-weight: 500;
+  line-height: 1.25;
+  overflow: hidden;
+
+  &--border {
+    padding: 0.35rem 0.75rem;
+    border-radius: 1.25rem;
+  }
+
+  &__text {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    background-image: var(--wr-gradient-text-image);
+    background-size: var(--wr-gradient-text-size);
+    background-position: 0% 50%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;
+  }
+
+  // Border variant — animated gradient ring + dark inner pill behind the
+  // text. The inner uses a `::before` so the gradient is only visible at
+  // the perimeter.
+  &__border {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-image: var(--wr-gradient-text-image);
+    background-size: var(--wr-gradient-text-size);
+    background-position: 0% 50%;
+    animation: wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;
+    z-index: 0;
+    pointer-events: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      border-radius: inherit;
+      // Surface token — flips with the theme so the ring reads on both.
+      background-color: var(--wr-color-white, #fff);
+      z-index: 1;
+    }
+  }
+
+  // Direction variants change which axis the gradient slides on.
+  &--vertical &__text,
+  &--vertical &__border {
+    background-position: 50% 0%;
+    animation-name: wr-gradient-text-vertical;
+  }
+
+  // Diagonal: same as horizontal motion but a diagonal angle on the
+  // gradient itself.
+  &--diagonal &__text,
+  &--diagonal &__border {
+    background-position: 0% 50%;
+    animation-name: wr-gradient-text-horizontal;
+  }
+
+  &--yoyo &__text,
+  &--yoyo &__border {
+    animation-direction: alternate;
+  }
+
+  &--pause-on-hover:hover &__text,
+  &--pause-on-hover:hover &__border {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes wr-gradient-text-horizontal {
+  from {
+    background-position: 0% 50%;
+  }
+  to {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes wr-gradient-text-vertical {
+  from {
+    background-position: 50% 0%;
+  }
+  to {
+    background-position: 50% 100%;
+  }
+}
+
+// Reduced motion: hold the gradient still — text keeps its gradient fill
+// (and the border variant its ring), only the slide stops.
+@media (prefers-reduced-motion: reduce) {
+  .wr-gradient-text__text,
+  .wr-gradient-text__border {
+    animation: none !important;
+  }
+}

package/icon/styles/_index.scss

@@ -1,29 +1,35 @@
-@forward './vars';
+:root {
+  --wr-icon-size: 1.5rem;
+}
 
 .wr-icon {
   display: inline-block;
+  box-sizing: content-box;
+  width: var(--wr-icon-size);
+  height: var(--wr-icon-size);
   color: inherit;
-  font-style: normal;
+  fill: currentColor;
   line-height: 0;
   text-align: center;
-  text-transform: none;
   vertical-align: -0.125rem;
-
-  box-sizing: content-box !important;
-
   contain: strict;
 
-  fill: currentColor;
-  width: var(--wr-icon-size);
-  height: var(--wr-icon-size);
-
-  * {
-    line-height: 1;
-  }
-
   svg {
-    display: inline-block;
+    display: block;
     width: 100%;
     height: 100%;
   }
 }
+
+// Inline SVG icons that live OUTSIDE a `<wr-icon>` host (used by
+// chrome bits like pagination chevrons, alert close, sidebar caret,
+// password toggle eye, tree expand, etc.). These get a sensible
+// default sizing so they're never collapsed to 0×0 inside flex
+// parents. Override by adding a second class with a custom size.
+.wr-icon__svg {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  flex: 0 0 auto;
+}

package/image-cropper/styles/_index.scss

@@ -0,0 +1,114 @@
+@use '../../theme/styles' as theme;
+
+.wr-image-cropper {
+  display: block;
+  font-family: var(--wr-font-family-base);
+  user-select: none;
+  touch-action: none;
+
+  &__canvas {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    line-height: 0;
+  }
+
+  &__image {
+    display: block;
+    max-width: 100%;
+    max-height: 70vh;
+    height: auto;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(var(--wr-color-backdrop-rgb), 0.5);
+    pointer-events: none;
+  }
+
+  &__window {
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px solid var(--wr-color-white);
+    cursor: move;
+    box-shadow: 0 0 0 1px rgba(var(--wr-color-primary-rgb), 0.6);
+  }
+
+  &__handle {
+    position: absolute;
+    width: 0.75rem;
+    height: 0.75rem;
+    background: var(--wr-color-white);
+    border: 1px solid var(--wr-color-primary);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+    box-sizing: border-box;
+
+    // Position each handle by its edge / corner.
+    &--n,
+    &--s {
+      left: 50%;
+      transform: translateX(-50%);
+      cursor: ns-resize;
+    }
+
+    &--e,
+    &--w {
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: ew-resize;
+    }
+
+    &--n {
+      top: -0.4375rem;
+    }
+
+    &--s {
+      bottom: -0.4375rem;
+    }
+
+    &--e {
+      right: -0.4375rem;
+    }
+
+    &--w {
+      left: -0.4375rem;
+    }
+
+    &--ne {
+      top: -0.4375rem;
+      right: -0.4375rem;
+      cursor: nesw-resize;
+    }
+
+    &--nw {
+      top: -0.4375rem;
+      left: -0.4375rem;
+      cursor: nwse-resize;
+    }
+
+    &--se {
+      bottom: -0.4375rem;
+      right: -0.4375rem;
+      cursor: nwse-resize;
+    }
+
+    &--sw {
+      bottom: -0.4375rem;
+      left: -0.4375rem;
+      cursor: nesw-resize;
+    }
+  }
+
+  &__empty {
+    padding: 2rem;
+    text-align: center;
+    color: var(--wr-color-medium);
+    background: rgba(var(--wr-color-light-rgb), 0.4);
+    border: 1px dashed var(--wr-color-light);
+    @include theme.smooth-br(var(--wr-border-radius-base));
+  }
+}

package/input/styles/_index.scss

@@ -1,126 +1,166 @@
-@forward './vars';
+@use '../../theme/styles' as theme;
 
+//
+// Native input styled by `[wrInput]` directive.
+// Used standalone OR wrapped in `<wr-input-group>` (group strips this
+// border so the visuals belong to the group instead).
+//
 .wr-input {
-  --wr-input-padding-right: var(--wr-input-padding-x);
-  --wr-input-cursor: default;
-
-  display: flex;
-
-  cursor: var(--wr-input-cursor);
-
+  --wr-input-color: var(--wr-color-dark);
+  --wr-input-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
+  --wr-input-bg: var(--wr-color-white);
+  --wr-input-border: var(--wr-color-light);
+  --wr-input-radius: var(--wr-border-radius-base);
+  --wr-input-ring: transparent;
+  --wr-input-padding-y: 0.4375rem;
+  --wr-input-padding-x: 0.75rem;
+  --wr-input-font-size: 0.875rem;
+  --wr-input-line-height: 1.25rem;
+
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+  appearance: none;
+  background: var(--wr-input-bg);
   color: var(--wr-input-color);
+  border: 1px solid var(--wr-input-border);
+  @include theme.smooth-br(var(--wr-input-radius));
+  box-shadow: 0 0 0 3px var(--wr-input-ring);
+  outline: 0;
+  margin: 0;
+  padding: calc(var(--wr-input-padding-y) * var(--wr-density-y, 1))
+    calc(var(--wr-input-padding-x) * var(--wr-density-x, 1));
+  font-family: var(--wr-font-family-base);
   font-size: var(--wr-input-font-size);
-  font-weight: var(--wr-input-font-weight);
   line-height: var(--wr-input-line-height);
+  transition:
+    border-color var(--wr-transition-base),
+    box-shadow var(--wr-transition-base),
+    background var(--wr-transition-base);
 
-  background-color: var(--wr-input-bg-color);
-  border: 1px solid var(--wr-input-border-color);
-  border-radius: var(--wr-input-border-radius);
-  box-shadow: var(--wr-input-box-shadow);
-
-  overflow: hidden;
-  position: relative;
-
-  transition: var(--wr-transition-base);
+  &::placeholder {
+    color: var(--wr-input-placeholder);
+  }
 
-  &--rounded {
-    --wr-input-border-radius: 50rem;
+  &:focus {
+    --wr-input-border: var(--wr-color-primary);
+    --wr-input-ring: rgba(var(--wr-color-primary-rgb), 0.15);
   }
 
-  &--disabled {
-    --wr-input-cursor: not-allowed;
+  &:disabled,
+  &[readonly] {
     --wr-input-color: var(--wr-color-medium);
-    --wr-input-bg-color: var(--wr-color-light-lighter);
+    --wr-input-bg: rgba(var(--wr-color-light-rgb), 0.35);
   }
 
-  &--focused {
-    --wr-input-border-color: var(--wr-color-primary);
-    --wr-input-box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.125);
+  &:disabled {
+    cursor: not-allowed;
   }
 
-  &--password {
-    --wr-input-padding-right: calc(var(--wr-input-icon-size) + calc(var(--wr-input-padding-x) / 2));
+  &--rounded {
+    --wr-input-radius: var(--wr-border-radius-pill);
+    --wr-input-padding-x: 1rem;
+    corner-shape: round; // override squircle from smooth-br for pills
   }
+}
 
-  &__native {
-    display: inline-block;
+//
+// Group wrapper — owns the border and focus ring when present, so the
+// inner `[wrInput]` can drop its own border and visually merge with
+// `[wrInputPrefix]` / `[wrInputSuffix]` / `<wr-password-toggle>` siblings.
+//
+.wr-input-group {
+  --wr-input-group-radius: var(--wr-border-radius-base);
+  --wr-input-group-bg: var(--wr-color-white);
+  --wr-input-group-border: var(--wr-color-light);
+  --wr-input-group-ring: transparent;
+  --wr-input-group-affix: var(--wr-color-medium);
+  --wr-input-group-padding-x: 0.75rem;
+
+  display: inline-flex;
+  align-items: stretch;
+  vertical-align: middle;
+  background: var(--wr-input-group-bg);
+  border: 1px solid var(--wr-input-group-border);
+  @include theme.smooth-br(var(--wr-input-group-radius));
+  box-shadow: 0 0 0 3px var(--wr-input-group-ring);
+  transition:
+    border-color var(--wr-transition-base),
+    box-shadow var(--wr-transition-base),
+    background var(--wr-transition-base);
+
+  &:focus-within {
+    --wr-input-group-border: var(--wr-color-primary);
+    --wr-input-group-ring: rgba(var(--wr-color-primary-rgb), 0.15);
+  }
 
-    flex: 1;
+  &--rounded {
+    --wr-input-group-radius: var(--wr-border-radius-pill);
+    --wr-input-group-padding-x: 1rem;
+    corner-shape: round; // override squircle from smooth-br for pills
+  }
 
-    appearance: none;
-    background: none;
-    border: none;
-    outline: none;
-    margin: 0;
-    vertical-align: middle;
-    white-space: normal;
-    resize: none;
-
-    color: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-
-    padding: var(--wr-input-padding-y) var(--wr-input-padding-x);
-    padding-right: var(--wr-input-padding-right);
-
-    &[disabled],
-    &:disabled {
-      cursor: var(--wr-input-cursor);
-    }
+  // Native input inside a group loses its own chrome.
+  .wr-input {
+    border: 0;
+    background: transparent;
+    box-shadow: none;
 
-    &::placeholder {
-      color: var(--wr-input-placeholder-color);
-      font-style: italic;
+    &:focus {
+      --wr-input-border: transparent;
+      --wr-input-ring: transparent;
     }
   }
 
-  &-icon {
-    display: flex;
-    flex-direction: column;
+  &__affix {
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    width: calc(var(--wr-input-icon-size) + calc(var(--wr-input-padding-x) / 2));
-    height: 100%;
-
-    cursor: pointer;
+    color: var(--wr-input-group-affix);
+    padding: 0 var(--wr-input-group-padding-x);
+    user-select: none;
+    font-weight: 500;
+    font-family: var(--wr-font-family-base);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 
-    &--disabled {
-      cursor: var(--wr-input-cursor);
-      pointer-events: none;
-    }
+  // Decorative affixes (`<span wrInputSuffix>USD</span>`) should let clicks
+  // fall through to the input. Interactive affixes (`<button>`) keep their
+  // own pointer behaviour — applies to date / date-time picker triggers.
+  &__affix:not(button) {
+    pointer-events: none;
+  }
 
-    &__icon {
-      --wr-icon-size: var(--wr-input-icon-size);
-      color: var(--wr-input-icon-color);
-      transition: var(--wr-transition-base);
-    }
+  &__affix--prefix + .wr-input {
+    padding-left: 0.25rem;
+  }
 
-    &:hover {
-      --wr-input-icon-color: var(--wr-color-primary);
-    }
+  .wr-input:has(+ &__affix--suffix),
+  .wr-input:has(+ wr-password-toggle) {
+    padding-right: 0.25rem;
   }
 
-  &-prefix,
-  &-suffix {
-    color: var(--wr-input-suffix-prefix-color);
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
+  &__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0 var(--wr-input-group-padding-x);
+    color: var(--wr-input-group-affix);
+    cursor: pointer;
+    transition: color var(--wr-transition-base);
 
-    padding-top: var(--wr-input-padding-y);
-    padding-bottom: var(--wr-input-padding-y);
-  }
+    --wr-icon-size: 1rem;
 
-  &-prefix {
-    padding-left: var(--wr-input-padding-x);
-  }
+    &:hover:not(:disabled) {
+      color: var(--wr-color-primary);
+    }
 
-  &-suffix {
-    padding-right: var(--wr-input-padding-x);
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
   }
 }