@nuvoui/core 1.3.5 → 1.4.0

package/src/styles/utilities/_transforms.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../functions/feature-flags" as fn-flags;
 
 // Transform Utilities
 // - Translate (X, Y, Z)
@@ -11,319 +12,319 @@
 
 // Common transform function to avoid repetition
 @mixin apply-transform {
-  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
 }
 
 // Translation mixins
 @mixin translate-x($value) {
-  // Store the value in a CSS variable
-  --translate-x: #{$value};
-  @include apply-transform;
+    // Store the value in a CSS variable
+    --translate-x: #{$value};
+    @include apply-transform;
 }
 
 @mixin translate-y($value) {
-  // Store the value in a CSS variable
-  --translate-y: #{$value};
-  @include apply-transform;
+    // Store the value in a CSS variable
+    --translate-y: #{$value};
+    @include apply-transform;
 }
 
 @mixin translate-z($value) {
-  // Store the value in a CSS variable
-  --translate-z: #{$value};
-  @include apply-transform;
+    // Store the value in a CSS variable
+    --translate-z: #{$value};
+    @include apply-transform;
 }
 
 @mixin translate($x, $y: null) {
-  // Always set the x value
-  --translate-x: #{$x};
+    // Always set the x value
+    --translate-x: #{$x};
 
-  // Only set y if provided
-  @if $y {
-    --translate-y: #{$y};
-  }
+    // Only set y if provided
+    @if $y {
+        --translate-y: #{$y};
+    }
 
-  @include apply-transform;
+    @include apply-transform;
 }
 
 // Scale mixins
 @mixin scale-x($value) {
-  --scale-x: #{$value};
-  @include apply-transform;
+    --scale-x: #{$value};
+    @include apply-transform;
 }
 
 @mixin scale-y($value) {
-  --scale-y: #{$value};
-  @include apply-transform;
+    --scale-y: #{$value};
+    @include apply-transform;
 }
 
 @mixin scale($value) {
-  --scale-x: #{$value};
-  --scale-y: #{$value};
-  @include apply-transform;
+    --scale-x: #{$value};
+    --scale-y: #{$value};
+    @include apply-transform;
 }
 
 // Rotation mixins
 @mixin rotate($value) {
-  --rotate: #{$value};
-  @include apply-transform;
+    --rotate: #{$value};
+    @include apply-transform;
 }
 
 // Skew mixins
 @mixin skew-x($value) {
-  --skew-x: #{$value};
-  @include apply-transform;
+    --skew-x: #{$value};
+    @include apply-transform;
 }
 
 @mixin skew-y($value) {
-  --skew-y: #{$value};
-  @include apply-transform;
+    --skew-y: #{$value};
+    @include apply-transform;
 }
 
 // Transform origin
 @mixin origin($value) {
-  transform-origin: $value;
+    transform-origin: $value;
 }
 
 // Common transform values
 $translate-values: (
-  "0": 0,
-  "1": 0.25rem,
-  "2": 0.5rem,
-  "3": 0.75rem,
-  "4": 1rem,
-  "5": 1.25rem,
-  "6": 1.5rem,
-  "8": 2rem,
-  "10": 2.5rem,
-  "12": 3rem,
-  "16": 4rem,
-  "20": 5rem,
-  "25p": 25%,
-  "33p": 33.333%,
-  "50p": 50%,
-  "66p": 66.667%,
-  "75p": 75%,
-  "100p": 100%,
+    "0": 0,
+    "1": 0.25rem,
+    "2": 0.5rem,
+    "3": 0.75rem,
+    "4": 1rem,
+    "5": 1.25rem,
+    "6": 1.5rem,
+    "8": 2rem,
+    "10": 2.5rem,
+    "12": 3rem,
+    "16": 4rem,
+    "20": 5rem,
+    "25p": 25%,
+    "33p": 33.333%,
+    "50p": 50%,
+    "66p": 66.667%,
+    "75p": 75%,
+    "100p": 100%,
 );
 
 $negative-translate-values: (
-  "1": -0.25rem,
-  "2": -0.5rem,
-  "3": -0.75rem,
-  "4": -1rem,
-  "5": -1.25rem,
-  "6": -1.5rem,
-  "8": -2rem,
-  "10": -2.5rem,
-  "12": -3rem,
-  "16": -4rem,
-  "20": -5rem,
-  "25p": -25%,
-  "33p": -33.333%,
-  "50p": -50%,
-  "66p": -66.667%,
-  "75p": -75%,
-  "100p": -100%,
+    "1": -0.25rem,
+    "2": -0.5rem,
+    "3": -0.75rem,
+    "4": -1rem,
+    "5": -1.25rem,
+    "6": -1.5rem,
+    "8": -2rem,
+    "10": -2.5rem,
+    "12": -3rem,
+    "16": -4rem,
+    "20": -5rem,
+    "25p": -25%,
+    "33p": -33.333%,
+    "50p": -50%,
+    "66p": -66.667%,
+    "75p": -75%,
+    "100p": -100%,
 );
 
 // Scale hover utilities
 $scale-values: (
-  "0": 0,
-  "50": 0.5,
-  "75": 0.75,
-  "90": 0.9,
-  "95": 0.95,
-  "100": 1,
-  "105": 1.05,
-  "110": 1.1,
-  "125": 1.25,
-  "150": 1.5,
+    "0": 0,
+    "50": 0.5,
+    "75": 0.75,
+    "90": 0.9,
+    "95": 0.95,
+    "100": 1,
+    "105": 1.05,
+    "110": 1.1,
+    "125": 1.25,
+    "150": 1.5,
 );
 
 // Rotation hover utilities
 $rotation-values: (
-  "0": 0deg,
-  "45": 45deg,
-  "90": 90deg,
-  "180": 180deg,
-  "270": 270deg,
+    "0": 0deg,
+    "45": 45deg,
+    "90": 90deg,
+    "180": 180deg,
+    "270": 270deg,
 );
 
 // Separate map for negative rotations
 $negative-rotation-values: (
-  "45": -45deg,
-  "90": -90deg,
-  "180": -180deg,
-  "270": -270deg,
+    "45": -45deg,
+    "90": -90deg,
+    "180": -180deg,
+    "270": -270deg,
 );
 
 // Origin hover utilities
 $origin-values: (
-  "center": center,
-  "top": top,
-  "top-right": top right,
-  "right": right,
-  "bottom-right": bottom right,
-  "bottom": bottom,
-  "bottom-left": bottom left,
-  "left": left,
-  "top-left": top left,
+    "center": center,
+    "top": top,
+    "top-right": top right,
+    "right": right,
+    "bottom-right": bottom right,
+    "bottom": bottom,
+    "bottom-left": bottom left,
+    "left": left,
+    "top-left": top left,
 );
 
 // Generate utility classes
