@nuvoui/core 1.2.0 → 1.2.1

package/src/styles/utilities/_sizing.scss

@@ -32,65 +32,67 @@
 @mixin w-screen { & { width: 100vw; } }
 @mixin h-screen { & { height: 100dvh; } }
 
-.w-screen { @include w-screen; }
-.h-screen { @include h-screen; }
+@if VAR.$generate-utility-classes {
+    .w-screen { @include w-screen; }
+    .h-screen { @include h-screen; }
 
-// Width utilities need :not(.flex) to avoid conflicts with flex child sizing
-:not(.flex)>.w-auto { @include w-auto; }
-:not(.flex)>.w-full { @include w-full; }
+    // Width utilities need :not(.flex) to avoid conflicts with flex child sizing
+    :not(.flex)>.w-auto { @include w-auto; }
+    :not(.flex)>.w-full { @include w-full; }
 
-.h-auto { @include h-auto; }
-.h-full { @include h-full; }
-.min-w-full { @include min-w-full; }
-.max-w-full { @include max-w-full; }
-.min-h-full { @include min-h-full; }
-.max-h-full { @include max-h-full; }
+    .h-auto { @include h-auto; }
+    .h-full { @include h-full; }
+    .min-w-full { @include min-w-full; }
+    .max-w-full { @include max-w-full; }
+    .min-h-full { @include min-h-full; }
+    .max-h-full { @include max-h-full; }
 
-// Percentage widths
-@each $i in VAR.$percentages {
-    .w-#{$i}p { @include width-percent($i); }
-    .h-#{$i}p { @include height-percent($i); }
-    .min-w-#{$i}p { @include min-width-percent($i); }
-    .min-h-#{$i}p { @include min-height-percent($i); }
-    .max-w-#{$i}p { @include max-width-percent($i); }
-    .max-h-#{$i}p { @include max-height-percent($i); }
-}
+    // Percentage widths
+    @each $i in VAR.$percentages {
+        .w-#{$i}p { @include width-percent($i); }
+        .h-#{$i}p { @include height-percent($i); }
+        .min-w-#{$i}p { @include min-width-percent($i); }
+        .min-h-#{$i}p { @include min-height-percent($i); }
+        .max-w-#{$i}p { @include max-width-percent($i); }
+        .max-h-#{$i}p { @include max-height-percent($i); }
+    }
 
-// Generate utilities from spacing map
-@each $key, $value in VAR.$spacings {
-    .w-#{$key} { @include width($value); }
-    .h-#{$key} { @include height($value); }
-    .min-w-#{$key} { @include min-width($value); }
-    .min-h-#{$key} { @include min-height($value); }
-    .max-w-#{$key} { @include max-width($value); }
-    .max-h-#{$key} { @include max-height($value); }
-}
+    // Generate utilities from spacing map
+    @each $key, $value in VAR.$spacings {
+        .w-#{$key} { @include width($value); }
+        .h-#{$key} { @include height($value); }
+        .min-w-#{$key} { @include min-width($value); }
+        .min-h-#{$key} { @include min-height($value); }
+        .max-w-#{$key} { @include max-width($value); }
+        .max-h-#{$key} { @include max-height($value); }
+    }
 
-// Pixel widths based on spacing scale
-@each $breakpoint, $width in VAR.$breakpoints {
+    // Pixel widths based on spacing scale
+    @each $breakpoint, $width in VAR.$breakpoints {
 
-    .w-#{$breakpoint} { @include width($width); }
-    .min-w-#{$breakpoint} { @include min-width($width); }
-    .max-w-#{$breakpoint} { @include max-width($width); }
+        .w-#{$breakpoint} { @include width($width); }
+        .min-w-#{$breakpoint} { @include min-width($width); }
+        .max-w-#{$breakpoint} { @include max-width($width); }
 
-    @include MQ.media-up ($breakpoint) {
-        // Generate utilities from spacing map
-        @each $i in VAR.$percentages {
-            .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
-            .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
-            .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
-            .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
-            .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
-            .max-h-#{$i}p\@#{$breakpoint} { @include max-height-percent($i); }
-        }
+        @include MQ.media-up ($breakpoint) {
+            // Generate utilities from spacing map
+            @each $i in VAR.$percentages {
+                .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
+                .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
+                .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
+                .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
+                .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
+                .max-h-#{$i}p\@#{$breakpoint} { @include max-height-percent($i); }
+            }
 
-        @each $key, $value in VAR.$spacings {
-            .w-#{$key}\@#{$breakpoint} { @include width($value); }
-            .h-#{$key}\@#{$breakpoint} { @include height($value); }
-            .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
-            .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
-            .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }
-            .max-h-#{$key}\@#{$breakpoint} { @include max-height($value); }
+            @each $key, $value in VAR.$spacings {
+                .w-#{$key}\@#{$breakpoint} { @include width($value); }
+                .h-#{$key}\@#{$breakpoint} { @include height($value); }
+                .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
+                .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
+                .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }
+                .max-h-#{$key}\@#{$breakpoint} { @include max-height($value); }
+            }
         }
     }
 }

package/src/styles/utilities/_spacing.scss

@@ -308,91 +308,93 @@
   */
  @mixin gap-y($val) { $val: format-unit-value($val); row-gap: $val; }
 
-// -----------------------------------------------
-// AUTO MARGIN UTILITY CLASSES
-// -----------------------------------------------
-
-.mx-auto { @include mx-auto; }
-.ml-auto { @include ml-auto; }
-.mr-auto { @include mr-auto; }
-
-// -----------------------------------------------
-// GAP AUTO CLASS
-// -----------------------------------------------
-
-.gap-auto { gap: auto; }
-
-// -----------------------------------------------
-// SPACING CLASSES
-// -----------------------------------------------
-
-@each $key, $value in $spacings {
-    // Padding classes
-    .p-#{$key} { @include p($value); }
-    .px-#{$key} { @include px($value); }
-    .py-#{$key} { @include py($value); }
-    .pt-#{$key} { @include pt($value); }
-    .pr-#{$key} { @include pr($value); }
-    .pb-#{$key} { @include pb($value); }
-    .pl-#{$key} { @include pl($value); }
-
-    // Margin classes
-    .m-#{$key} { @include m($value); }
-    .mx-#{$key} { @include mx($value); }
-    .my-#{$key} { @include my($value); }
-    .mt-#{$key} { @include mt($value); }
-    .mr-#{$key} { @include mr($value); }
-    .mb-#{$key} { @include mb($value); }
-    .ml-#{$key} { @include ml($value); }
-    
-    // Gap classes
-    .gap-#{$key} { @include gap($value); }
-    .gap-x-#{$key} { @include gap-x($value); }
-    .gap-y-#{$key} { @include gap-y($value); }
-
-    // Space classes
-    .space-x-#{$key} { @include space-x($value); }
-    .space-y-#{$key} { @include space-y($value); }
-}
-
+@if $generate-utility-classes {
+  // -----------------------------------------------
+  // AUTO MARGIN UTILITY CLASSES
+  // -----------------------------------------------
+
+  .mx-auto { @include mx-auto; }
+  .ml-auto { @include ml-auto; }
+  .mr-auto { @include mr-auto; }
+
+  // -----------------------------------------------
+  // GAP AUTO CLASS
+  // -----------------------------------------------
+
+  .gap-auto { gap: auto; }
+
+  // -----------------------------------------------
+  // SPACING CLASSES
+  // -----------------------------------------------
+
+  @each $key, $value in $spacings {
+      // Padding classes
+      .p-#{$key} { @include p($value); }
+      .px-#{$key} { @include px($value); }
+      .py-#{$key} { @include py($value); }
+      .pt-#{$key} { @include pt($value); }
+      .pr-#{$key} { @include pr($value); }
+      .pb-#{$key} { @include pb($value); }
+      .pl-#{$key} { @include pl($value); }
+
+      // Margin classes
+      .m-#{$key} { @include m($value); }
+      .mx-#{$key} { @include mx($value); }
+      .my-#{$key} { @include my($value); }
+      .mt-#{$key} { @include mt($value); }
+      .mr-#{$key} { @include mr($value); }
+      .mb-#{$key} { @include mb($value); }
+      .ml-#{$key} { @include ml($value); }
+      
+      // Gap classes
+      .gap-#{$key} { @include gap($value); }
+      .gap-x-#{$key} { @include gap-x($value); }
+      .gap-y-#{$key} { @include gap-y($value); }
+
+      // Space classes
+      .space-x-#{$key} { @include space-x($value); }
+      .space-y-#{$key} { @include space-y($value); }
+  }
 
-// -----------------------------------------------
-// RESPONSIVE SPACING CLASSES
-// -----------------------------------------------
 
-@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); }
-        }
-    }
+  // -----------------------------------------------
+  // RESPONSIVE SPACING CLASSES
+  // -----------------------------------------------
+
+  @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); }
+          }
+      }
+  }
 }

