@nuvoui/core 1.2.5 → 1.2.7

package/src/styles/utilities/_animations.scss

@@ -1,15 +1,16 @@
 @use "sass:list";
-
+@use "sass:math";
 @use "sass:map";
+
 @use "../abstracts/functions" as *;
-@use "../abstracts" as VAR;
+@use "../abstracts/config" as VAR;
 
 $generated-keyframes: ();
 
 @mixin ensure-keyframes($name) {
   @if not list.index($generated-keyframes, $name) {
     $generated-keyframes: list.append($generated-keyframes, $name) !global;
-    
+
     @keyframes #{$name} {
       @content;
     }
@@ -21,7 +22,7 @@ $generated-keyframes: ();
  * @description Creates a bouncing animation
  * @param {Map} $props - Animation properties
  */
- @mixin animate-bounce($props: ()) {
+@mixin animate-bounce($props: ()) {
   $defaults: (
     vertical: 0.5rem,
     horizontal: 0,
@@ -39,38 +40,37 @@ $generated-keyframes: ();
   $iteration: map.get($props, "iteration");
 
   // Handle units
-  $x-unit: if($x, safe-unit-name(get-unit($x)), "-");
-  $y-unit: if($y, safe-unit-name(get-unit($y)), "-");
- 
+  $x-unit: if($x, safe-unit-name(math.unit($x)), "-");
+  $y-unit: if($y, safe-unit-name(math.unit($y)), "-");
+
   // 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-name: anim-bounce-#{$clean-x}#{$x-unit}-#{$clean-y}#{$y-unit};
 
   // Apply the animation
   animation: #{$animation-name} $duration $easing $iteration;
 
   // Generate keyframes with ensure-keyframes pattern
   @include ensure-keyframes($animation-name) {
-    0%, 100% {
+    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 {
   transition-property: all;
   transition-duration: 0.2s;
-  transition-timing-function: ease-in-out; 
+  transition-timing-function: ease-in-out;
 }
 
 /**
@@ -78,7 +78,7 @@ $generated-keyframes: ();
  * @description Creates a pulsing opacity animation
  * @param {Map} $props - Animation properties
  */
- @mixin animate-pulse($props: ()) {
+@mixin animate-pulse($props: ()) {
   $defaults: (
     min-opacity: 0.5,
     max-opacity: 1,
@@ -100,19 +100,23 @@ $generated-keyframes: ();
   animation: #{$animation-name} $duration $timing $iteration;
 
   @include ensure-keyframes($animation-name) {
-    0%, 100% { opacity: $max-opacity; }
-    50% { opacity: $min-opacity; }
-  }
+    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: ()) {
+@mixin animate-spin($props: ()) {
   $defaults: (
     direction: normal,
     duration: 1s,
@@ -132,17 +136,18 @@ $generated-keyframes: ();
   animation: #{$animation-name} $duration $timing $iteration;
 
   @include ensure-keyframes($animation-name) {
-    from { transform: rotate(0deg); }
+    from {
+      transform: rotate(0deg);
+    }
 
-    to { 
-      @if $direction == 'normal' {
-        transform: rotate(360deg); 
+    to {
+      @if $direction == "normal" {
+        transform: rotate(360deg);
       } @else {
-        transform: rotate(-360deg); 
+        transform: rotate(-360deg);
       }
     }
   }
-
 }
 
 /**
@@ -150,7 +155,7 @@ $generated-keyframes: ();
  * @description Creates a ping animation (scale + fade)
  * @param {Map} $props - Animation properties
  */
- @mixin animate-ping($props: ()) {
+@mixin animate-ping($props: ()) {
   $defaults: (
     scale: 2,
     duration: 1s,
@@ -170,12 +175,12 @@ $generated-keyframes: ();
   animation: #{$animation-name} $duration $timing $iteration;
 
   @include ensure-keyframes($animation-name) {
-    75%, 100% { 
+    75%,
+    100% {
       transform: scale($scale);
       opacity: 0;
     }
   }
-
 }
 
 /**
@@ -183,7 +188,7 @@ $generated-keyframes: ();
  * @description Creates fade in/out animation
  * @param {Map} $props - Animation properties
  */
- @mixin animate-fade($props: ()) {
+@mixin animate-fade($props: ()) {
   $defaults: (
     type: in,
     duration: 0.5s,
@@ -203,35 +208,44 @@ $generated-keyframes: ();
   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; 
+    @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; 
+      to {
+        opacity: 1;
         transform: translateY(0);
       }
-    } @else if $type == 'in-down' {
-      from { 
-        opacity: 0; 
+    } @else if $type == "in-down" {
+      from {
+        opacity: 0;
         transform: translateY(-20px);
       }
 
-      to { 
-        opacity: 1; 
+      to {
+        opacity: 1;
         transform: translateY(0);
       }
     }
   }
-
 }
 
 /**
@@ -239,7 +253,7 @@ $generated-keyframes: ();
  * @description Creates a shake animation
  * @param {Map} $props - Animation properties
  */
- @mixin animate-shake($props: ()) {
+@mixin animate-shake($props: ()) {
   $defaults: (
     intensity: 5px,
     duration: 0.5s,
@@ -260,87 +274,133 @@ $generated-keyframes: ();
   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); }
-  }
+    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 {
-   // Add to your existing animation utilities
-  
-   .animate-pulse {
+  // Add to your existing animation utilities
+
+  #{VAR.$parent-selector} .animate-pulse {
     @include animate-pulse;
   }
-  
-  .animate-spin {
+
+  #{VAR.$parent-selector} .animate-spin {
     @include animate-spin;
   }
-  
-  .animate-ping {
+
+  #{VAR.$parent-selector} .animate-ping {
     @include animate-ping;
   }
-  
-  .animate-fade-in {
-    @include animate-fade((type: in));
+
+  #{VAR.$parent-selector} .animate-fade-in {
+    @include animate-fade(
+      (
+        type: in,
+      )
+    );
   }
-  
-  .animate-fade-out {
-    @include animate-fade((type: out));
+
+  #{VAR.$parent-selector} .animate-fade-out {
+    @include animate-fade(
+      (
+        type: out,
+      )
+    );
   }
-  
-  .animate-fade-in-up {
-    @include animate-fade((type: in-up));
+
+  #{VAR.$parent-selector} .animate-fade-in-up {
+    @include animate-fade(
+      (
+        type: in-up,
+      )
+    );
   }
-  
-  .animate-fade-in-down {
-    @include animate-fade((type: in-down));
+
+  #{VAR.$parent-selector} .animate-fade-in-down {
+    @include animate-fade(
+      (
+        type: in-down,
+      )
+    );
   }
-  
-  .animate-shake {
+
+  #{VAR.$parent-selector} .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;
-        }
+      #{VAR.$parent-selector} .animate-pulse\@#{$breakpoint} {
+        @include animate-pulse;
+      }
+
+      #{VAR.$parent-selector} .animate-spin\@#{$breakpoint} {
+        @include animate-spin;
+      }
+
+      #{VAR.$parent-selector} .animate-ping\@#{$breakpoint} {
+        @include animate-ping;
+      }
+
+      #{VAR.$parent-selector} .animate-fade-in\@#{$breakpoint} {
+        @include animate-fade(
+          (
+            type: in,
+          )
+        );
+      }
+
+      #{VAR.$parent-selector} .animate-fade-out\@#{$breakpoint} {
+        @include animate-fade(
+          (
+            type: out,
+          )
+        );
+      }
+
+      #{VAR.$parent-selector} .animate-fade-in-up\@#{$breakpoint} {
+        @include animate-fade(
+          (
+            type: in-up,
+          )
+        );
+      }
+
+      #{VAR.$parent-selector} .animate-fade-in-down\@#{$breakpoint} {
+        @include animate-fade(
+          (
+            type: in-down,
+          )
+        );
+      }
+
+      #{VAR.$parent-selector} .animate-shake\@#{$breakpoint} {
+        @include animate-shake;
+      }
     }
   }
 
-  .hover-ready{
+  #{VAR.$parent-selector} .hover-ready {
     @include hover-ready;
   }
 }