-@if FN.feature-enabled("transforms") {
-  // Translate utilities
-  @each $key, $value in $translate-values {
-    #{VAR.$parent-selector} .translate-x-#{$key},
-    #{VAR.$parent-selector} .hover\:translate-x-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:translate-x-#{$key} {
-      @include translate-x($value);
-    }
-
-    #{VAR.$parent-selector} .translate-y-#{$key},
-    #{VAR.$parent-selector} .hover\:translate-y-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:translate-y-#{$key} {
-      @include translate-y($value);
-    }
-  }
-  @each $key, $value in $negative-translate-values {
-    #{VAR.$parent-selector} .-translate-x-#{$key},
-    #{VAR.$parent-selector} .hover\:-translate-x-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:-translate-x-#{$key} {
-      @include translate-x($value);
-    }
-
-    #{VAR.$parent-selector} .-translate-y-#{$key},
-    #{VAR.$parent-selector} .hover\:-translate-y-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key} {
-      @include translate-y($value);
-    }
-  }
+@if fn-flags.feature-enabled("transforms") {
+    // Translate utilities
+    @each $key, $value in $translate-values {
+        #{config-flags.$parent-selector} .translate-x-#{$key},
+        #{config-flags.$parent-selector} .hover\:translate-x-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:translate-x-#{$key} {
+            @include translate-x($value);
+        }
 
-  @each $key, $value in $scale-values {
-    #{VAR.$parent-selector} .scale-#{$key},
-    #{VAR.$parent-selector} .hover\:scale-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:scale-#{$key} {
-      @include scale($value);
+        #{config-flags.$parent-selector} .translate-y-#{$key},
+        #{config-flags.$parent-selector} .hover\:translate-y-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:translate-y-#{$key} {
+            @include translate-y($value);
+        }
     }
