ngwr 6.0.0 → 7.0.0

package/table/styles/_index.scss

@@ -1,4 +1,255 @@
-@forward "./vars";
-@forward "./table";
-@forward "./table-filter";
-@forward "./table-sort";
+@use '../../theme/styles' as theme;
+
+.wr-table {
+  --wr-table-border: var(--wr-color-light);
+  --wr-table-head-bg: rgba(var(--wr-color-light-rgb), 0.25);
+  --wr-table-row-hover: rgba(var(--wr-color-light-rgb), 0.15);
+
+  display: block;
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--wr-table-border);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  overflow: hidden;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__scroll {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  &__th,
+  &__td {
+    padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
+    text-align: left;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--wr-table-border);
+  }
+
+  &__th {
+    background: var(--wr-table-head-bg);
+    color: var(--wr-color-medium);
+    font-weight: 600;
+    font-size: 0.6875rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  &__th-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  &__title {
+    flex: 0 0 auto;
+  }
+
+  &__sort-btn {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+    line-height: 0;
+  }
+
+  &__tr {
+    transition: background var(--wr-transition-base);
+
+    &:hover {
+      background: var(--wr-table-row-hover);
+    }
+
+    &:last-child .wr-table__td {
+      border-bottom: 0;
+    }
+  }
+
+  &__empty {
+    text-align: center;
+    color: var(--wr-color-medium);
+    padding: 1.5rem;
+  }
+
+  &__pager {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.625rem 0.75rem;
+    border-top: 1px solid var(--wr-table-border);
+    background: var(--wr-table-head-bg);
+  }
+
+  &__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(var(--wr-color-white-rgb), 0.7);
+    backdrop-filter: blur(2px);
+    z-index: 1;
+  }
+}
+
+.wr-table-sort {
+  display: inline-flex;
+  --wr-icon-size: 0.875rem;
+  color: var(--wr-color-medium);
+  transition:
+    transform var(--wr-transition-base),
+    color var(--wr-transition-base);
+  opacity: 0.5;
+
+  &--asc {
+    opacity: 1;
+    color: var(--wr-color-primary);
+  }
+
+  &--desc {
+    opacity: 1;
+    color: var(--wr-color-primary);
+    transform: rotate(180deg);
+  }
+}
+
+.wr-table-filter {
+  display: inline-flex;
+  color: var(--wr-color-medium);
+
+  &--active {
+    color: var(--wr-color-primary);
+  }
+
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+    --wr-icon-size: 0.875rem;
+  }
+
+  &__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1rem;
+    padding: 0 0.25rem;
+    border-radius: var(--wr-border-radius-pill);
+    background: var(--wr-color-primary);
+    color: var(--wr-color-primary-contrast);
+    font-size: 0.625rem;
+    font-weight: 600;
+  }
+
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 12rem;
+    max-width: 16rem;
+    padding: 0.5rem;
+    gap: 0.375rem;
+    font-family: var(--wr-font-family-base);
+  }
+
+  &__search {
+    appearance: none;
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--wr-color-light);
+    border-radius: var(--wr-border-radius-sm);
+    background: transparent;
+    color: var(--wr-color-dark);
+    font: inherit;
+    font-size: 0.8125rem;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    max-height: 14rem;
+    overflow-y: auto;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-dark);
+    font: inherit;
+    font-size: 0.8125rem;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(var(--wr-color-light-rgb), 0.35);
+    }
+  }
+
+  &__check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border-radius: var(--wr-border-radius-sm);
+    border: 1px solid var(--wr-color-light);
+    color: transparent;
+    --wr-icon-size: 0.75rem;
+    transition: var(--wr-transition-base);
+  }
+
+  &__item--selected &__check {
+    background: var(--wr-color-primary);
+    border-color: var(--wr-color-primary);
+    color: var(--wr-color-primary-contrast);
+  }
+
+  &__title {
+    flex: 1 1 auto;
+  }
+
+  &__empty {
+    padding: 0.625rem 0.5rem;
+    color: var(--wr-color-medium);
+    font-size: 0.8125rem;
+    text-align: center;
+  }
+
+  &__reset {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-primary);
+    font: inherit;
+    font-size: 0.8125rem;
+    cursor: pointer;
+    text-align: left;
+
+    &:hover {
+      background: rgba(var(--wr-color-primary-rgb), 0.08);
+    }
+  }
+}

