ngwr 6.1.1 → 7.1.0

package/styles/_breakpoints.scss

@@ -0,0 +1,75 @@
+@use 'sass:map';
+
+// Breakpoints
+
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xga: 1600px,
+  fhd: 1920px,
+  rt: 2560px,
+) !default;
+
+$container-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xga: 1530px,
+  fhd: 1830px,
+  rt: 2470px,
+) !default;
+
+// Helpers
+
+@function bp-min($name, $bps: $breakpoints) {
+  $min: map.get($bps, $name);
+  @if $min != 0 {
+    @return $min;
+  }
+  @return null;
+}
+
+@function bp-max($name, $bps: $breakpoints) {
+  $max: map.get($bps, $name);
+  @if $max and $max > 0 {
+    @return $max - 0.02;
+  }
+  @return null;
+}
+
+@function bp-infix($name, $bps: $breakpoints) {
+  @if bp-min($name, $bps) == null {
+    @return '';
+  }
+  @return '-#{$name}';
+}
+
+// Public mixins
+
+@mixin media-up($name, $bps: $breakpoints) {
+  $min: bp-min($name, $bps);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-down($name, $bps: $breakpoints) {
+  $max: bp-max($name, $bps);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/styles/_grid.scss

@@ -0,0 +1,71 @@
+@use 'sass:map';
+@forward 'breakpoints';
+@use 'breakpoints' as bp;
+
+// Grid-scoped token. Declared here (not in theme) because grid is the
+// only consumer. Override on `:root` or any subtree to retune spacing.
+:root {
+  --wr-grid-gutter: 1rem;
+}
+
+// Config
+
+$columns: 12;
+$gutter: var(--wr-grid-gutter);
+
+// Container
+
+.container,
+.container-fluid {
+  width: 100%;
+  padding-right: calc(#{$gutter} * 0.5);
+  padding-left: calc(#{$gutter} * 0.5);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@each $name, $max-width in bp.$container-widths {
+  .container-#{$name} {
+    @extend .container-fluid;
+  }
+
+  @include bp.media-up($name) {
+    %responsive-container-#{$name} {
+      max-width: $max-width;
+    }
+
+    $extend-breakpoint: true;
+
+    @each $bp-name, $_ in bp.$breakpoints {
+      @if $extend-breakpoint {
+        .container#{bp.bp-infix($bp-name)} {
+          @extend %responsive-container-#{$name};
+        }
+
+        @if $name == $bp-name {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}
+
+// Grid
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: #{$gutter};
+}
+
+@each $name in map.keys(bp.$breakpoints) {
+  $infix: bp.bp-infix($name);
+
+  @include bp.media-up($name) {
+    @for $i from 1 through $columns {
+      .col#{$infix}-#{$i} {
+        grid-column: auto / span $i;
+      }
+    }
+  }
+}

package/styles/_reset.scss

@@ -0,0 +1,123 @@
+// Opt-in CSS reset.
+//
+// Not loaded by the umbrella `ngwr` entry. Apps that don't already have a
+// reset (Tailwind preflight, normalize.css, etc.) can opt in via:
+//
+//   @use 'ngwr/reset';
+//
+// Modest scope — boxes, margins, form-element inheritance, and a few
+// link/list cleanups. No opinionated typography or color.
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  line-height: 1.5;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--wr-font-family-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: var(--wr-font-weight-semibold);
+  line-height: var(--wr-leading-tight);
+  letter-spacing: var(--wr-tracking-tight);
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: var(--wr-text-4xl);
+}
+h2 {
+  font-size: var(--wr-text-3xl);
+}
+h3 {
+  font-size: var(--wr-text-2xl);
+}
+h4 {
+  font-size: var(--wr-text-xl);
+}
+h5 {
+  font-size: var(--wr-text-lg);
+}
+h6 {
+  font-size: var(--wr-text-base);
+}
+
+p {
+  line-height: var(--wr-leading-normal);
+  text-wrap: pretty;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img,
+picture,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--wr-font-family-mono);
+}

package/styles/_typography.scss

@@ -0,0 +1,122 @@
+// Typography utility classes — opt-in.
+//
+// Not loaded by the umbrella `ngwr` entry. Bring in explicitly:
+//
+//   @use 'ngwr/typography';
+//
+// All values read from the `--wr-text-*` / `--wr-font-weight-*` /
+// `--wr-leading-*` / `--wr-tracking-*` tokens, so overriding the tokens
+// at `:root` re-themes every utility class in one place.
+
+// Size
+.wr-text-xs {
+  font-size: var(--wr-text-xs);
+}
+.wr-text-sm {
+  font-size: var(--wr-text-sm);
+}
+.wr-text-base {
+  font-size: var(--wr-text-base);
+}
+.wr-text-lg {
+  font-size: var(--wr-text-lg);
+}
+.wr-text-xl {
+  font-size: var(--wr-text-xl);
+}
+.wr-text-2xl {
+  font-size: var(--wr-text-2xl);
+}
+.wr-text-3xl {
+  font-size: var(--wr-text-3xl);
+}
+.wr-text-4xl {
+  font-size: var(--wr-text-4xl);
+}
+.wr-text-5xl {
+  font-size: var(--wr-text-5xl);
+}
+
+// Weight
+.wr-font-thin {
+  font-weight: var(--wr-font-weight-thin);
+}
+.wr-font-light {
+  font-weight: var(--wr-font-weight-light);
+}
+.wr-font-regular {
+  font-weight: var(--wr-font-weight-regular);
+}
+.wr-font-medium {
+  font-weight: var(--wr-font-weight-medium);
+}
+.wr-font-semibold {
+  font-weight: var(--wr-font-weight-semibold);
+}
+.wr-font-bold {
+  font-weight: var(--wr-font-weight-bold);
+}
+.wr-font-extrabold {
+  font-weight: var(--wr-font-weight-extrabold);
+}
+
+// Leading
+.wr-leading-none {
+  line-height: var(--wr-leading-none);
+}
+.wr-leading-tight {
+  line-height: var(--wr-leading-tight);
+}
+.wr-leading-snug {
+  line-height: var(--wr-leading-snug);
+}
+.wr-leading-normal {
+  line-height: var(--wr-leading-normal);
+}
+.wr-leading-relaxed {
+  line-height: var(--wr-leading-relaxed);
+}
+.wr-leading-loose {
+  line-height: var(--wr-leading-loose);
+}
+
+// Tracking
+.wr-tracking-tighter {
+  letter-spacing: var(--wr-tracking-tighter);
+}
+.wr-tracking-tight {
+  letter-spacing: var(--wr-tracking-tight);
+}
+.wr-tracking-normal {
+  letter-spacing: var(--wr-tracking-normal);
+}
+.wr-tracking-wide {
+  letter-spacing: var(--wr-tracking-wide);
+}
+.wr-tracking-wider {
+  letter-spacing: var(--wr-tracking-wider);
+}
+.wr-tracking-widest {
+  letter-spacing: var(--wr-tracking-widest);
+}
+
+// Family
+.wr-font-base {
+  font-family: var(--wr-font-family-base);
+}
+.wr-font-mono {
+  font-family: var(--wr-font-family-mono);
+}
+
+// Misc
+.wr-text-balance {
+  text-wrap: balance;
+}
+.wr-text-pretty {
+  text-wrap: pretty;
+}
+.wr-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/styles.scss

@@ -1,28 +1,118 @@
-@forward './styles/maps';
-@forward './styles/colors';
-@forward './styles/variables';
-@forward './styles/grid' show media-up, media-down;
-@forward './styles/reset';
-@forward './styles/animations';
-@forward './styles/cdk';
+// Umbrella stylesheet — the "import once, everything works" entry.
+//
+// Loads:
+//   - Theme tokens (--wr-* CSS custom properties)
+//   - SCSS API   (breakpoints mixins; no CSS output)
+//   - Every component's styles (.wr-name and modifiers)
+//
+// Does NOT load utilities. Opt in explicitly:
+//   @use 'ngwr/grid';   // .grid, .container, .col-*
+//   @use 'ngwr/reset';  // box-sizing, body margin, etc.
+//
+// Consumers can also pull individual components without the umbrella:
+//   @use 'ngwr/badge';  // includes theme automatically, dedup-safe.
 
+@forward './theme/styles';
+@forward './density/styles';
+@forward './styles/breakpoints';
+
+@forward './affix/styles';
 @forward './alert/styles';
+@forward './anchor/styles';
+@forward './aurora/styles';
 @forward './avatar/styles';
+@forward './back-top/styles';
+@forward './badge/styles';
+@forward './bar-chart/styles';
+@forward './blur-text/styles';
+@forward './border-glow/styles';
+@forward './breadcrumbs/styles';
+@forward './burger/styles';
 @forward './button/styles';
+@forward './calendar/styles';
+@forward './calendar-heatmap/styles';
+@forward './card/styles';
+@forward './carousel/styles';
+@forward './cascader/styles';
 @forward './checkbox/styles';
+@forward './circular-text/styles';
+@forward './click-spark/styles';
+@forward './collapse/styles';
+@forward './color-picker/styles';
+@forward './command-palette/styles';
+@forward './compare/styles';
+@forward './context-menu/styles';
+@forward './counter/styles';
+@forward './date-picker/styles';
+@forward './decrypt-text/styles';
+@forward './descriptions/styles';
 @forward './dialog/styles';
 @forward './divider/styles';
+@forward './donut-chart/styles';
+@forward './drag-drop/styles';
+@forward './drawer/styles';
+@forward './dropdown/styles';
+@forward './empty/styles';
+@forward './falling-text/styles';
+@forward './file-upload/styles';
 @forward './form/styles';
+@forward './gauge/styles';
+@forward './glitch-text/styles';
+@forward './gradient-text/styles';
 @forward './icon/styles';
+@forward './image-cropper/styles';
 @forward './input/styles';
+@forward './input-number/styles';
+@forward './input-otp/styles';
+@forward './keyboard/styles';
+@forward './knob/styles';
+@forward './layout/styles';
+@forward './lightbox/styles';
+@forward './line-chart/styles';
+@forward './list/styles';
+@forward './loading-bar/styles';
+@forward './marquee/styles';
+@forward './mention/styles';
+@forward './meter-group/styles';
+@forward './page-header/styles';
+@forward './pagination/styles';
+@forward './popconfirm/styles';
+@forward './popover/styles';
 @forward './progress/styles';
 @forward './qr/styles';
+@forward './radio/styles';
+@forward './rating/styles';
+@forward './result/styles';
+@forward './rotating-text/styles';
+@forward './scramble-text/styles';
+@forward './segmented/styles';
+@forward './select/styles';
+@forward './shiny-text/styles';
+@forward './sidebar/styles';
 @forward './skeleton/styles';
+@forward './slider/styles';
+@forward './sparkline/styles';
+@forward './speed-dial/styles';
 @forward './spinner/styles';
-@forward './tag/styles';
-@forward './textarea/styles';
-@forward './select/styles';
-@forward './dropdown/styles';
-@forward './pagination/styles';
+@forward './splash-cursor/styles';
+@forward './split-text/styles';
+@forward './splitter/styles';
+@forward './spotlight-card/styles';
+@forward './squircle/styles';
+@forward './star-border/styles';
+@forward './statistic/styles';
+@forward './stepper/styles';
+@forward './switch/styles';
 @forward './table/styles';
-//@forward './tooltip';
+@forward './tabs/styles';
+@forward './textarea/styles';
+@forward './tilt-card/styles';
+@forward './timeline/styles';
+@forward './toast/styles';
+@forward './toolbar/styles';
+@forward './tree/styles';
+@forward './typewriter/styles';
+@forward './typography/styles';
+@forward './virtual-scroll/styles';
+@forward './waves/styles';
+@forward './window/styles';

package/switch/styles/_index.scss

@@ -0,0 +1,82 @@
+@use '../../theme/styles' as theme;
+
+.wr-switch {
+  --wr-switch-track-width: 2.25rem;
+  --wr-switch-track-height: 1.25rem;
+  --wr-switch-thumb-size: 1rem;
+  --wr-switch-bg: var(--wr-color-light);
+  --wr-switch-bg-checked: var(--wr-color-primary);
+  --wr-switch-thumb: var(--wr-color-white);
+  --wr-switch-color: var(--wr-color-dark);
+
+  display: inline-flex;
+  vertical-align: middle;
+  color: var(--wr-switch-color);
+  font-family: var(--wr-font-family-base);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+
+  &__label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+
+    &:focus-visible + .wr-switch__track {
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+    }
+  }
+
+  &__track {
+    flex: 0 0 auto;
+    position: relative;
+    width: var(--wr-switch-track-width);
+    height: var(--wr-switch-track-height);
+    background: var(--wr-switch-bg);
+    border-radius: var(--wr-border-radius-pill);
+    transition: background var(--wr-transition-base);
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 50%;
+    left: calc((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2);
+    transform: translateY(-50%);
+    width: var(--wr-switch-thumb-size);
+    height: var(--wr-switch-thumb-size);
+    background: var(--wr-switch-thumb);
+    border-radius: 50%;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    transition: left var(--wr-transition-base);
+  }
+
+  &--checked {
+    --wr-switch-bg: var(--wr-switch-bg-checked);
+
+    .wr-switch__thumb {
+      left: calc(
+        var(--wr-switch-track-width) - var(--wr-switch-thumb-size) -
+          ((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2)
+      );
+    }
+  }
+
+  &--disabled {
+    --wr-switch-color: var(--wr-color-medium);
+    pointer-events: none;
+    opacity: 0.6;
+  }
+}