@nuvoui/core 1.1.4 → 1.1.6

package/src/styles/utilities/_container-queries.scss

@@ -0,0 +1,58 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use './variables' as *;
+@use './functions' as FN;
+
+/// Container Query: Up
+@mixin container-up($breakpoint, $containerName: null) {
+  $bp-val: FN.get-breakpoint-value($breakpoint);
+  @container #{$containerName} (min-width: #{$bp-val}) {
+    @content;
+  }
+}
+
+/// Container Query: Down
+@mixin container-down($breakpoint, $containerName: null) {
+  $bp-val: FN.get-breakpoint-value($breakpoint);
+  @container #{$containerName} (max-width: (#{ $bp-val } - 0.02px)) {
+    @content;
+  }
+}
+
+/// Container Query: Between
+@mixin container-between($lower, $upper, $containerName: null) {
+  $min: FN.get-breakpoint-value($lower);
+  $max: FN.get-breakpoint-value($upper);
+  @container #{$containerName} (min-width: #{$min}) and (max-width: (#{ $max } - 0.02px)) {
+    @content;
+  }
+}
+
+/// Container Query: Only
+@mixin container-only($breakpoint, $containerName: null) {
+  $min: FN.get-breakpoint-value($breakpoint);
+  $next-breakpoint: null;
+  
+  @each $name, $width in $breakpoints {
+    @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
+      $next-breakpoint: $width;
+    }
+  }
+  
+  @if $next-breakpoint {
+    @container #{$containerName} (min-width: #{$min}) and (max-width: (#{ $next-breakpoint } - 0.02px)) {
+      @content;
+    }
+  } @else {
+    @container #{$containerName} (min-width: #{$min}) {
+      @content;
+    }
+  }
+}
+
+/// Container Query: Query by Size
+@mixin container-query($size, $containerName: null) {
+  @container #{$containerName} (min-width: $size) {
+    @content;
+  }
+}

package/src/styles/utilities/_display.scss

@@ -1,36 +1,79 @@
+// Section: Utilities
+// Module: Display
 
 @use './variables' as *;
-@use './functions' as *;
+@use './functions' as FN;
 
 // Display Mixins
-@mixin d-none { display: none; }
-@mixin d-block { display: block; }
-@mixin d-inline { display: inline; }
-@mixin d-inline-block { display: inline-block; }
+ 
+/**
+ * @description Set display to none.
+ */
+@mixin hide { display: none; }
+
+/**
+ * @description Set display to block.
+ */
+@mixin block { display: block; }
+
+/**
+ * @description Set display to inline.
+ */
+@mixin inline { display: inline; }
+
+/**
+ * @description Set display to inline-block.
+ */
+@mixin inline-block { display: inline-block; }
+
+/**
+ * @description Set display to initial original state.
+ */
+@mixin show { display: revert; }
+
+/**
+ * @description Set display to table.
+ */
 @mixin d-tbl { display: table; }
+
+/**
+ * @description Set display to table-row.
+ */
 @mixin d-tbl-row { display: table-row; }
+
+/**
+ * @description Set display to table-cell.
+ */
 @mixin d-tbl-cell { display: table-cell; }
 
+
+
+@mixin overflow-hidden { overflow: hidden; }
+
 // Base Classes 
-.hide { @include d-none; }
-.block { @include d-block; }
-.inline { @include d-inline; }
-.inline-block { @include d-inline-block; }
+.hide { @include hide; }
+.show { @include show; }
+.block { @include block; }
+.inline { @include inline; }
+.inline-block { @include inline-block; }
+.overflow-hidden { @include overflow-hidden; }
 
 .d {
   &-tbl { @include d-tbl; }
   &-tbl-row { @include d-tbl-row; }
   &-tbl-cell { @include d-tbl-cell; }
 }
-
+                 
 // Responsive Variants
 @each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
