@nuvoui/core 1.3.5 → 1.4.1

package/src/styles/utilities/_animations.scss

@@ -2,393 +2,394 @@
 @use "sass:math";
 @use "sass:map";
 
-@use "../abstracts/functions" as FN;
-@use "../abstracts/config" as VAR;
-
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../functions/feature-flags" as fn-flags;
+@use "../functions/units" as fn-units;
 $generated-keyframes: ();
 
 @mixin ensure-keyframes($name) {
-  @if not list.index($generated-keyframes, $name) {
-    $generated-keyframes: list.append($generated-keyframes, $name) !global;
+    @if not list.index($generated-keyframes, $name) {
+        $generated-keyframes: list.append($generated-keyframes, $name) !global;
 
-    @keyframes #{$name} {
-      @content;
+        @keyframes #{$name} {
+            @content;
+        }
     }
-  }
 }
 
 // @mixin animate-bounce
 // @description Creates a bouncing animation
 // @param {Map} $props - Animation properties
 @mixin animate-bounce($props: ()) {
-  $defaults: (
-    vertical: 0.5rem,
-    horizontal: 0,
-    duration: 1s,
-    timing: ease-in-out,
-    iteration: infinite,
-  );
-
-  // Merge with defaults
-  $props: map.merge($defaults, $props);
-  $x: map.get($props, "horizontal");
-  $y: map.get($props, "vertical");
-  $duration: map.get($props, "duration");
-  $easing: map.get($props, "timing");
-  $iteration: map.get($props, "iteration");
-
-  // Handle units
-  $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};
-
-  // Apply the animation
-  animation: #{$animation-name} $duration $easing $iteration;
-
-  // 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);
-    }
+    $defaults: (
+        vertical: 0.5rem,
+        horizontal: 0,
+        duration: 1s,
+        timing: ease-in-out,
+        iteration: infinite,
+    );
 
-    50% {
-      transform: translate($x, $y);
-      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    // Merge with defaults
+    $props: map.merge($defaults, $props);
+    $x: map.get($props, "horizontal");
+    $y: map.get($props, "vertical");
+    $duration: map.get($props, "duration");
+    $easing: map.get($props, "timing");
+    $iteration: map.get($props, "iteration");
+
+    // Handle units
+    $x-unit: if($x, fn-units.safe-unit-name(math.unit($x)), "-");
+    $y-unit: if($y, fn-units.safe-unit-name(math.unit($y)), "-");
+
+    // Clean values (remove units)
+    $clean-x: if($x, fn-units.strip-unit($x), 0);
+    $clean-y: if($y, fn-units.strip-unit($y), 0);
+
+    $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% {
+            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-property: all;
+    transition-duration: 0.2s;
+    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;
-    }
+    $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");
 
-    50% {
-      opacity: $min-opacity;
+    $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);
-    }
+    $defaults: (
+        direction: normal,
+        duration: 1s,
+        timing: linear,
+        iteration: infinite,
+    );
 
-    to {
-      @if $direction == "normal" {
-        transform: rotate(360deg);
-      } @else {
-        transform: rotate(-360deg);
-      }
+    // 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;
+    $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);
-      }
+    $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);
-    }
+    $defaults: (
+        intensity: 5px,
+        duration: 0.5s,
+        timing: ease-in-out,
+        iteration: 1,
+    );
 
-    20%,
-    40%,
-    60%,
-    80% {
-      transform: translateX($intensity);
+    // 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: fn-units.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 FN.feature-enabled("animations") {
-  // Add to your existing animation utilities
+@if fn-flags.feature-enabled("animations") {
+    // Add to your existing animation utilities
 
-  #{VAR.$parent-selector} .animate-pulse {
-    @include animate-pulse;
-  }
-
-  #{VAR.$parent-selector} .animate-spin {
-    @include animate-spin;
-  }
-
-  #{VAR.$parent-selector} .animate-ping {
-    @include animate-ping;
-  }
-
-  #{VAR.$parent-selector} .animate-fade-in {
-    @include animate-fade(
-      (
-        type: in,
-      )
-    );
-  }
-
-  #{VAR.$parent-selector} .animate-fade-out {
-    @include animate-fade(
-      (
-        type: out,
-      )
-    );
-  }
-
-  #{VAR.$parent-selector} .animate-fade-in-up {
-    @include animate-fade(
-      (
-        type: in-up,
-      )
-    );
-  }
-
-  #{VAR.$parent-selector} .animate-fade-in-down {
-    @include animate-fade(
-      (
-        type: in-down,
-      )
-    );
-  }
-
-  #{VAR.$parent-selector} .animate-shake {
-    @include animate-shake;
-  }
-
-  // Add responsive variants if needed
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      #{VAR.$parent-selector} .animate-pulse\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-pulse {
         @include animate-pulse;
-      }
+    }
 
-      #{VAR.$parent-selector} .animate-spin\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-spin {
         @include animate-spin;
-      }
+    }
 
-      #{VAR.$parent-selector} .animate-ping\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-ping {
         @include animate-ping;
-      }
+    }
 
-      #{VAR.$parent-selector} .animate-fade-in\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-fade-in {
         @include animate-fade(
-          (
-            type: in,
-          )
+            (
+                type: in,
+            )
         );
-      }
+    }
 
-      #{VAR.$parent-selector} .animate-fade-out\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-fade-out {
         @include animate-fade(
-          (
-            type: out,
-          )
+            (
+                type: out,
+            )
         );
-      }
+    }
 
-      #{VAR.$parent-selector} .animate-fade-in-up\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-fade-in-up {
         @include animate-fade(
-          (
-            type: in-up,
-          )
+            (
+                type: in-up,
+            )
         );
-      }
+    }
 
-      #{VAR.$parent-selector} .animate-fade-in-down\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-fade-in-down {
         @include animate-fade(
-          (
-            type: in-down,
-          )
+            (
+                type: in-down,
+            )
         );
-      }
+    }
 
-      #{VAR.$parent-selector} .animate-shake\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .animate-shake {
         @include animate-shake;
-      }
     }
-  }
 
-  #{VAR.$parent-selector} .hover-ready {
-    @include hover-ready;
-  }
+    // Add responsive variants if needed
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            #{config-flags.$parent-selector} .animate-pulse\@#{$breakpoint} {
+                @include animate-pulse;
+            }
+
+            #{config-flags.$parent-selector} .animate-spin\@#{$breakpoint} {
+                @include animate-spin;
+            }
+
+            #{config-flags.$parent-selector} .animate-ping\@#{$breakpoint} {
+                @include animate-ping;
+            }
+
+            #{config-flags.$parent-selector} .animate-fade-in\@#{$breakpoint} {
+                @include animate-fade(
+                    (
+                        type: in,
+                    )
+                );
+            }
+
+            #{config-flags.$parent-selector} .animate-fade-out\@#{$breakpoint} {
+                @include animate-fade(
+                    (
+                        type: out,
+                    )
+                );
+            }
+
+            #{config-flags.$parent-selector} .animate-fade-in-up\@#{$breakpoint} {
+                @include animate-fade(
+                    (
+                        type: in-up,
+                    )
+                );
+            }
+
+            #{config-flags.$parent-selector} .animate-fade-in-down\@#{$breakpoint} {
+                @include animate-fade(
+                    (
+                        type: in-down,
+                    )
+                );
+            }
+
+            #{config-flags.$parent-selector} .animate-shake\@#{$breakpoint} {
+                @include animate-shake;
+            }
+        }
+    }
+
+    #{config-flags.$parent-selector} .hover-ready {
+        @include hover-ready;
+    }
 }