package/src/styles/utilities/_transitions.scss

@@ -42,18 +42,13 @@
   transition-delay: $time;
 }
 
-// Base transition
-.transition {
-  @include transition;
-}
-
-// Property-specific transitions
-.transition-none { @include transition-none; }
-.transition-all { @include transition-all; }
-.transition-colors { @include transition-colors; }
-.transition-opacity { @include transition-opacity; }
-.transition-shadow { @include transition-shadow; }
-.transition-transform { @include transition-transform; }
+// Timing functions
+$timing-functions: (
+  'linear': linear,
+  'in': cubic-bezier(0.4, 0, 1, 1),
+  'out': cubic-bezier(0, 0, 0.2, 1),
+  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
+);
 
 // Durations
 $durations: (
@@ -68,31 +63,6 @@ $durations: (
   '1000': 1000ms,
 );
 
-@each $name, $value in $durations {
-  .duration-#{$name} {
-    @include duration($value);
-  }
-}
-
-// Timing functions
-$timing-functions: (
-  'linear': linear,
-  'in': cubic-bezier(0.4, 0, 1, 1),
-  'out': cubic-bezier(0, 0, 0.2, 1),
-  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
-);
-
-@each $name, $value in $timing-functions {
-  .ease-#{$name} {
-    transition-timing-function: $value;
-  }
-}
-
-// Specific timing function classes
-.ease-linear { @include ease-linear; }
-.ease-in { @include ease-in; }
-.ease-out { @include ease-out; }
-.ease-in-out { @include ease-in-out; }
 
 // Delays
 $delays: (
@@ -107,45 +77,79 @@ $delays: (
   '1000': 1000ms,
 );
 
-@each $name, $value in $delays {
-  .delay-#{$name} {
-    @include delay($value);
+
+@if $generate-utility-classes {
+  // Base transition
+  .transition {
+    @include transition;
   }
-}
 
-// Responsive variants
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    // Base transition
-    .transition\@#{$breakpoint} {
-      @include transition;
+  // Property-specific transitions
+  .transition-none { @include transition-none; }
+  .transition-all { @include transition-all; }
+  .transition-colors { @include transition-colors; }
+  .transition-opacity { @include transition-opacity; }
+  .transition-shadow { @include transition-shadow; }
+  .transition-transform { @include transition-transform; }
+
+  @each $name, $value in $durations {
+    .duration-#{$name} {
+      @include duration($value);
     }
-    
-    // Property-specific transitions
-    .transition-none\@#{$breakpoint} { @include transition-none; }
-    .transition-all\@#{$breakpoint} { @include transition-all; }
-    .transition-colors\@#{$breakpoint} { @include transition-colors; }
-    .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
-    .transition-shadow\@#{$breakpoint} { @include transition-shadow; }
-    .transition-transform\@#{$breakpoint} { @include transition-transform; }
-    
-    // Duration responsive variants
-    @each $name, $value in $durations {
-      .duration-#{$name}\@#{$breakpoint} {
-        @include duration($value);
-      }
+  }
+
+  @each $name, $value in $timing-functions {
+    .ease-#{$name} {
+      transition-timing-function: $value;
+    }
+  }
+
+  // Specific timing function classes
+  .ease-linear { @include ease-linear; }
+  .ease-in { @include ease-in; }
+  .ease-out { @include ease-out; }
+  .ease-in-out { @include ease-in-out; }
+
+  @each $name, $value in $delays {
+    .delay-#{$name} {
+      @include delay($value);
     }
