@nuvoui/core 1.2.1 → 1.2.3

package/src/styles/utilities/_spacing.scss

@@ -117,7 +117,7 @@
  * @description Sets padding on all sides
  * @param {Number|String} $val - Padding value
  */
-@mixin p($val) { & { padding: format-unit-value($val); }}
+@mixin p($val) {  padding: format-unit-value($val); }
 
 /**
 * @mixin px
@@ -138,38 +138,54 @@
 */
 @mixin py($val) { 
   $val: format-unit-value($val); 
-  
+
   padding-top: $val; 
   padding-bottom: $val; 
 }
-
+  
 /**
 * @mixin pt
 * @description Sets padding-top
 * @param {Number|String} $val - Padding value
 */
-@mixin pt($val) { $val: format-unit-value($val); padding-top: $val; }
+@mixin pt($val) { 
+  $val: format-unit-value($val); 
+
+  padding-top: $val; 
+}
 
 /**
 * @mixin pr
 * @description Sets padding-right
 * @param {Number|String} $val - Padding value
 */
-@mixin pr($val) { $val: format-unit-value($val); padding-right: $val; }
+@mixin pr($val) { 
+  $val: format-unit-value($val); 
+
+  padding-right: $val; 
+}
 
 /**
 * @mixin pb
 * @description Sets padding-bottom
 * @param {Number|String} $val - Padding value
 */
-@mixin pb($val) { $val: format-unit-value($val); padding-bottom: $val; }
+@mixin pb($val) { 
+  $val: format-unit-value($val); 
+
+  padding-bottom: $val; 
+}
 
 /**
 * @mixin pl
 * @description Sets padding-left
 * @param {Number|String} $val - Padding value
 */
-@mixin pl($val) { $val: format-unit-value($val); padding-left: $val; }
+@mixin pl($val) { 
+  $val: format-unit-value($val); 
+
+  padding-left: $val; 
+}
 
 // -----------------------------------------------
 // MARGIN MIXINS
@@ -180,7 +196,11 @@
 * @description Sets margin on all sides
 * @param {Number|String} $val - Margin value
 */
-@mixin m($val) { $val: format-unit-value($val); margin: $val; }
+@mixin m($val) { 
+  $val: format-unit-value($val); 
+
+  margin: $val; 
+}
 
 /**
 * @mixin mx
@@ -189,7 +209,7 @@
 */
 @mixin mx($val) { 
   $val: format-unit-value($val); 
-  
+
   margin-left: $val; 
   margin-right: $val; 
 }
@@ -211,40 +231,56 @@
 * @description Sets margin-top
 * @param {Number|String} $val - Margin value
 */
-@mixin mt($val) { $val: format-unit-value($val); margin-top: $val; }
+@mixin mt($val) { 
+  $val: format-unit-value($val); 
+
+  margin-top: $val; 
+}
 
 /**
 * @mixin mr
 * @description Sets margin-right
 * @param {Number|String} $val - Margin value
 */
-@mixin mr($val) { $val: format-unit-value($val); margin-right: $val; }
+@mixin mr($val) { 
+  $val: format-unit-value($val); 
+  
+  margin-right: $val; 
+}
 
 /**
 * @mixin mb
 * @description Sets margin-bottom
 * @param {Number|String} $val - Margin value
 */
-@mixin mb($val) { $val: format-unit-value($val); margin-bottom: $val; }
+@mixin mb($val) { 
+  $val: format-unit-value($val); 
+  
+  margin-bottom: $val; 
+}
 
 /**
 * @mixin ml
 * @description Sets margin-left
 * @param {Number|String} $val - Margin value
 */
-@mixin ml($val) { $val: format-unit-value($val); margin-left: $val; }
+@mixin ml($val) { 
+  $val: format-unit-value($val); 
+  
+  margin-left: $val; 
+}
 
 /**
 * @mixin ml-auto
 * @description Sets margin-left to auto
 */
-@mixin ml-auto { margin-left: auto; }
+@mixin ml-auto {   margin-left: auto; } 
 
 /**
 * @mixin mr-auto
 * @description Sets margin-right to auto
 */
