@nuvoui/core 1.2.4 → 1.2.6

package/src/styles/utilities/_tooltips.scss

@@ -1,8 +1,10 @@
-:root {
+@use "../abstracts/config" as VAR;
+
+@mixin tooltip-variables {
   // Tooltip core variables
   --tooltip-bg: rgba(17 17 17 / 90%);
   --tooltip-shadow-color: rgb(0 0 0 / 20%);
-  --tooltip-text-color: #FFF;
+  --tooltip-text-color: #fff;
 
   // Animation variables
   --microtip-transition-duration: 0.18s;
@@ -21,7 +23,18 @@
   --tooltip-border-radius: 4px;
 }
 
-[data-tooltip][role~="tooltip"] {
+// Apply variables based on parent selector
+@if VAR.$parent-selector == "" {
+  :root {
+    @include tooltip-variables;
+  }
+} @else {
+  #{VAR.$parent-selector} {
+    @include tooltip-variables;
+  }
+}
+
+#{VAR.$parent-selector} [data-tooltip][role~="tooltip"] {
   position: relative;
 
   &::before,
@@ -31,8 +44,7 @@
     will-change: transform;
     opacity: 0;
     pointer-events: none;
-    transition: all var(--microtip-transition-duration) var(--microtip-transition-easing)
-      var(--microtip-transition-delay);
+    transition: all var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
     position: absolute;
     box-sizing: border-box;
     z-index: 10;
@@ -68,13 +80,12 @@
 }
 
 // Top position tooltips
-[role~="tooltip"][data-microtip-position|="top"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 6px;
     width: 18px;
-    margin-bottom: 5px;
+    margin-bottom: 6px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
     left: 50%;
@@ -90,15 +101,13 @@
   &:hover::before {
     transform: translate3d(-50%, -5px, 0);
   }
-}
 
-[role~="tooltip"][data-microtip-position="top"] {
   &:hover::after {
     transform: translate3d(-50%, -5px, 0);
   }
 }
 
-[role~="tooltip"][data-microtip-position="top-left"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
   &::after {
     transform: translate3d(calc(-100% + 16px), 0, 0);
     bottom: 100%;
@@ -109,7 +118,7 @@
   }
 }
 
-[role~="tooltip"][data-microtip-position="top-right"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
   &::after {
     transform: translate3d(calc(0% + -16px), 0, 0);
     bottom: 100%;
@@ -121,10 +130,9 @@
 }
 
 // Bottom position tooltips
-[role~="tooltip"][data-microtip-position|="bottom"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 6px;
     width: 18px;
     margin-top: 5px;
@@ -145,15 +153,13 @@
   &:hover::before {
     transform: translate3d(-50%, 0, 0);
   }
-}
 
-[role~="tooltip"][data-microtip-position="bottom"] {
   &:hover::after {
     transform: translate3d(-50%, 0, 0);
   }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-left"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
   &::after {
     transform: translate3d(calc(-100% + 16px), -10px, 0);
     top: 100%;
@@ -164,7 +170,7 @@
   }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-right"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
   &::after {
     transform: translate3d(calc(0% + -16px), -10px, 0);
     top: 100%;
@@ -176,16 +182,18 @@
 }
 
 // Left position tooltips
-[role~="tooltip"][data-microtip-position="left"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
   &::before,
   &::after {
     inset: auto auto auto 100%;
+    left: auto; // Remove any left positioning
+    right: 100%; // Position to the left of the element
+    top: 50%;
     transform: translate3d(10px, -50%, 0);
   }
 
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 18px;
     width: 6px;
     margin-right: 5px;
@@ -203,7 +211,7 @@
 }
 
 // Right position tooltips
-[role~="tooltip"][data-microtip-position="right"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
   &::before,
   &::after {
     bottom: auto;
@@ -213,8 +221,7 @@
   }
 
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 18px;
     width: 6px;
     margin-bottom: 0;
@@ -232,17 +239,17 @@
 }
 
 // Tooltip sizes
-[role~="tooltip"][data-microtip-size="small"]::after {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
   white-space: initial;
   width: var(--tooltip-small-width);
 }
 
-[role~="tooltip"][data-microtip-size="medium"]::after {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
   white-space: initial;
   width: var(--tooltip-medium-width);
 }
 
-[role~="tooltip"][data-microtip-size="large"]::after {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
   white-space: initial;
   width: var(--tooltip-large-width);
 }

package/src/styles/utilities/_transforms.scss

@@ -1,5 +1,5 @@
-@use '../abstracts' as *;
-@use 'sass:map';
+@use "../abstracts/config" as VAR;
+@use "sass:map";
 
 /**
  * Transform Utilities
@@ -11,211 +11,300 @@
  * - 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};
+  // Always set the x value
+  --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));
+  // 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;
-  }
+  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%,
-  '-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%,
+);
+
+// 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 {
+@if VAR.$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); }
+    #{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);
+    }
   }
-  
-  // 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 $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);
+    }
+  }
+
+  @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);
+    }
+
+    #{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);
+    }
+
+    #{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
-  .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 {
+    #{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
-  .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 {
+    #{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 $breakpoints {
+  @each $breakpoint, $width in VAR.$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); }
+        #{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);
+        }
+
+        #{VAR.$parent-selector} .translate-x-#{$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);
+        }
+
+        #{VAR.$parent-selector} .-translate-x-#{$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);
+        }
+      }
+
+      // 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 {
+        #{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);
+        }
       }
-      
-      // 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); }
-      
-      // 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); }
     }
   }
-}
+}