-    
-    // Timing function responsive variants
-    .ease-linear\@#{$breakpoint} { @include ease-linear; }
-    .ease-in\@#{$breakpoint} { @include ease-in; }
-    .ease-out\@#{$breakpoint} { @include ease-out; }
-    .ease-in-out\@#{$breakpoint} { @include ease-in-out; }
-    
-    // Delay responsive variants
-    @each $name, $value in $delays {
-      .delay-#{$name}\@#{$breakpoint} {
-        @include delay($value);
+  }
+
+  // Responsive variants
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      // Base transition
+      .transition\@#{$breakpoint} {
+        @include transition;
+      }
+      
+      // Property-specific transitions
+      .transition-none\@#{$breakpoint} { @include transition-none; }
+      .transition-all\@#{$breakpoint} { @include transition-all; }
+      .transition-colors\@#{$breakpoint} { @include transition-colors; }
+      .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
+      .transition-shadow\@#{$breakpoint} { @include transition-shadow; }
+      .transition-transform\@#{$breakpoint} { @include transition-transform; }
+      
+      // Duration responsive variants
+      @each $name, $value in $durations {
+        .duration-#{$name}\@#{$breakpoint} {
+          @include duration($value);
+        }
+      }
+      
+      // Timing function responsive variants
+      .ease-linear\@#{$breakpoint} { @include ease-linear; }
+      .ease-in\@#{$breakpoint} { @include ease-in; }
+      .ease-out\@#{$breakpoint} { @include ease-out; }
+      .ease-in-out\@#{$breakpoint} { @include ease-in-out; }
+      
+      // Delay responsive variants
+      @each $name, $value in $delays {
+        .delay-#{$name}\@#{$breakpoint} {
+          @include delay($value);
+        }
       }
     }
   }