-@mixin mr-auto { margin-right: auto; }
+@mixin mr-auto {   margin-right: auto; } 
 
 /**
 * @mixin mx-auto
@@ -362,39 +398,39 @@
   // -----------------------------------------------
 
   @each $breakpoint, $width in $breakpoints {
-      @media (min-width: #{$width}) {
-          .mx-auto\@#{$breakpoint} { @include mx-auto; }
-          .ml-auto\@#{$breakpoint} { @include ml-auto; }
-          .mr-auto\@#{$breakpoint} { @include mr-auto; }
-
-          // Generate utilities from spacing map
-          @each $key, $value in $spacings {
-              // Padding classes
-              .p-#{$key}\@#{$breakpoint} { @include p($value); }
-              .px-#{$key}\@#{$breakpoint} { @include px($value); }
-              .py-#{$key}\@#{$breakpoint} { @include py($value); }
-              .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
-              .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
-              .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
-              .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
-
-              // Margin classes
-              .m-#{$key}\@#{$breakpoint} { @include m($value); }
-              .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
-              .my-#{$key}\@#{$breakpoint} { @include my($value); }
-              .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
-              .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
-              .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
-              .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
-
-              .gap-#{$key}\@#{$breakpoint} { gap: $value; }
-              .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
-              .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
-        
-              // Space classes
-              .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
-              .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
-          }
+    @media (min-width: #{$width}) {
+      .mx-auto\@#{$breakpoint} { @include mx-auto; }
+      .ml-auto\@#{$breakpoint} { @include ml-auto; }
+      .mr-auto\@#{$breakpoint} { @include mr-auto; }
+
+      // Generate utilities from spacing map
+      @each $key, $value in $spacings {
+        // Padding classes
+        .p-#{$key}\@#{$breakpoint} { @include p($value); }
+        .px-#{$key}\@#{$breakpoint} { @include px($value); }
+        .py-#{$key}\@#{$breakpoint} { @include py($value); }
+        .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
+        .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
+        .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
+        .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
+
+        // Margin classes
+        .m-#{$key}\@#{$breakpoint} { @include m($value); }
+        .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
+        .my-#{$key}\@#{$breakpoint} { @include my($value); }
+        .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
+        .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
+        .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
+        .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
+
+        .gap-#{$key}\@#{$breakpoint} { gap: $value; }
+        .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
+        .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
+  
+        // Space classes
+        .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
+        .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
       }
+    }
   }
-}
+}

package/src/styles/utilities/_transforms.scss

@@ -0,0 +1,221 @@
+@use '../abstracts' as *;
+@use 'sass:map';
+
+/**
+ * Transform Utilities
+ * 
+ * - Translate (X, Y, Z)
+ * - Scale
+ * - Rotate
+ * - Skew
+ * - Transform origin
+ */
+
+// 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));
+  }
+}
+
+@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));
+  }
+}
+
+@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));
+  }
+}
+
+@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));
+  }
+}
+
+// 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));
+  }
+}
+
+@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));
+  }
+}
+
+@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));
+  }
+}
+
+// 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));
+  }
+}
+
+// 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));
+  }
+}
+
+@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));
+  }
+}
+
+// Transform origin
+@mixin 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%,
+);
+
+// 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); }
+  }
+  
+  // 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); }
+  
+  // 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); }
+  
+  // 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); }
+  
+  // 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); }
+      }
+      
+      // 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); }
+    }
+  }
+}

package/src/styles/utilities/_transitions.scss

@@ -153,4 +153,4 @@ $delays: (
       }
     }
   }
-}
+}

package/src/styles/utilities/_typography.scss

@@ -2,6 +2,7 @@
 // Module: Text
 
 @use 'sass:map';
+@use 'sass:meta';
 
 // Import variables
 @use '../abstracts'  as VAR;
@@ -31,12 +32,11 @@
 * @param {string} $size - The size of the text.
 */ 
 @mixin text-size($size) {
-  @if map.has-key(VAR.$font-sizes, $size) {
-    font-size: map.get(VAR.$font-sizes, $size);
-  } @else {
-    font-size: $size;
-  }
-  
+    @if map.has-key(VAR.$font-sizes, $size) {
+      font-size: map.get(VAR.$font-sizes, $size);
+    } @else {
+      font-size: $size;
+    }
 }
 
 // Font weights
@@ -50,13 +50,34 @@
 @mixin font-extrabold { font-weight: 800; }
 @mixin font-black { font-weight: 900; }
 
+
+@mixin leading($value){
+  @if meta.type-of($value) == 'number' {
+    line-height: $value;
+  } @else if $value == 'none' {
+    line-height: 1;
+  } @else if $value == 'tight' {
+    line-height: 1.25;
+  } @else if $value == 'snug' {
+    line-height: 1.375;
+  } @else if $value == 'normal' {
+    line-height: 1.5;
+  } @else if $value == 'relaxed' {
+    line-height: 1.625;
+  } @else if $value == 'loose' {
+    line-height: 2;
+  } @else {
+    line-height: $value;
+  }
+}
+
 // Line heights
