@nuvoui/core 1.2.4 → 1.2.5

package/src/styles/utilities/_transforms.scss

@@ -11,100 +11,89 @@
  * - Transform origin
  */
 
+ // 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));
+}
+
+
 // Translation mixins
 @mixin translate-x($value) {
-  & {
-    --translate-x: #{$value};
-
-    transform: translateX(var(--translate-x)) 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));
-  }
+  // Store the value in a CSS variable
+  --translate-x: #{$value};
+  @include apply-transform;
 }
 
 @mixin translate-y($value) {
-  & {
-    --translate-y: #{$value};
-
-    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y)) 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));
-  }
+  // Store the value in a CSS variable
+  --translate-y: #{$value};
+  @include apply-transform;
 }
 
 @mixin translate-z($value) {
-  & {
-    --translate-z: #{$value};
-
-    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z)) 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));
-  }
+  // Store the value in a CSS variable
+  --translate-z: #{$value};
+  @include apply-transform;
 }
 
 @mixin translate($x, $y: null) {
-  & {
-    --translate-x: #{$x};
-
-    @if $y {
-      --translate-y: #{$y};
-    }
-
-    transform: translateX(var(--translate-x)) 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));
+  // Always set the x value
+  --translate-x: #{$x};
+  
+  // Only set y if provided
+  @if $y {
+    --translate-y: #{$y};
   }
+  
+  @include apply-transform;
 }
 
 // Scale mixins
 @mixin scale-x($value) {
-  & {
-    --scale-x: #{$value};
-
-    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)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
-  }
+  --scale-x: #{$value};
+  @include apply-transform;
 }
 
 @mixin scale-y($value) {
-  & {
-    --scale-y: #{$value};
-
-    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)) scaleZ(var(--scale-z, 1));
-  }
+  --scale-y: #{$value};
+  @include apply-transform;
 }
 
 @mixin scale($value) {
-  & {
-    --scale-x: #{$value};
-    --scale-y: #{$value};
-
-    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)) scaleY(var(--scale-y)) scaleZ(var(--scale-z, 1));
-  }
+  --scale-x: #{$value};
+  --scale-y: #{$value};
+  @include apply-transform;
 }
 
 // Rotation mixins
 @mixin rotate($value) {
-  & {
-    --rotate: #{$value};
-
-    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate)) 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));
-  }
+  --rotate: #{$value};
+  @include apply-transform;
 }
 
 // Skew mixins
 @mixin skew-x($value) {
-  & {
-    --skew-x: #{$value};
-
-    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
-  }
+  --skew-x: #{$value};
+  @include apply-transform;
 }
 
 @mixin skew-y($value) {
-  & {
-    --skew-y: #{$value};
-
-    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)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
-  }
+  --skew-y: #{$value};
+  @include apply-transform;
 }
 
 // Transform origin
 @mixin origin($value) {
-  & {
     transform-origin: $value;
-  }
 }
 
 // Common transform values
@@ -127,95 +116,172 @@ $translate-values: (
   '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%,
 );
 