-    .hide\@#{$breakpoint} { @include d-none; }
-    .block\@#{$breakpoint} { @include d-block; }
-    .inline\@#{$breakpoint} { @include d-inline; }
-    .inline-block\@#{$breakpoint} { @include d-inline-block; }
-    
+  @media (min-width: #{$width}) {
+    .hide\@#{$breakpoint} { @include hide; }
+    .show\@#{$breakpoint} { @include show; }
+    .block\@#{$breakpoint} { @include block; }
+    .inline\@#{$breakpoint} { @include inline; }
+    .inline-block\@#{$breakpoint} { @include inline-block; }
+    .overflow-hidden\@#{$breakpoint} { @include overflow-hidden; }
+   
     .d {
       &-tbl\@#{$breakpoint} { @include d-tbl; }
       &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }

package/src/styles/utilities/_functions.scss

@@ -1,5 +1,30 @@
 @use 'sass:string';
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+@use 'variables' as *;
+
+@function str-replace($string, $search, $replace: " ") {
+    $index: string.index($string, $search);
+    @if $index {
+      @return string.slice($string, 1, $index - 1)
+        + $replace
+        + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
+    @return $string;
+  }
+
+@function get-breakpoint-value($bp) {
+    @if map.has-key($breakpoints, $bp) {
+        @return map.get($breakpoints, $bp);
+    } @else if meta.type-of($bp) == number {
+        @return $bp;
+    } @else {
+        @warn 'Invalid breakpoint: #{$bp}';
+        @return null;
+    }
+}
 
 @function strip-unit($value) {
   @return math.div($value, ($value * 0 + 1));
@@ -51,9 +76,9 @@
   } @else if string.index($value-str, 'pt') {
       @return 'pt';
   } @else if string.index($value-str, 'pc') {
-      @return 'pc';
+    @return 'pc';
   }
   
   // Return empty string if no unit found
   @return '';
-}
+}

package/src/styles/utilities/_helpers.scss

@@ -0,0 +1,128 @@
+@use 'sass:string';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+@use 'variables' as *;
+
+@if $enable-debuger {
+    .NuvoUI-Debugger-Wrapper {
+        color: #fff;
+        font-family: Arial, sans-serif;
+        position: fixed;
+        z-index: 999999;
+        inset: 10px auto auto 10px;
+        pointer-events: none;
+
+        &.top-left {
+            inset: 10px auto auto 10px;
+            text-align: left;
+        }
+
+        &.top-right {
+            inset: 10px 10px auto auto;
+            text-align: right;
+        }
+
+        &.bottom-left {
+            inset: auto auto 10px 10px;
+            text-align: left;
+        }
+
+        &.bottom-right {
+            inset: auto 10px 10px auto;
+            text-align: right;
+        }
+
+        .NuvoUI-Debugger-Main, .NuvoUI-Debugger{
+            padding: 10px;
+            background-color: rgb(0 0 0 / 80%);
+            border-radius: 5px;
+            border: 1px solid green;
+            box-shadow: 0 0 2px 0 #fff;
+            pointer-events: none;
+        }
+
+        .NuvoUI-Debugger-Main {
+            $breakpoint-keys: map.keys($breakpoints);
+            $total: list.length($breakpoint-keys);
+
+            &::before,
+            &::after {
+                font-family: 'Courier New', Courier, monospace;
+                font-size: 0.8em;
+                display: block;
+            }
+
+            &::before {
+                font-weight: bold;
+            }
+
+            @for $i from 1 through $total {
+                $current: list.nth($breakpoint-keys, $i);
+                $current-width: map.get($breakpoints, $current);
+
+                @if $i == 1 {
+                    @media (max-width: #{$current-width}) {
+                        &::before {
+                            content: "Screen: #{$current}";
+                        }
+                    }
+                } @else {
+                    $prev: list.nth($breakpoint-keys, $i - 1);
+                    $prev-width: map.get($breakpoints, $prev);
+
+                    @media (min-width: #{$prev-width}) and (max-width: (#{$current-width} - 1)) {
+                        &::before {
+                            content: "Screen: #{$current}";
+                        }
+                    }
+                }
+            }
+
+            &::after {
+                content: attr(data-size);
+            }
+        }
+
+        .NuvoUI-Debugger {
+            margin-top: 10px;
+
+            &::before,
+            &::after {
+                font-family: 'Courier New', Courier, monospace;
+                font-size: 0.8em;
+                display: block;
+            }
+
+            &::before {
+                font-weight: bold;
+                content: attr(data-element);
+            }
+
+            &::after {
+                content: attr(data-size);
+            }
+        }
+
+        .NuvoUI-Debugger-Close {
+            color: #fff;
+            cursor: pointer;
+            font-size: 14px;
+            pointer-events: auto;
+            position: absolute;
+            right: 0;
+            top: 0;
+            background: #00800199;
+            border-radius: 20px;
+            height: 14px;
+            width: 14px;
+            line-height: 14px;
+            text-align: center;
+
+            &:hover {
+                background: #008001;
+            }
+        }
+    }
+}