-@mixin leading-none { line-height: 1; }
-@mixin leading-tight { line-height: 1.25; }
-@mixin leading-snug { line-height: 1.375; }
-@mixin leading-normal { line-height: 1.5; }
-@mixin leading-relaxed { line-height: 1.625; }
-@mixin leading-loose { line-height: 2; }
+@mixin leading-none { @include leading(none);} 
+@mixin leading-tight { @include leading(tight);} 
+@mixin leading-snug { @include leading(snug);} 
+@mixin leading-normal { @include leading(normal);} 
+@mixin leading-relaxed { @include leading(relaxed);} 
+@mixin leading-loose { @include leading(loose);} 
 
 // Text alignment
 @mixin text-left { text-align: left; }
@@ -72,16 +93,28 @@
 @mixin normal-case { text-transform: none; }
 
 // Font style mixins
-@mixin italic { font-style: italic; }
-@mixin not-italic { font-style: normal; }
+@mixin italic { font-style: italic; } 
+@mixin not-italic { font-style: normal; } 
 
 // Text decoration mixins
-@mixin underline { text-decoration: underline; }
-@mixin line-through { text-decoration: line-through; }
-@mixin no-underline { text-decoration: none; }
+@mixin underline { text-decoration: underline; } 
+@mixin line-through { text-decoration: line-through; } 
+@mixin no-underline { text-decoration: none; } 
 
 // Text overflow mixin
-@mixin truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@mixin truncate { 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
+  white-space: nowrap; 
+}
+
+@mixin overflow-label {
+  white-space: nowrap;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-width: 0;
+}
 
 @mixin truncate-lines($lines: 2) {
   display: -webkit-box;
@@ -92,7 +125,11 @@
 }
 
 
-@mixin break-normal { overflow-wrap: normal; word-break: normal; }
+@mixin break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
 @mixin break-words { overflow-wrap: break-word; }
 @mixin break-all { word-break: break-all; }
 @mixin whitespace-normal { white-space: normal; }
@@ -102,6 +139,35 @@
 @mixin whitespace-pre-wrap { white-space: pre-wrap; }
 
 
+// Custom letter spacing mixin with value
+@mixin tracking($value) {
+  @if meta.type-of($value) == 'number' {
+    letter-spacing: $value;
+  } @else if $value == 'tighter' {
+    letter-spacing: -0.05em;
+  } @else if $value == 'tight' {
+    letter-spacing: -0.025em;
+  } @else if $value == 'normal' {
+    letter-spacing: 0;
+  } @else if $value == 'wide' {
+    letter-spacing: 0.025em;
+  } @else if $value == 'wider' {
+    letter-spacing: 0.05em;
+  } @else if $value == 'widest' {
+    letter-spacing: 0.1em;
+  } @else {
+    letter-spacing: $value;
+  }
+}
+
+@mixin tracking-tighter { @include tracking(tighter) };
+@mixin tracking-tight { @include tracking(tight) };
+@mixin tracking-normal { @include tracking(normal) };
+@mixin tracking-wide { @include tracking(wide) };
+@mixin tracking-wider { @include tracking(wider) };
+@mixin tracking-widest { @include tracking(widest) };
+
+
 @mixin responsive-typography($breakpoint: null) {
   $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
 
@@ -153,6 +219,15 @@
   .truncate-3#{$suffix} { @include truncate-lines(3); }
   .truncate-4#{$suffix} { @include truncate-lines(4); }
   .truncate-5#{$suffix} { @include truncate-lines(5); }
+
+  .tracking-tighter#{$suffix} { @include tracking(tighter) };
+  .tracking-tight#{$suffix} { @include tracking(tight) };
+  .tracking-normal#{$suffix} { @include tracking(normal) };
+  .tracking-wide#{$suffix} { @include tracking(wide) };
+  .tracking-wider#{$suffix} { @include tracking(wider) };
+  .tracking-widest#{$suffix} { @include tracking(widest) };
+  
+  .overflow-label#{$suffix}{@include overflow-label};
 }
 
 @if VAR.$generate-utility-classes {
@@ -167,12 +242,11 @@
   .whitespace-pre-wrap { @include whitespace-pre-wrap; }
 
   @each $breakpoint, $width in VAR.$breakpoints {
-      @media (min-width: #{$width}) {
-          @each $size, $val in VAR.$font-sizes {
-              .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
-          }
-          @include responsive-typography($breakpoint);
+    @media (min-width: #{$width}) {
+      @each $size, $val in VAR.$font-sizes {
+        .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
       }
+      @include responsive-typography($breakpoint);
+    }
   }
-
-}
+}