@nuvoui/core 1.2.3 → 1.2.5

package/src/styles/utilities/_animations.scss

@@ -6,31 +6,26 @@
 
 $generated-keyframes: ();
 
-@mixin generate-bounce-keyframes($keyframeName, $x, $y) {
-  @if not list.index($generated-keyframes, $keyframeName) {
-    $generated-keyframes: list.append($generated-keyframes, $keyframeName) !global;
-
-    @keyframes #{$keyframeName} {
-      0% {
-        transform: translateX(-#{$x}) translateY(-#{$y});
-      }
-
-      50% {
-        transform: translateX(#{$x}) translateY(#{$y});
-      }
-
-      100% {
-        transform: translateX(-#{$x}) translateY(-#{$y});
-      }
+@mixin ensure-keyframes($name) {
+  @if not list.index($generated-keyframes, $name) {
+    $generated-keyframes: list.append($generated-keyframes, $name) !global;
+    
+    @keyframes #{$name} {
+      @content;
     }
   }
 }
 
-@mixin animate-bounce($props) {
+/**
+ * @mixin animate-bounce
+ * @description Creates a bouncing animation
+ * @param {Map} $props - Animation properties
+ */
+ @mixin animate-bounce($props: ()) {
   $defaults: (
-    vertical: 0%,
-    horizontal: 0%,
-    duration: 5s,
+    vertical: 0.5rem,
+    horizontal: 0,
+    duration: 1s,
     timing: ease-in-out,
     iteration: infinite,
   );
@@ -50,28 +45,26 @@ $generated-keyframes: ();
   // Clean values (remove units)
   $clean-x: if($x, strip-unit($x), 0);
   $clean-y: if($y, strip-unit($y), 0);
+  
   $animation-name: anim-bounce-#{$clean-x}#{$x-unit}-#{$clean-y}#{$y-unit};
 
-  animation: #{$animation-name} $duration $easing $iteration;
-  @include generate-bounce-keyframes($animation-name, $x, $y);
-}
 
-@keyframes fade-in-reveal {
-  to {
-    scale: 1;
-    opacity: 1;
-  }
-}
+  // Apply the animation
+  animation: #{$animation-name} $duration $easing $iteration;
 
-@media (prefers-reduced-motion: no-preference) {
-  .anim__fade-in-reveal {
-    scale: 0.2;
-    opacity: 0.7;
-    animation: fade-in-reveal linear forwards;
-    animation-timeline: view();
-    animation-range-start: cover;
-    animation-range-end: 550px;
+  // Generate keyframes with ensure-keyframes pattern
+  @include ensure-keyframes($animation-name) {
+    0%, 100% {
+      transform: translate(0, 0);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    
+    50% {
+      transform: translate($x, $y);
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
   }
+  
 }
 
 @mixin hover-ready {
@@ -80,55 +73,271 @@ $generated-keyframes: ();
   transition-timing-function: ease-in-out; 
 }
 
+/**
+ * @mixin animate-pulse
+ * @description Creates a pulsing opacity animation
+ * @param {Map} $props - Animation properties
+ */
+ @mixin animate-pulse($props: ()) {
+  $defaults: (
+    min-opacity: 0.5,
+    max-opacity: 1,
+    duration: 1s,
+    timing: ease-in-out,
+    iteration: infinite,
+  );
+
+  // Merge with defaults
+  $props: map.merge($defaults, $props);
+  $min-opacity: map.get($props, "min-opacity");
+  $max-opacity: map.get($props, "max-opacity");
+  $duration: map.get($props, "duration");
+  $timing: map.get($props, "timing");
+  $iteration: map.get($props, "iteration");
+
+  $animation-name: anim-pulse-#{$min-opacity * 100}-#{$max-opacity * 100};
+
+  animation: #{$animation-name} $duration $timing $iteration;
+
+  @include ensure-keyframes($animation-name) {
+    0%, 100% { opacity: $max-opacity; }
+    50% { opacity: $min-opacity; }
+  }
+
+}
+
+
+/**
+ * @mixin animate-spin
+ * @description Creates a spinning animation
+ * @param {Map} $props - Animation properties
+ */
+ @mixin animate-spin($props: ()) {
+  $defaults: (
+    direction: normal,
+    duration: 1s,
+    timing: linear,
+    iteration: infinite,
+  );
+
+  // Merge with defaults
+  $props: map.merge($defaults, $props);
+  $direction: map.get($props, "direction");
+  $duration: map.get($props, "duration");
+  $timing: map.get($props, "timing");
+  $iteration: map.get($props, "iteration");
+
+  $animation-name: anim-spin-#{$direction};
+
+  animation: #{$animation-name} $duration $timing $iteration;
+
+  @include ensure-keyframes($animation-name) {
+    from { transform: rotate(0deg); }
+
+    to { 
+      @if $direction == 'normal' {
+        transform: rotate(360deg); 
+      } @else {
+        transform: rotate(-360deg); 
+      }
+    }
+  }
+
+}
+
+/**
+ * @mixin animate-ping
+ * @description Creates a ping animation (scale + fade)
+ * @param {Map} $props - Animation properties
+ */
+ @mixin animate-ping($props: ()) {
+  $defaults: (
+    scale: 2,
+    duration: 1s,
+    timing: cubic-bezier(0, 0, 0.2, 1),
+    iteration: infinite,
+  );
+
+  // Merge with defaults
+  $props: map.merge($defaults, $props);
+  $scale: map.get($props, "scale");
+  $duration: map.get($props, "duration");
+  $timing: map.get($props, "timing");
+  $iteration: map.get($props, "iteration");
+
+  $animation-name: anim-ping-#{$scale * 10};
+
+  animation: #{$animation-name} $duration $timing $iteration;
+
+  @include ensure-keyframes($animation-name) {
+    75%, 100% { 
+      transform: scale($scale);
+      opacity: 0;
+    }
+  }
+
+}
+
+/**
+ * @mixin animate-fade
+ * @description Creates fade in/out animation
+ * @param {Map} $props - Animation properties
+ */
+ @mixin animate-fade($props: ()) {
+  $defaults: (
+    type: in,
+    duration: 0.5s,
+    timing: ease-in-out,
+    iteration: 1 forwards,
+  );
+
+  // Merge with defaults
+  $props: map.merge($defaults, $props);
+  $type: map.get($props, "type");
+  $duration: map.get($props, "duration");
+  $timing: map.get($props, "timing");
+  $iteration: map.get($props, "iteration");
+
+  $animation-name: anim-fade-#{$type};
+
+  animation: #{$animation-name} $duration $timing $iteration;
+
+  @include ensure-keyframes($animation-name) {
+    @if $type == 'in' {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    } @else if $type == 'out' {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    } @else if $type == 'in-up' {
+      from { 
+        opacity: 0; 
+        transform: translateY(20px);
+      }
+
+      to { 
+        opacity: 1; 
+        transform: translateY(0);
+      }
+    } @else if $type == 'in-down' {
+      from { 
+        opacity: 0; 
+        transform: translateY(-20px);
+      }
+
+      to { 
+        opacity: 1; 
+        transform: translateY(0);
+      }
+    }
+  }
+
+}
+
+/**
+ * @mixin animate-shake
+ * @description Creates a shake animation
+ * @param {Map} $props - Animation properties
+ */
+ @mixin animate-shake($props: ()) {
+  $defaults: (
+    intensity: 5px,
+    duration: 0.5s,
+    timing: ease-in-out,
+    iteration: 1,
+  );
+
+  // Merge with defaults
+  $props: map.merge($defaults, $props);
+  $intensity: map.get($props, "intensity");
+  $duration: map.get($props, "duration");
+  $timing: map.get($props, "timing");
+  $iteration: map.get($props, "iteration");
+
+  $intensity-val: strip-unit($intensity);
+  $animation-name: anim-shake-#{$intensity-val};
+
+  animation: #{$animation-name} $duration $timing $iteration;
+
+  @include ensure-keyframes($animation-name) {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-$intensity); }
+    20%, 40%, 60%, 80% { transform: translateX($intensity); }
+  }
+
+}
+
 @if VAR.$generate-utility-classes {
-  .anim__bounce {
-    @include animate-bounce((
-      vertical: 50%,
-      horizontal: 50%,
-      duration: 1s,
-      timing: ease-in-out,
-      iteration: infinite,
-    ));
-  }
-
-  .anim__bounce-sm {
-    @include animate-bounce((
-      vertical: 25%,
-      horizontal: 25%,
-      duration: 1s,
-      timing: ease-in-out,
-      iteration: infinite,
-    ));
-  }
-
-  .anim__bounce-md {
-    @include animate-bounce((
-      vertical: 50%,
-      horizontal: 50%,
-      duration: 1s,
-      timing: ease-in-out,
-      iteration: infinite,
-    ));
-  }
-
-  .anim__bounce-lg {
-    @include animate-bounce((
-      vertical: 75%,
-      horizontal: 75%,
-      duration: 1s,
-      timing: ease-in-out,
-      iteration: infinite,
-    ));
-  }
-
-  .anim__bounce-xl {
-    @include animate-bounce((
-      vertical: 100%,
-      horizontal: 100%,
-      duration: 1s,
-      timing: ease-in-out,
-      iteration: infinite,
-    ));
+   // Add to your existing animation utilities
+  
+   .animate-pulse {
+    @include animate-pulse;
+  }
+  
+  .animate-spin {
+    @include animate-spin;
+  }
+  
+  .animate-ping {
+    @include animate-ping;
+  }
+  
+  .animate-fade-in {
+    @include animate-fade((type: in));
+  }
+  
+  .animate-fade-out {
+    @include animate-fade((type: out));
+  }
+  
+  .animate-fade-in-up {
+    @include animate-fade((type: in-up));
+  }
+  
+  .animate-fade-in-down {
+    @include animate-fade((type: in-down));
+  }
+  
+  .animate-shake {
+    @include animate-shake;
+  }
+
+  // Add responsive variants if needed
+  @each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: #{$width}) {
+      
+      .animate-pulse\@#{$breakpoint} {
+          @include animate-pulse;
+        }
+        
+        .animate-spin\@#{$breakpoint} {
+          @include animate-spin;
+        }
+        
+        .animate-ping\@#{$breakpoint} {
+          @include animate-ping;
+        }
+        
+        .animate-fade-in\@#{$breakpoint} { 
+          @include animate-fade((type: in));
+        }
+        
+        .animate-fade-out\@#{$breakpoint} {
+          @include animate-fade((type: out));
+        }
+        
+        .animate-fade-in-up\@#{$breakpoint} {
+          @include animate-fade((type: in-up));
+        }
+        
+        .animate-fade-in-down\@#{$breakpoint} {
+          @include animate-fade((type: in-down));
+        }
+        
+        .animate-shake\@#{$breakpoint} {
+          @include animate-shake;
+        }
+    }
   }
 
   .hover-ready{

package/src/styles/utilities/_backdrop-filters.scss

@@ -0,0 +1,269 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../abstracts" as *;
+@use "../abstracts/functions" as FN;
+
+/**
+ * Backdrop Filter Utilities
+ *
+ * Provides utility classes and mixins for backdrop-filter effects.
+ * All utilities come with responsive variants.
+ *
+ * Usage:
+ * <div class="backdrop-blur-md">Blurred backdrop</div>
+ * <div class="backdrop-blur-lg@md">Blurred backdrop on medium screens and up</div>
+ */
+
+// Blur values
+$backdrop-blur-values: (
+  'none': 0,
+  'sm': 4px,
+  'md': 8px,
+  'lg': 12px,
+  'xl': 24px,
+  '2xl': 40px,
+);
+
+// Brightness values 
+$backdrop-brightness-values: (
+  'none': 100%,
+  '75': 75%,
+  '90': 90%,
+  '110': 110%,
+  '125': 125%,
+  '150': 150%,
+);
+
+// Contrast values
+$backdrop-contrast-values: (
+  'none': 100%,
+  '75': 75%,
+  '90': 90%,
+  '110': 110%,
+  '125': 125%,
+  '150': 150%,
+);
+
+// Grayscale values
+$backdrop-grayscale-values: (
+  'none': 0,
+  '25': 25%,
+  '50': 50%,
+  '75': 75%,
+  '100': 100%,
+);
+
+// Saturate values
+$backdrop-saturate-values: (
+  'none': 100%,
+  '50': 50%,
+  '75': 75%,
+  '125': 125%,
+  '150': 150%,
+  '200': 200%,
+);
+
+// Sepia values
+$backdrop-sepia-values: (
+  'none': 0,
+  '25': 25%,
+  '50': 50%,
+  '75': 75%,
+  '100': 100%,
+);
+
+// Hue-rotate values
+$backdrop-hue-rotate-values: (
+  '0': 0deg,
+  '90': 90deg,
+  '180': 180deg,
+  '270': 270deg,
+);
+
+// Invert values
+$backdrop-invert-values: (
+  'none': 0,
+  '25': 25%,
+  '50': 50%,
+  '75': 75%,
+  '100': 100%,
+);
+
+// Common backdrop-filter presets
+$backdrop-filter-presets: (
+  'frosted': blur(8px) saturate(90%) brightness(120%),
+  'glass': blur(8px) saturate(120%) contrast(90%),
+  'dark-glass': blur(8px) saturate(180%) brightness(70%) contrast(90%),
+  'crystal': blur(8px) saturate(150%),
+  'matte': blur(20px) saturate(90%) brightness(90%),
+);
+
+// Base backdrop-filter
+@mixin backdrop-filter($value) {
+  backdrop-filter: $value;
+}
+
+// Specific filter mixins
+@mixin backdrop-blur($value) {
+  @if map.has-key($backdrop-blur-values, $value) {
+    @include backdrop-filter(blur(map.get($backdrop-blur-values, $value)));
+  } @else {
+    @include backdrop-filter(blur($value));
+  }
+}
+
+@mixin backdrop-brightness($value) {
+  @if map.has-key($backdrop-brightness-values, $value) {
+    @include backdrop-filter(brightness(map.get($backdrop-brightness-values, $value)));
+  } @else {
+    @include backdrop-filter(brightness($value));
+  }
+}
+
+@mixin backdrop-contrast($value) {
+  @if map.has-key($backdrop-contrast-values, $value) {
+    @include backdrop-filter(contrast(map.get($backdrop-contrast-values, $value)));
+  } @else {
+    @include backdrop-filter(contrast($value));
+  }
+}
+
+@mixin backdrop-grayscale($value) {
+  @if map.has-key($backdrop-grayscale-values, $value) {
+    @include backdrop-filter(grayscale(map.get($backdrop-grayscale-values, $value)));
+  } @else {
+    @include backdrop-filter(grayscale($value));
+  }
+}
+
+@mixin backdrop-hue-rotate($value) {
+  @if map.has-key($backdrop-hue-rotate-values, $value) {
+    @include backdrop-filter(hue-rotate(map.get($backdrop-hue-rotate-values, $value)));
+  } @else {
+    @include backdrop-filter(hue-rotate($value));
+  }
+}
+
+@mixin backdrop-invert($value) {
+  @if map.has-key($backdrop-invert-values, $value) {
+    @include backdrop-filter(invert(map.get($backdrop-invert-values, $value)));
+  } @else {
+    @include backdrop-filter(invert($value));
+  }
+}
+
+@mixin backdrop-saturate($value) {
+  @if map.has-key($backdrop-saturate-values, $value) {
+    @include backdrop-filter(saturate(map.get($backdrop-saturate-values, $value)));
+  } @else {
+    @include backdrop-filter(saturate($value));
+  }
+}
+
+@mixin backdrop-sepia($value) {
+  @if map.has-key($backdrop-sepia-values, $value) {
+    @include backdrop-filter(sepia(map.get($backdrop-sepia-values, $value)));
+  } @else {
+    @include backdrop-filter(sepia($value));
+  }
+}
+
+// Preset backdrop effects
+@mixin backdrop-frosted {
+  @include backdrop-filter(map.get($backdrop-filter-presets, 'frosted'));
+}
+
+@mixin backdrop-glass {
+  @include backdrop-filter(map.get($backdrop-filter-presets, 'glass'));
+}
+
+@mixin backdrop-dark-glass {
+  @include backdrop-filter(map.get($backdrop-filter-presets, 'dark-glass'));
+}
+
+@mixin backdrop-crystal {
+  @include backdrop-filter(map.get($backdrop-filter-presets, 'crystal'));
+}
+
+@mixin backdrop-matte {
+  @include backdrop-filter(map.get($backdrop-filter-presets, 'matte'));
+}
+
+// Reset filter
+@mixin backdrop-none {
+  backdrop-filter: none;
+}
+
+// Generate utility classes
+@mixin generate-backdrop-filter-utilities($breakpoint: null) {
+  $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+  
+  // Basic backdrop utilities
+  .backdrop-none#{$suffix} { @include backdrop-none; }
+  
+  // Blur utilities
+  @each $key, $value in $backdrop-blur-values {
+    .backdrop-blur-#{$key}#{$suffix} { @include backdrop-blur($key); }
+  }
+  
+  // Brightness utilities
+  @each $key, $value in $backdrop-brightness-values {
+    .backdrop-brightness-#{$key}#{$suffix} { @include backdrop-brightness($key); }
+  }
+  
+  // Contrast utilities
+  @each $key, $value in $backdrop-contrast-values {
+    .backdrop-contrast-#{$key}#{$suffix} { @include backdrop-contrast($key); }
+  }
+  
+  // Grayscale utilities
+  @each $key, $value in $backdrop-grayscale-values {
+    .backdrop-grayscale-#{$key}#{$suffix} { @include backdrop-grayscale($key); }
+  }
+  
+  // Saturate utilities
+  @each $key, $value in $backdrop-saturate-values {
+    .backdrop-saturate-#{$key}#{$suffix} { @include backdrop-saturate($key); }
+  }
+  
+  // Sepia utilities
+  @each $key, $value in $backdrop-sepia-values {
+    .backdrop-sepia-#{$key}#{$suffix} { @include backdrop-sepia($key); }
+  }
+  
+  // Hue-rotate utilities
+  @each $key, $value in $backdrop-hue-rotate-values {
+    .backdrop-hue-#{$key}#{$suffix} { @include backdrop-hue-rotate($key); }
+  }
+  
+  // Invert utilities
+  @each $key, $value in $backdrop-invert-values {
+    .backdrop-invert-#{$key}#{$suffix} { @include backdrop-invert($key); }
+  }
+  
+  // Preset utilities
+  .backdrop-frosted#{$suffix} { @include backdrop-frosted; }
+  .backdrop-glass#{$suffix} { @include backdrop-glass; }
+  .backdrop-dark-glass#{$suffix} { @include backdrop-dark-glass; }
+  .backdrop-crystal#{$suffix} { @include backdrop-crystal; }
+  .backdrop-matte#{$suffix} { @include backdrop-matte; }
+}
+
+@if $generate-utility-classes {
+  // Generate base utilities
+  @include generate-backdrop-filter-utilities;
+  
+  // Generate responsive variants
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      @include generate-backdrop-filter-utilities($breakpoint);
+    }
+  }
+}
+
+// Update your mixins-map.scss to include these mixins:
+// @else if str.index($ms, 'backdrop-blur(') == 1 {
+//   $param1: list.nth($params, 1);
+//   @include backdrop-blur($param1);
+// }
+// Add similar entries for all other backdrop filter mixins