+$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%,
+);
+
+// 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
+);
+
+  // Rotation hover utilities
+  $rotation-values: (
+    '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
+  );
+
+   // 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
+  );
+
 // Generate utility classes
 @if $generate-utility-classes {
   // Translate utilities
   @each $key, $value in $translate-values {
-    .translate-x-#{$key} { @include translate-x($value); }
-    .translate-y-#{$key} { @include translate-y($value); }
+    .translate-x-#{$key},
+    .hover\:translate-x-#{$key}:hover,
+    .group:hover .group-hover\:translate-x-#{$key} { @include translate-x($value); }
+    
+    .translate-y-#{$key},
+    .hover\:translate-y-#{$key}:hover,
+    .group:hover .group-hover\:translate-y-#{$key} { @include translate-y($value); }
+  }
+  @each $key, $value in $negative-translate-values {
+    .-translate-x-#{$key},
+    .hover\:-translate-x-#{$key}:hover,
+    .group:hover .group-hover\:-translate-x-#{$key} { @include translate-x($value); }
+    
+    .-translate-y-#{$key},
+    .hover\:-translate-y-#{$key}:hover,
+    .group:hover .group-hover\:-translate-y-#{$key} { @include translate-y($value); }
   }
   
-  // Scale utilities
-  .scale-0 { @include scale(0); }
-  .scale-50 { @include scale(0.5); }
-  .scale-75 { @include scale(0.75); }
-  .scale-90 { @include scale(0.9); }
-  .scale-95 { @include scale(0.95); }
-  .scale-100 { @include scale(1); }
-  .scale-105 { @include scale(1.05); }
-  .scale-110 { @include scale(1.1); }
-  .scale-125 { @include scale(1.25); }
-  .scale-150 { @include scale(1.5); }
+  @each $key, $value in $scale-values {
+    .scale-#{$key},
+    .hover\:scale-#{$key}:hover,
+    .group:hover .group-hover\:scale-#{$key} { @include scale($value); }
+
+    .scale-x-#{$key},
+    .hover\:scale-x-#{$key}:hover,
+    .group:hover .group-hover\:scale-x-#{$key} { @include scale-x($value); }
+
+    .scale-y-#{$key},
+    .hover\:scale-y-#{$key}:hover,
+    .group:hover .group-hover\:scale-y-#{$key} { @include scale-y($value); }
+  }
   
   // Rotation utilities
-  .rotate-0 { @include rotate(0deg); }
-  .rotate-45 { @include rotate(45deg); }
-  .rotate-90 { @include rotate(90deg); }
-  .rotate-180 { @include rotate(180deg); }
-  .rotate-270 { @include rotate(270deg); }
-  .-rotate-45 { @include rotate(-45deg); }
-  .-rotate-90 { @include rotate(-90deg); }
-  .-rotate-180 { @include rotate(-180deg); }
-  .-rotate-270 { @include rotate(-270deg); }
+  @each $key, $value in $rotation-values {
+    .rotate-#{$key},
+    .hover\:rotate-#{$key}:hover,
+    .group:hover .group-hover\:rotate-#{$key} { @include rotate($value); }
+  }
+
+  // Negative rotation utilities
+  @each $key, $value in $negative-rotation-values {
+    .-rotate-#{$key},
+    .hover\:-rotate-#{$key}:hover,
+    .group:hover .group-hover\:-rotate-#{$key} { @include rotate($value); }
+  }
   
   // Origin utilities
-  .origin-center { @include origin(center); }
-  .origin-top { @include origin(top); }
-  .origin-top-right { @include origin(top right); }
-  .origin-right { @include origin(right); }
-  .origin-bottom-right { @include origin(bottom right); }
-  .origin-bottom { @include origin(bottom); }
-  .origin-bottom-left { @include origin(bottom left); }
-  .origin-left { @include origin(left); }
-  .origin-top-left { @include origin(top left); }
-  
+  @each $key, $value in $origin-values {
+    .origin-#{$key},
+    .hover\:origin-#{$key}:hover,
+    .group:hover .group-hover\:origin-#{$key} { @include origin($value); }
+  }
+   
   // Responsive variants
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: #{$width}) {
       @each $key, $value in $translate-values {
-        .translate-x-#{$key}\@#{$breakpoint} { @include translate-x($value); }
-        .translate-y-#{$key}\@#{$breakpoint} { @include translate-y($value); }
+        .translate-x-#{$key}\@#{$breakpoint},
+        .hover\:translate-x-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:translate-x-#{$key}\@#{$breakpoint} { @include translate-x($value); }
+
+        .translate-x-#{$key}\@#{$breakpoint},
+        .hover\:translate-y-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:translate-y-#{$key}\@#{$breakpoint} { @include translate-y($value); }
+      }
+      @each $key, $value in $negative-translate-values {
+        .-translate-x-#{$key}\@#{$breakpoint},
+        .hover\:-translate-x-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:-translate-x-#{$key}\@#{$breakpoint} { @include translate-x($value); }
+
+        .-translate-x-#{$key}\@#{$breakpoint},
+        .hover\:-translate-y-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:-translate-y-#{$key}\@#{$breakpoint} { @include translate-y($value); }
       }
       
-      // Scale responsive
-      .scale-0\@#{$breakpoint} { @include scale(0); }
-      .scale-50\@#{$breakpoint} { @include scale(0.5); }
-      .scale-75\@#{$breakpoint} { @include scale(0.75); }
-      .scale-90\@#{$breakpoint} { @include scale(0.9); }
-      .scale-95\@#{$breakpoint} { @include scale(0.95); }
-      .scale-100\@#{$breakpoint} { @include scale(1); }
-      .scale-105\@#{$breakpoint} { @include scale(1.05); }
-      .scale-110\@#{$breakpoint} { @include scale(1.1); }
-      .scale-125\@#{$breakpoint} { @include scale(1.25); }
-      .scale-150\@#{$breakpoint} { @include scale(1.5); }
+       // Scale hover responsive
+       @each $key, $value in $scale-values {
+        .scale-#{$key}\@#{$breakpoint},
+        .hover\:scale-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:scale-#{$key}\@#{$breakpoint} { @include scale($value); }
+      }
       
-      // Rotation responsive
-      .rotate-0\@#{$breakpoint} { @include rotate(0deg); }
-      .rotate-45\@#{$breakpoint} { @include rotate(45deg); }
-      .rotate-90\@#{$breakpoint} { @include rotate(90deg); }
-      .rotate-180\@#{$breakpoint} { @include rotate(180deg); }
-      .-rotate-45\@#{$breakpoint} { @include rotate(-45deg); }
-      .-rotate-90\@#{$breakpoint} { @include rotate(-90deg); }
-      .-rotate-180\@#{$breakpoint} { @include rotate(-180deg); }
+      // Rotation hover responsive
+      @each $key, $value in $rotation-values {
+        .rotate-#{$key}\@#{$breakpoint},
+        .hover\:rotate-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:rotate-#{$key}\@#{$breakpoint} { @include rotate($value); }
+      }
+
+      // Negative rotation utilities
+      @each $key, $value in $negative-rotation-values {
+        .-rotate-#{$key}\@#{$breakpoint},
+        .hover\:-rotate-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:-rotate-#{$key}\@#{$breakpoint} { @include rotate($value); }
+      }
+
     }
   }
 }