package/tabs/styles/_index.scss

@@ -0,0 +1,71 @@
+@use '../../theme/styles' as theme;
+
+.wr-tabs {
+  --wr-tabs-border: var(--wr-color-light);
+  --wr-tabs-color: var(--wr-color-medium);
+  --wr-tabs-color-hover: var(--wr-color-dark);
+  --wr-tabs-color-active: var(--wr-color-primary);
+  --wr-tabs-indicator: var(--wr-color-primary);
+
+  display: block;
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--wr-font-family-base);
+
+  &__strip {
+    display: flex;
+    align-items: stretch;
+    gap: 0.25rem;
+    // The hairline is an inset shadow, not `border-bottom` — the strip
+    // clips overflow (see below), which would cut off tabs pulled down
+    // with a negative margin; the shadow lets the active indicator paint
+    // directly over the line instead.
+    box-shadow: inset 0 -1px 0 var(--wr-tabs-border);
+    // `overflow-x: auto` alone reserves space for a vertical scrollbar in
+    // browsers that don't use overlay scrollbars (Firefox/some Safari) —
+    // showing a stray vertical bar on the right of the strip. Force-hide
+    // the y-axis since the strip is always a single row.
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &__tab {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    text-decoration: none;
+    padding: 0.625rem 1rem;
+    color: var(--wr-tabs-color);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      color var(--wr-transition-base),
+      border-color var(--wr-transition-base);
+
+    &:hover:not(.wr-tabs__tab--active):not(.wr-tabs__tab--disabled):not(:disabled) {
+      color: var(--wr-tabs-color-hover);
+    }
+
+    &--active {
+      color: var(--wr-tabs-color-active);
+      border-bottom-color: var(--wr-tabs-indicator);
+    }
+
+    &--disabled,
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &__panel {
+    padding-top: 1rem;
+  }
+}

package/textarea/styles/_index.scss

@@ -1,77 +1,68 @@
-@forward './vars';
+@use '../../theme/styles' as theme;
 
 .wr-textarea {
-  --wr-textarea-padding-right: var(--wr-textarea-padding-x);
-  --wr-textarea-cursor: default;
-  --wr-textarea-resize: none;
-
-  display: flex;
-
-  cursor: var(--wr-textarea-cursor);
-
-  color: var(--wr-textarea-color);
-  font-size: var(--wr-textarea-font-size);
-  font-weight: var(--wr-textarea-font-weight);
-  line-height: var(--wr-textarea-line-height);
-
-  background-color: var(--wr-textarea-bg-color);
-  border: 1px solid var(--wr-textarea-border-color);
-  border-radius: var(--wr-textarea-border-radius);
-  box-shadow: var(--wr-textarea-box-shadow);
-
-  overflow: hidden;
+  display: block;
   position: relative;
 
-  transition: var(--wr-transition-base);
+  // Defaults
+  --wr-textarea-color: var(--wr-color-dark);
+  --wr-textarea-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
+  --wr-textarea-bg: var(--wr-color-white);
+  --wr-textarea-border: var(--wr-color-light);
+  --wr-textarea-radius: var(--wr-border-radius-base);
+  --wr-textarea-ring: transparent;
+  --wr-textarea-padding-y: 0.5rem;
+  --wr-textarea-padding-x: 0.75rem;
+  --wr-textarea-font-size: 0.875rem;
+  --wr-textarea-line-height: 1.375rem;
+
+  background: var(--wr-textarea-bg);
+  color: var(--wr-textarea-color);
+  border: 1px solid var(--wr-textarea-border);
+  @include theme.smooth-br(var(--wr-textarea-radius));
+  box-shadow: 0 0 0 3px var(--wr-textarea-ring);
+  transition:
+    border-color var(--wr-transition-base),
+    box-shadow var(--wr-transition-base),
+    background var(--wr-transition-base);
+
+  &--focused {
+    --wr-textarea-border: var(--wr-color-primary);
+    --wr-textarea-ring: rgba(var(--wr-color-primary-rgb), 0.15);
+  }
 
   &--disabled {
-    --wr-textarea-cursor: not-allowed;
     --wr-textarea-color: var(--wr-color-medium);
-    --wr-textarea-bg-color: var(--wr-color-light-lighter);
-  }
-
-  &--resizable {
-    --wr-textarea-resize: vertical;
+    --wr-textarea-bg: rgba(var(--wr-color-light-rgb), 0.35);
+    cursor: not-allowed;
   }
 
-  &--autosize {
-    .wr-textarea__native {
-      overflow-y: hidden;
-      resize: none;
-    }
+  &--no-resize &__native {
+    resize: none;
   }
 
   &__native {
-    display: inline-block;
-
-    flex: 1;
-
+    display: block;
+    width: 100%;
     appearance: none;
-    background: none;
-    border: none;
-    outline: none;
+    background: transparent;
+    border: 0;
+    outline: 0;
     margin: 0;
-    vertical-align: middle;
-    white-space: normal;
-
-    resize: var(--wr-textarea-resize);
-
     color: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
+    font-family: var(--wr-font-family-base);
+    font-size: var(--wr-textarea-font-size);
+    line-height: var(--wr-textarea-line-height);
+    padding: calc(var(--wr-textarea-padding-y) * var(--wr-density-y, 1))
+      calc(var(--wr-textarea-padding-x) * var(--wr-density-x, 1));
+    resize: vertical;
 
-    padding: var(--wr-textarea-padding-y) var(--wr-textarea-padding-x);
-    padding-right: var(--wr-textarea-padding-right);
-
-    &[disabled],
-    &:disabled {
-      cursor: var(--wr-textarea-cursor);
+    &::placeholder {
+      color: var(--wr-textarea-placeholder);
     }
 
-    &::placeholder {
-      color: var(--wr-textarea-placeholder-color);
-      font-style: italic;
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }

package/theme/styles/_colors.scss

@@ -0,0 +1,83 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+// Base palette
+//
+// Override the whole palette via:
+//   @use 'ngwr/theme/colors' with (
+//     $base-colors: (primary: #...)
+//   );
+
+$base-colors: (
+  primary: #3969e2,
+  secondary: #f51c6a,
+  success: #00a400,
+  warning: #ffba00,
+  danger: #fa383e,
+  light: #cbd5e1,
+  medium: #8594a4,
+  dark: #0f172a,
+) !default;
+
+// YIQ luminosity threshold (0–255) above which a color is treated as
+// "light" and pairs with dark text. Uses the classic Bootstrap formula —
+// it weights the green channel higher than blue, which matches human
+// perception of brightness far better than HSL lightness (HSL classes
+// pure blue as 50%-lightness even though it reads as dark).
+$contrast-threshold: 150 !default;
+
+// Dark text used on light backgrounds.
+$contrast-dark: #171616 !default;
+
+// Light text used on dark backgrounds.
+$contrast-light: #ffffff !default;
+
+// Helpers
+
+@function _rgb-channels($c) {
+  @return color.channel($c, 'red'), color.channel($c, 'green'), color.channel($c, 'blue');
+}
+
+@function _contrast($c) {
+  $r: color.channel($c, 'red');
+  $g: color.channel($c, 'green');
+  $b: color.channel($c, 'blue');
+  $yiq: math.div($r * 299 + $g * 587 + $b * 114, 1000);
+  @if $yiq >= $contrast-threshold {
+    @return $contrast-dark;
+  }
+  @return $contrast-light;
+}
+
+// CSS variables
+
+:root {
+  --wr-color-white: #ffffff;
+  --wr-color-white-rgb: 255, 255, 255;
+  --wr-color-black: #000000;
+  --wr-color-black-rgb: 0, 0, 0;
+
+  // Overlay dim — used by dialog / drawer / image preview / command
+  // palette / image cropper for the behind-the-panel scrim. Always
+  // black so the dim reads as "covered" regardless of theme. Don't
+  // wire to `--wr-color-dark-rgb` — that flips to light in dark mode
+  // and turns the backdrop into a white wash.
+  --wr-color-backdrop-rgb: 0, 0, 0;
+
+  @each $name, $base in $base-colors {
+    --wr-color-#{$name}: #{$base};
+    --wr-color-#{$name}-rgb: #{_rgb-channels($base)};
+    --wr-color-#{$name}-contrast: #{_contrast($base)};
+    --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)};
+    --wr-color-#{$name}-darker: #{color.adjust($base, $lightness: -10%)};
+    --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
+    --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
+  }
+}
+
+// Public SCSS list
+//
+// Color names available for `@each` loops in component styles.
+
+$colors: map.keys($base-colors) !default;

package/theme/styles/_dark.scss

@@ -0,0 +1,85 @@
+// Dark theme overrides — opt-in via `[data-theme="dark"]` on <html>.
+// Drive the toggle from `WrTheme` (provided automatically with
+// `provideWrTheme(...)`).
+//
+// Only semantic tokens flip — palette hues stay so brand-coloured
+// elements look the same regardless of theme.
+
+[data-theme='dark'] {
+  // Canvas (was `--wr-color-white` in light mode)
+  // Deeper than slate-900 so an elevated surface in slate-800 reads
+  // as a real layer rather than vanishing into the background.
+  --wr-color-white: #0b1120;
+  --wr-color-white-rgb: 11, 17, 32;
+
+  // Text
+  // Softer than pure-white — easier on the eyes for long reading.
+  --wr-color-dark: #e6ebf3;
+  --wr-color-dark-rgb: 230, 235, 243;
+  // `*-contrast` values are baked at SCSS compile time from the light
+  // palette, so they don't auto-flip when `--wr-color-dark` /
+  // `--wr-color-white` are reassigned for dark mode. Tooltip-style
+  // surfaces (`bg: dark; color: dark-contrast`) would render
+  // white-on-white without this override; re-pair them by hand here.
+  --wr-color-dark-contrast: #0b1120;
+  --wr-color-white-contrast: #e6ebf3;
+
+  // Borders / tints (was `--wr-color-light`)
+  // Used for two jobs at once: 1-px borders and translucent surface
+  // tints (`rgba(light-rgb, 0.4)` etc.). Sits between the original
+  // slate-800 (#1f2a3d, invisible) and a brighter slate-700 (#334155,
+  // looks like glowing pencil lines). This value reads as a real
+  // divider on cards / inputs without shouting — matches what Vercel
+  // and shadcn ship for the same job.
+  --wr-color-light: #262f44;
+  --wr-color-light-rgb: 38, 47, 68;
+  // The baked contrast pairs with the LIGHT value (#cbd5e1 → dark text);
+  // the dark surface above needs light text instead.
+  --wr-color-light-contrast: #e6ebf3;
+  // `*-lighter` / `*-darker` are baked at SCSS compile time from the
+  // LIGHT palette (slate-300 ± 10% lightness ≈ #e8eef5), so without
+  // these overrides the showcase header / sidebar would draw a
+  // bright slate-200 hairline on the dark canvas. Re-derive with the
+  // semantics inverted: "lighter" still means "subtler hairline"
+  // (closer to canvas, so darker absolute color), "darker" still
+  // means "stronger divider" (further from canvas, so lighter).
+  --wr-color-light-lighter: #1a2236;
+  --wr-color-light-darker: #3a4661;
+
+  // Secondary text (was `--wr-color-medium`)
+  // Lifted from slate-400 → slate-300-ish for better legibility on
+  // the deeper canvas.
+  --wr-color-medium: #9aa6b8;
+  --wr-color-medium-rgb: 154, 166, 184;
+
+  // Brand-color retune
+  // The default primary (#3969e2) reads a touch dim on the deep
+  // canvas. Bump the base + shade derivations so hover / focus rings
+  // stay visible against slate-900.
+  --wr-color-primary: #5b85ff;
+  --wr-color-primary-rgb: 91, 133, 255;
+  --wr-color-primary-light: #7a9eff;
+  --wr-color-primary-dark: #2f56c9;
+  --wr-color-primary-lighter: #99b6ff;
+  --wr-color-primary-darker: #1f3a99;
+
+  --wr-color-success: #34c759;
+  --wr-color-success-rgb: 52, 199, 89;
+
+  --wr-color-warning: #ffcc33;
+  --wr-color-warning-rgb: 255, 204, 51;
+
+  --wr-color-danger: #ff5c5c;
+  --wr-color-danger-rgb: 255, 92, 92;
+
+  // Elevation
+  // Black shadows at light-mode alphas vanish on the deep canvas; same
+  // geometry, much stronger ink, so panels keep reading as layers.
+  --wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 35%);
+  --wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 45%);
+  --wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 50%), 0 2px 4px rgb(0 0 0 / 35%);
+  --wr-shadow-float: 0 8px 24px rgb(0 0 0 / 55%);
+  --wr-shadow-modal: 0 24px 56px rgb(0 0 0 / 60%);
+
+  color-scheme: dark;
+}