package/src/styles/utilities/_typography.scss

@@ -102,10 +102,6 @@
 @mixin whitespace-pre-wrap { white-space: pre-wrap; }
 
 
-
-
-
-
 @mixin responsive-typography($breakpoint: null) {
   $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
 
@@ -157,25 +153,26 @@
   .truncate-3#{$suffix} { @include truncate-lines(3); }
   .truncate-4#{$suffix} { @include truncate-lines(4); }
   .truncate-5#{$suffix} { @include truncate-lines(5); }
-
 }
 
-@include responsive-typography;
-.break-normal { @include break-normal; }
-.break-words { @include break-words; }
-.break-all { @include break-all; }
-.whitespace-normal { @include whitespace-normal; }
-.whitespace-nowrap { @include whitespace-nowrap; }
-.whitespace-pre { @include whitespace-pre; }
-.whitespace-pre-line { @include whitespace-pre-line; }
-.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);
-    }
-}
+@if VAR.$generate-utility-classes {
+  @include responsive-typography;
+  .break-normal { @include break-normal; }
+  .break-words { @include break-words; }
+  .break-all { @include break-all; }
+  .whitespace-normal { @include whitespace-normal; }
+  .whitespace-nowrap { @include whitespace-nowrap; }
+  .whitespace-pre { @include whitespace-pre; }
+  .whitespace-pre-line { @include whitespace-pre-line; }
+  .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);
+      }
+  }
 
+}