+    @each $key, $value in $negative-translate-values {
+        #{config-flags.$parent-selector} .-translate-x-#{$key},
+        #{config-flags.$parent-selector} .hover\:-translate-x-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:-translate-x-#{$key} {
+            @include translate-x($value);
+        }
 
-    #{VAR.$parent-selector} .scale-x-#{$key},
-    #{VAR.$parent-selector} .hover\:scale-x-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:scale-x-#{$key} {
-      @include scale-x($value);
+        #{config-flags.$parent-selector} .-translate-y-#{$key},
+        #{config-flags.$parent-selector} .hover\:-translate-y-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key} {
+            @include translate-y($value);
+        }
     }
 
-    #{VAR.$parent-selector} .scale-y-#{$key},
-    #{VAR.$parent-selector} .hover\:scale-y-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:scale-y-#{$key} {
-      @include scale-y($value);
-    }
-  }
-
-  // Rotation utilities
-  @each $key, $value in $rotation-values {
-    #{VAR.$parent-selector} .rotate-#{$key},
-    #{VAR.$parent-selector} .hover\:rotate-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:rotate-#{$key} {
-      @include rotate($value);
-    }
-  }
-
-  // Negative rotation utilities
-  @each $key, $value in $negative-rotation-values {
-    #{VAR.$parent-selector} .-rotate-#{$key},
-    #{VAR.$parent-selector} .hover\:-rotate-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:-rotate-#{$key} {
-      @include rotate($value);
-    }
-  }
-
-  // Origin utilities
-  @each $key, $value in $origin-values {
-    #{VAR.$parent-selector} .origin-#{$key},
-    #{VAR.$parent-selector} .hover\:origin-#{$key}:hover,
-    #{VAR.$parent-selector} .group:hover .group-hover\:origin-#{$key} {
-      @include origin($value);
-    }
-  }
-
-  // Responsive variants
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      @each $key, $value in $translate-values {
-        #{VAR.$parent-selector} .translate-x-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:translate-x-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:translate-x-#{$key}\@#{$breakpoint} {
-          @include translate-x($value);
+    @each $key, $value in $scale-values {
+        #{config-flags.$parent-selector} .scale-#{$key},
+        #{config-flags.$parent-selector} .hover\:scale-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:scale-#{$key} {
+            @include scale($value);
         }
 
-        #{VAR.$parent-selector} .translate-y-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:translate-y-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:translate-y-#{$key}\@#{$breakpoint} {
-          @include translate-y($value);
-        }
-      }
-      @each $key, $value in $negative-translate-values {
-        #{VAR.$parent-selector} .-translate-x-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:-translate-x-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:-translate-x-#{$key}\@#{$breakpoint} {
-          @include translate-x($value);
+        #{config-flags.$parent-selector} .scale-x-#{$key},
+        #{config-flags.$parent-selector} .hover\:scale-x-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:scale-x-#{$key} {
+            @include scale-x($value);
         }
 
-        #{VAR.$parent-selector} .-translate-y-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:-translate-y-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key}\@#{$breakpoint} {
-          @include translate-y($value);
-        }
-      }
-
-      // Scale hover responsive
-      @each $key, $value in $scale-values {
-        #{VAR.$parent-selector} .scale-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:scale-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:scale-#{$key}\@#{$breakpoint} {
-          @include scale($value);
+        #{config-flags.$parent-selector} .scale-y-#{$key},
+        #{config-flags.$parent-selector} .hover\:scale-y-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:scale-y-#{$key} {
+            @include scale-y($value);
         }
+    }
 
-        #{VAR.$parent-selector} .scale-x-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:scale-x-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:scale-x-#{$key}\@#{$breakpoint} {
-          @include scale-x($value);
+    // Rotation utilities
+    @each $key, $value in $rotation-values {
+        #{config-flags.$parent-selector} .rotate-#{$key},
+        #{config-flags.$parent-selector} .hover\:rotate-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:rotate-#{$key} {
+            @include rotate($value);
         }