package/src/styles/utilities/_transitions.scss

@@ -9,18 +9,11 @@
  * - .duration-{time}: Set transition duration
  * - .ease-{type}: Set transition timing function
  * - .delay-{time}: Set transition delay
- */
-
-// Base transition mixins
-@mixin transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
+ */ 
 
 // Property-specific transition mixins
 @mixin transition-none { transition-property: none; }
-@mixin transition-all { transition-property: all; }
+@mixin transition { transition-property: all; }
 @mixin transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
 @mixin transition-opacity { transition-property: opacity; }
 @mixin transition-shadow { transition-property: box-shadow; }
@@ -79,14 +72,9 @@ $delays: (
 
 
 @if $generate-utility-classes {
-  // Base transition
-  .transition {
-    @include transition;
-  }
-
   // Property-specific transitions
   .transition-none { @include transition-none; }
-  .transition-all { @include transition-all; }
+  .transition { @include transition; }
   .transition-colors { @include transition-colors; }
   .transition-opacity { @include transition-opacity; }
   .transition-shadow { @include transition-shadow; }
@@ -126,7 +114,7 @@ $delays: (
       
       // Property-specific transitions
       .transition-none\@#{$breakpoint} { @include transition-none; }
-      .transition-all\@#{$breakpoint} { @include transition-all; }
+      .transition\@#{$breakpoint} { @include transition; }
       .transition-colors\@#{$breakpoint} { @include transition-colors; }
       .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
       .transition-shadow\@#{$breakpoint} { @include transition-shadow; }

package/src/styles/utilities/_z-index.scss

@@ -0,0 +1,114 @@
+// Section: Layout
+// Module: Z-Index
+
+@use 'sass:map';
+@use 'sass:meta';
+
+// Import variables
+@use '../abstracts' as VAR;
+
+/**
+ * Z-Index Utilities
+ * 
+ * Classes:
+ * - z-index values: .z-0, .z-10, .z-20, etc.
+ * - Named z-index levels: .z-auto, .z-base, .z-dropdown, etc.
+ * 
+ * All utilities support responsive variants with @breakpoint suffix:
+ * - .z-10@md, .z-dropdown@lg, etc.
+ */
+
+// Z-index values map (can be moved to variables)
+$z-indexes: (
+  'auto': auto,
+  '0': 0,
+  '10': 10,
+  '20': 20,
+  '30': 30,
+  '40': 40,
+  '50': 50,
+  '60': 60,
+  '70': 70,
+  '80': 80,
+  '90': 90,
+  '100': 100,
+  '200': 200,
+  '500': 500,
+  '1000': 1000,
+);
+
+// Named z-index levels (can be moved to variables)
+$z-index-levels: (
+  'base': 0,
+  'hover': 10,
+  'dropdown': 100, 
+  'sticky': 200,
+  'fixed': 300,
+  'drawer': 400,
+  'modal': 500,
+  'popover': 600,
+  'tooltip': 700,
+  'overlay': 800,
+  'toast': 900,
+  'max': 9999
+);
+
+/**
+ * Apply a z-index value
+ * @param {Number|String} $value - Z-index value or key
+ */
+@mixin z-index($value) {
+  @if map.has-key($z-indexes, $value) {
+    z-index: map.get($z-indexes, $value);
+  } @else if map.has-key($z-index-levels, $value) {
+    z-index: map.get($z-index-levels, $value);
+  } @else {
+    z-index: $value;
+  }
+}
+
+/**
+ * Generate z-index utility classes
+ * @param {String} $breakpoint - Optional breakpoint name for responsive variants
+ */
+@mixin z-index-utilities($breakpoint: null) {
+  $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+  
+  // Standard numbered z-index utilities
+  @each $key, $value in $z-indexes {
+    .z-#{$key}#{$suffix} { @include z-index($key); }
+  }
+  
+  // Named semantic z-index utilities
+  @each $key, $value in $z-index-levels {
+    .z-#{$key}#{$suffix} { @include z-index($value); }
+  }
+}
+
+// Create specific named utilities as mixins for use in other files
+@mixin z-base { @include z-index('base'); }
+@mixin z-hover { @include z-index('hover'); }
+@mixin z-dropdown { @include z-index('dropdown'); }
+@mixin z-sticky { @include z-index('sticky'); }
+@mixin z-fixed { @include z-index('fixed'); }
+@mixin z-drawer { @include z-index('drawer'); }
+@mixin z-modal { @include z-index('modal'); }
+@mixin z-popover { @include z-index('popover'); }
+@mixin z-tooltip { @include z-index('tooltip'); }
+@mixin z-overlay { @include z-index('overlay'); }
+@mixin z-toast { @include z-index('toast'); }
+@mixin z-max { @include z-index('max'); }
+@mixin z-auto { @include z-index('auto'); }
+
+// Generate utility classes
+@if VAR.$generate-utility-classes {
+  // Generate base utilities
+  @include z-index-utilities;
+  
+  // Generate responsive variants
+  @each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: #{$width}) {
+      @include z-index-utilities($breakpoint);
+    }
+  }
+}