@nuvoui/core 1.1.5 → 1.1.7

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,91 +1,59 @@
+// 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) {
-
-  $-lower: null;
-  $-upper: null;
-
-  @if map.has-key($breakpoints, $lower) {
-    $-lower: map.get($breakpoints, $lower);
-  } @else if meta.type-of($lower) == number {
-    $-lower: $lower - 0.02px;
-  } @else {
-    @warn 'Unknown lower breakpoint: #{$lower}';
+  $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;
   }
+}
 
-  @if map.has-key($breakpoints, $upper) {
-    $-upper: map.get($breakpoints, $upper);
-  } @else if meta.type-of($upper) == number {
-    $-upper: $upper - 0.02px;
-  } @else {
-    @warn 'Unknown uppper breakpoint: #{$upper}';
-  }
+// Only at specific breakpoint
+@mixin media-only($breakpoint) { // BUG BUG BUG BUG BUG
+  $min: FN.get-breakpoint-value($breakpoint);
+  $next-breakpoint: null;
   
-  @if $-lower and $-upper {
-    @media screen and (min-width: $-lower) and (max-width: $-upper) {
-      @content;
+  @each $name, $width in $breakpoints {
+    @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
+      $next-breakpoint: #{$width};
     }
   }
-}
-
-// 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;
     }
-    
-    @if $next-breakpoint {
-      @media (min-width: $min) and (max-width: ($next-breakpoint - 1)) {
-        @content;
-      }
-    } @else {
-      @media (min-width: $min) {
-        @content;
-      }
+  } @else {
+    @media (min-width: #{$min}) {
+      @content;
     }
   }
 }
 
-// Example: @include container(45em) { }
-@mixin container-query($size) {
-  @container (min-width: $size) {
-    @content;
-  }
-}
-
 // Touch devices
 @mixin touch {
   @media (hover: none) and (pointer: coarse) {

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

@@ -1,14 +1,15 @@
 // _spacing.scss
-
+  
 @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); }
-@mixin min-width($value) { min-width: if($value == 0, $value, $value + px); }
-@mixin min-height($value) { min-height: if($value == 0, $value, $value + px); }
-@mixin max-width($value) { max-width: if($value == 0, $value, $value + px); }
-@mixin max-height($value) { max-height: if($value == 0, $value, $value + px); }
+@mixin width($value) { width: $value; }
+@mixin height($value) { height: $value; }
+@mixin min-width($value) { min-width: $value; }
+@mixin min-height($value) { min-height: $value; }
+@mixin max-width($value) { max-width: $value; }
+@mixin max-height($value) { max-height: $value; }
 
 @mixin width-percent($i) { width: #{$i + '%'}; }
 @mixin height-percent($i) { height: #{$i + '%'};  }
@@ -59,8 +60,19 @@
 
 // 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); }

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; }
+    }
+}
+

package/src/styles/utilities/_variables.scss

@@ -4,10 +4,12 @@
 $enable-debuger: false !default;
 $enable-dark-mode: true !default;
 $enable-rtl: true !default;;
-$enable-reduced-motion: true !default;;
-
+$enable-reduced-motion: true !default;
 $column-count: 12 !default;
 
+$default-container-name: nuvoui-container !default;
+$nuvoui-container-queries: false !default;
+
 $primary: #007bff !default;
 $secondary: #6c757d !default;
 $success: #28a745 !default;
@@ -86,17 +88,6 @@ $font-sizes: (
   '3xl': 2rem,    // 32px
   '4xl': 2.5rem   // 40px
 ) !default;
- 
-$padding-map: (
-  'xs': 0.25rem 0.5rem,
-  'sm': 0.375rem 0.75rem,
-  'md': 0.5rem 1rem,
-  'lg': 0.75rem 1.5rem,
-  'xl': 1rem 2rem,
-  '2xl': 1.25rem 2.5rem,
-  '3xl': 1.5rem 3rem,
-  '4xl': 2rem 4rem, 
-) !default;
 
 $spacings: (
   0,1,2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,150,200,250,300,350,400,450,500