package/src/styles/utilities/_media-queries.scss

@@ -1,68 +1,56 @@
+// Section: Utilities
+// Module: Media Queries
+
 @use 'sass:map';
 @use 'sass:meta';
 @use './variables' as *;
+@use './functions' as FN;
+
 
-// Breakpoint mixins
+/**
+ * @description Media query mixins.
+ * @param {string|number} $breakpoint - The breakpoint value.
+ * @param {string} $type - The media query type (e.g. 'lg', 'md').
+ */
 @mixin media-up($breakpoint) {
-  @if map.has-key($breakpoints, $breakpoint) {
-    @media screen and (min-width: map.get($breakpoints, $breakpoint)) {
-      @content;
-    }
-  } @else if meta.type-of($breakpoint) == number {
-    @media screen and (min-width: $breakpoint) {
-      @content;
-    }
+  @media screen and (min-width: #{FN.get-breakpoint-value($breakpoint)}) {
+    @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  @if map.has-key($breakpoints, $breakpoint) {
-    @media screen and (max-width: (map.get($breakpoints, $breakpoint) - 0.02px)) {
-      @content;
-    }
-  } @else if meta.type-of($breakpoint) == number {
-    @media screen and (max-width: ($breakpoint - 0.02px)) {
-      @content;
-    }
+  @media screen and (max-width: (#{FN.get-breakpoint-value($breakpoint)} - 0.02px)) {
+    @content;
   }
 }
 
 @mixin media-between($lower, $upper) {
-  @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
-    @media screen and (min-width: map.get($breakpoints, $lower)) and (max-width: (map.get($breakpoints, $upper) - 0.02px)) {
-      @content;
-    }
+  $lower-val: FN.get-breakpoint-value($lower);
+  $upper-val: FN.get-breakpoint-value($upper);
+  @media screen and (min-width: #{$lower-val}) and (max-width: (#{ $upper-val } - 0.02px)) {
+    @content;
   }
 }
 
 // Only at specific breakpoint
 @mixin media-only($breakpoint) {
-  @if map.has-key($breakpoints, $breakpoint) {
-    $min: map.get($breakpoints, $breakpoint);
-    $next-breakpoint: null;
-    
-    @each $name, $width in $breakpoints {
-      @if $width > $min and (meta.type-of($next-breakpoint) == 'null' or $width < $next-breakpoint) {
-        $next-breakpoint: $width;
-      }
-    }
-    
-    @if $next-breakpoint {
-      @media (min-width: $min) and (max-width: ($next-breakpoint - 1)) {
-        @content;
-      }
-    } @else {
-      @media (min-width: $min) {
-        @content;
-      }
+  $min: FN.get-breakpoint-value($breakpoint);
+  $next-breakpoint: null;
+  
+  @each $name, $width in $breakpoints {
+    @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
+      $next-breakpoint: #{$width};
     }
   }
-}
-
-// Example: @include container(45em) { }
-@mixin container-query($size) {
-  @container (min-width: $size) {
-    @content;
+  
+  @if $next-breakpoint {
+    @media (min-width: #{$min}) and (max-width: (#{ $next-breakpoint } - 1)) {
+      @content;
+    }
+  } @else {
+    @media (min-width: #{$min}) {
+      @content;
+    }
   }
 }
 
@@ -80,17 +68,13 @@
   }
 }
 
-// Modern feature detection
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
-  @supports #{$property} {
+  @supports (#{$property}) {
     @content;
   }
 }
 
-
-
-
 // Mixin: Dark Mode
 // Applies styles when the user prefers a dark color scheme.
 @mixin dark-mode {

package/src/styles/utilities/_opacity.scss

@@ -11,7 +11,7 @@
 
 // Responsive Variants for Opacity
 @each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
+  @media (min-width: #{$width}) {
     @each $i in $percentages {
       .opacity-#{$i}\@#{$breakpoint} { opacity: math.div($i, 100); }
       .hover\:opacity-#{$i}\@#{$breakpoint}:hover { opacity: math.div($i, 100); }

package/src/styles/utilities/_position.scss

@@ -46,7 +46,7 @@
 
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
+  @media (min-width: #{$width}) {
     .static\@#{$breakpoint} {
       @include static;
     }
@@ -94,7 +94,7 @@
 
 // Pixel widths based on spacing scale
 @each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
+  @media (min-width: #{$width}) {
       // Generate utilities from spacing map
       @each $i in $spacings {
           .top-#{$i}\@#{$breakpoint} {height: if($i == 0, $i, $i + px);}

package/src/styles/utilities/_sizing.scss

@@ -2,6 +2,7 @@
 
 @use 'sass:math';
 @use './variables' as *;
+@use './container-queries' as Q;
 
 @mixin width($value) { width: if($value == 0, $value, $value + px); }
 @mixin height($value) { height: if($value == 0, $value, $value + px); }
@@ -41,10 +42,10 @@
 @each $i in $percentages {
     .w-#{$i}per { @include width-percent($i); }
     .h-#{$i}per { @include height-percent($i); }
-    .min-w-#{$i} { @include min-width-percent($i); }
-    .min-h-#{$i} { @include min-height-percent($i); }
-    .max-w-#{$i} { @include max-width-percent($i); }
-    .max-h-#{$i} { @include max-height-percent($i); }
+    .min-w-#{$i}per { @include min-width-percent($i); }
+    .min-h-#{$i}per { @include min-height-percent($i); }
+    .max-w-#{$i}per { @include max-width-percent($i); }
+    .max-h-#{$i}per { @include max-height-percent($i); }
 }
 
 // Generate utilities from spacing map
@@ -59,9 +60,26 @@
 
 // Pixel widths based on spacing scale
 @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
+
+    .w-#{$breakpoint} { @include width($width); }
+    .min-w-#{$breakpoint} { @include min-width($width) }
+    .max-w-#{$breakpoint} { @include max-width($width) }
+
+    @each $b, $w in $breakpoints {
+        .min-w-#{$breakpoint}\@#{$b} { @include min-width($width) }
+        .max-w-#{$breakpoint}\@#{$b} { @include max-width($width) }
+    }
+
+    @include Q.container-up ($breakpoint) {
         // Generate utilities from spacing map
+
         @each $i in $spacings {
+            .w-#{$i}per\@#{$breakpoint} { @include width-percent($i); }
+            .h-#{$i}per\@#{$breakpoint} { @include height-percent($i); }
+            .min-w-#{$i}per\@#{$breakpoint} { @include min-width-percent($i); }
+            .min-h-#{$i}per\@#{$breakpoint} { @include min-height-percent($i); }
+            .max-w-#{$i}per\@#{$breakpoint} { @include max-width-percent($i); }
+            .max-h-#{$i}per\@#{$breakpoint} { @include max-height-percent($i); }
             .w-#{$i}\@#{$breakpoint} { @include width($i); }
             .h-#{$i}\@#{$breakpoint} { @include height($i); }
             .min-w-#{$i}\@#{$breakpoint} { @include min-width($i) }

package/src/styles/utilities/_spacing.scss

@@ -93,7 +93,7 @@
 
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
+    @media (min-width: #{$width}) {
         .mx-auto\@#{$breakpoint} { @include mx-auto; }
         .ml-auto\@#{$breakpoint} { @include ml-auto; }
         .mr-auto\@#{$breakpoint} { @include mr-auto; }

package/src/styles/utilities/_typography.scss

@@ -1,17 +1,20 @@
+// Section: Text
+// Module: Text
+
 @use 'sass:map';
 
 // Import variables
 @use '../utilities/variables' as *;
 
 // Utilities for text sizes
-@mixin text-xs { font-size: map.get($font-sizes, 'xs'); }
-@mixin text-sm { font-size: map.get($font-sizes, 'sm'); }
-@mixin text-md { font-size: map.get($font-sizes, 'md'); }
-@mixin text-lg { font-size: map.get($font-sizes, 'lg'); }
-@mixin text-xl { font-size: map.get($font-sizes, 'xl'); }
-@mixin text-2xl { font-size: map.get($font-sizes, '2xl'); }
-@mixin text-3xl { font-size: map.get($font-sizes, '3xl'); }
-@mixin text-4xl { font-size: map.get($font-sizes, '4xl'); }
+
+/**
+* Text size utility
+* @param {string} $size - The size of the text.
+*/
+@mixin text-size($size) {
+  font-size: map.get($font-sizes, $size);
+}
 
 // Font weights
 @mixin font-thin { font-weight: 100; }
@@ -58,15 +61,9 @@
 @mixin truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 
-// Generate text size utilities
-.text-xs { @include text-xs; }
-.text-sm { @include text-sm; }
-.text-md { @include text-md; }
-.text-lg { @include text-lg; }
-.text-xl { @include text-xl; }
-.text-2xl { @include text-2xl; }
-.text-3xl { @include text-3xl; }
-.text-4xl { @include text-4xl; }
+@each $size, $val in $font-sizes {
+  .text-#{$size} { @include text-size($size); }
+}
 
 // Generate font weight utilities
 .font-thin { @include font-thin; }
@@ -107,3 +104,54 @@
 .no-underline { @include no-underline; }
 
 .truncate { @include truncate; }
+
+
+@each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+        @each $size, $val in $font-sizes {
+            // .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
+            .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
+        }
+        
+        // Generate font weight utilities
+        .font-thin\@#{$breakpoint} { @include font-thin; }
+        .font-extralight\@#{$breakpoint} { @include font-extralight; }
+        .font-light\@#{$breakpoint} { @include font-light; }
+        .font-normal\@#{$breakpoint} { @include font-normal; }
+        .font-medium\@#{$breakpoint} { @include font-medium; }
+        .font-semibold\@#{$breakpoint} { @include font-semibold; }
+        .font-bold\@#{$breakpoint} { @include font-bold; }
+        .font-extrabold\@#{$breakpoint} { @include font-extrabold; }
+        .font-black\@#{$breakpoint} { @include font-black; }
+        
+        // Generate line height utilities
+        .leading-none\@#{$breakpoint} { @include leading-none; }
+        .leading-tight\@#{$breakpoint} { @include leading-tight; }
+        .leading-snug\@#{$breakpoint} { @include leading-snug; }
+        .leading-normal\@#{$breakpoint} { @include leading-normal; }
+        .leading-relaxed\@#{$breakpoint} { @include leading-relaxed; }
+        .leading-loose\@#{$breakpoint} { @include leading-loose; }
+        
+        // Generate text alignment utilities
+        .text-left\@#{$breakpoint} { @include text-left; }
+        .text-center\@#{$breakpoint} { @include text-center; }
+        .text-right\@#{$breakpoint} { @include text-right; }
+        .text-justify\@#{$breakpoint} { @include text-justify; }
+        
+        // Classes using mixins
+        .uppercase\@#{$breakpoint} { @include uppercase; }
+        .lowercase\@#{$breakpoint} { @include lowercase; }
+        .capitalize\@#{$breakpoint} { @include capitalize; }
+        .normal-case\@#{$breakpoint} { @include normal-case; }
+        
+        .italic\@#{$breakpoint} { @include italic; }
+        .not-italic\@#{$breakpoint} { @include not-italic; }
+        
+        .underline\@#{$breakpoint} { @include underline; }
+        .line-through\@#{$breakpoint} { @include line-through; }
+        .no-underline\@#{$breakpoint} { @include no-underline; }
+        
+        .truncate\@#{$breakpoint} { @include truncate; }
+    }
+}
+