+    }
 
-        #{VAR.$parent-selector} .scale-y-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:scale-y-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:scale-y-#{$key}\@#{$breakpoint} {
-          @include scale-y($value);
-        }
-      }
-
-      // Rotation hover responsive
-      @each $key, $value in $rotation-values {
-        #{VAR.$parent-selector} .rotate-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:rotate-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:rotate-#{$key}\@#{$breakpoint} {
-          @include rotate($value);
+    // Negative rotation utilities
+    @each $key, $value in $negative-rotation-values {
+        #{config-flags.$parent-selector} .-rotate-#{$key},
+        #{config-flags.$parent-selector} .hover\:-rotate-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:-rotate-#{$key} {
+            @include rotate($value);
         }
-      }
-
-      // Negative rotation utilities
-      @each $key, $value in $negative-rotation-values {
-        #{VAR.$parent-selector} .-rotate-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:-rotate-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:-rotate-#{$key}\@#{$breakpoint} {
-          @include rotate($value);
+    }
+
+    // Origin utilities
+    @each $key, $value in $origin-values {
+        #{config-flags.$parent-selector} .origin-#{$key},
+        #{config-flags.$parent-selector} .hover\:origin-#{$key}:hover,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:origin-#{$key} {
+            @include origin($value);
         }
-      }
-
-      // Add missing origin responsive variants
-      @each $key, $value in $origin-values {
-        #{VAR.$parent-selector} .origin-#{$key}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:origin-#{$key}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .group:hover .group-hover\:origin-#{$key}\@#{$breakpoint} {
-          @include origin($value);
+    }
+
+    // Responsive variants
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            @each $key, $value in $translate-values {
+                #{config-flags.$parent-selector} .translate-x-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:translate-x-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:translate-x-#{$key}\@#{$breakpoint} {
+                    @include translate-x($value);
+                }
+
+                #{config-flags.$parent-selector} .translate-y-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:translate-y-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:translate-y-#{$key}\@#{$breakpoint} {
+                    @include translate-y($value);
+                }
+            }
+            @each $key, $value in $negative-translate-values {
+                #{config-flags.$parent-selector} .-translate-x-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:-translate-x-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:-translate-x-#{$key}\@#{$breakpoint} {
+                    @include translate-x($value);
+                }
+
+                #{config-flags.$parent-selector} .-translate-y-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:-translate-y-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key}\@#{$breakpoint} {
+                    @include translate-y($value);
+                }
+            }
+
+            // Scale hover responsive
+            @each $key, $value in $scale-values {
+                #{config-flags.$parent-selector} .scale-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:scale-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:scale-#{$key}\@#{$breakpoint} {
+                    @include scale($value);
+                }
+
+                #{config-flags.$parent-selector} .scale-x-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:scale-x-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:scale-x-#{$key}\@#{$breakpoint} {
+                    @include scale-x($value);
+                }
+
+                #{config-flags.$parent-selector} .scale-y-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:scale-y-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:scale-y-#{$key}\@#{$breakpoint} {
+                    @include scale-y($value);
+                }
+            }
+
+            // Rotation hover responsive
+            @each $key, $value in $rotation-values {
+                #{config-flags.$parent-selector} .rotate-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:rotate-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:rotate-#{$key}\@#{$breakpoint} {
+                    @include rotate($value);
+                }
+            }
+
+            // Negative rotation utilities
+            @each $key, $value in $negative-rotation-values {
+                #{config-flags.$parent-selector} .-rotate-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:-rotate-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:-rotate-#{$key}\@#{$breakpoint} {
+                    @include rotate($value);
+                }
+            }
+
+            // Add missing origin responsive variants
+            @each $key, $value in $origin-values {
+                #{config-flags.$parent-selector} .origin-#{$key}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:origin-#{$key}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:origin-#{$key}\@#{$breakpoint} {
+                    @include origin($value);
+                }
+            }
         }
-      }
     }
-  }
 }