@nuvoui/core 1.1.5 → 1.1.7

package/src/styles/mixins-map.scss

@@ -8,8 +8,10 @@
 @use 'utilities/animations' as *;
 @use 'utilities/borders' as *;
 @use 'utilities/colors' as *;
+@use 'utilities/container-queries' as *;
 @use 'utilities/display' as *;
 @use 'utilities/functions' as *;
+@use 'utilities/helpers' as *;
 @use 'utilities/media-queries' as *;
 @use 'utilities/opacity' as *;
 @use 'utilities/position' as *;
@@ -112,6 +114,8 @@
           @include self-center;
         } @else if $mixin-str == 'self-stretch' {
           @include self-stretch;
+        } @else if $mixin-str == 'self-baseline' {
+          @include self-baseline;
         } @else if $mixin-str == 'shrink' {
           @include shrink;
         } @else if $mixin-str == 'shrink-0' {
@@ -136,20 +140,24 @@
           @include flow-in-col;
         } @else if $mixin-str == 'flow-dense-items' {
           @include flow-dense-items;
-        } @else if $mixin-str == 'd-none' {
-          @include d-none;
-        } @else if $mixin-str == 'd-block' {
-          @include d-block;
-        } @else if $mixin-str == 'd-inline' {
-          @include d-inline;
-        } @else if $mixin-str == 'd-inline-block' {
-          @include d-inline-block;
+        } @else if $mixin-str == 'hide' {
+          @include hide;
+        } @else if $mixin-str == 'block' {
+          @include block;
+        } @else if $mixin-str == 'inline' {
+          @include inline;
+        } @else if $mixin-str == 'inline-block' {
+          @include inline-block;
+        } @else if $mixin-str == 'show' {
+          @include show;
         } @else if $mixin-str == 'd-tbl' {
           @include d-tbl;
         } @else if $mixin-str == 'd-tbl-row' {
           @include d-tbl-row;
         } @else if $mixin-str == 'd-tbl-cell' {
           @include d-tbl-cell;
+        } @else if $mixin-str == 'overflow-hidden' {
+          @include overflow-hidden;
         } @else if $mixin-str == 'touch' {
           @include touch;
         } @else if $mixin-str == 'print' {
@@ -198,22 +206,6 @@
           @include mr-auto;
         } @else if $mixin-str == 'mx-auto' {
           @include mx-auto;
-        } @else if $mixin-str == 'text-xs' {
-          @include text-xs;
-        } @else if $mixin-str == 'text-sm' {
-          @include text-sm;
-        } @else if $mixin-str == 'text-md' {
-          @include text-md;
-        } @else if $mixin-str == 'text-lg' {
-          @include text-lg;
-        } @else if $mixin-str == 'text-xl' {
-          @include text-xl;
-        } @else if $mixin-str == 'text-2xl' {
-          @include text-2xl;
-        } @else if $mixin-str == 'text-3xl' {
-          @include text-3xl;
-        } @else if $mixin-str == 'text-4xl' {
-          @include text-4xl;
         } @else if $mixin-str == 'font-thin' {
           @include font-thin;
         } @else if $mixin-str == 'font-extralight' {
@@ -292,6 +284,11 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include rows(str.unquote($value));
+        } @else if str.index($mixin-str, 'cols-custom(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include cols-custom(str.unquote($value));
         } @else if str.index($mixin-str, 'auto-fit(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -397,6 +394,31 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include filter(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-up(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-up(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-down(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-down(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-between(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-between(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-only(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-only(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-query(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'media-up(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -417,11 +439,6 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include media-only(str.unquote($value));
-        } @else if str.index($mixin-str, 'container-query(') == 1 {
-          $start: str.index($mixin-str, '(') + 1;
-          $end: str.length($mixin-str) - 1;
-          $value: str.slice($mixin-str, $start, $end);
-          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'supports(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -627,6 +644,11 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include gap-y(str.unquote($value));
+        } @else if str.index($mixin-str, 'text-size(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include text-size(str.unquote($value));
         }
       }
     } @else {
@@ -696,6 +718,8 @@
           @include self-center;
         } @else if $mixin-str == 'self-stretch' {
           @include self-stretch;
+        } @else if $mixin-str == 'self-baseline' {
+          @include self-baseline;
         } @else if $mixin-str == 'shrink' {
           @include shrink;
         } @else if $mixin-str == 'shrink-0' {
@@ -720,20 +744,24 @@
           @include flow-in-col;
         } @else if $mixin-str == 'flow-dense-items' {
           @include flow-dense-items;
-        } @else if $mixin-str == 'd-none' {
-          @include d-none;
-        } @else if $mixin-str == 'd-block' {
-          @include d-block;
-        } @else if $mixin-str == 'd-inline' {
-          @include d-inline;
-        } @else if $mixin-str == 'd-inline-block' {
-          @include d-inline-block;
+        } @else if $mixin-str == 'hide' {
+          @include hide;
+        } @else if $mixin-str == 'block' {
+          @include block;
+        } @else if $mixin-str == 'inline' {
+          @include inline;
+        } @else if $mixin-str == 'inline-block' {
+          @include inline-block;
+        } @else if $mixin-str == 'show' {
+          @include show;
         } @else if $mixin-str == 'd-tbl' {
           @include d-tbl;
         } @else if $mixin-str == 'd-tbl-row' {
           @include d-tbl-row;
         } @else if $mixin-str == 'd-tbl-cell' {
           @include d-tbl-cell;
+        } @else if $mixin-str == 'overflow-hidden' {
+          @include overflow-hidden;
         } @else if $mixin-str == 'touch' {
           @include touch;
         } @else if $mixin-str == 'print' {
@@ -782,22 +810,6 @@
           @include mr-auto;
         } @else if $mixin-str == 'mx-auto' {
           @include mx-auto;
-        } @else if $mixin-str == 'text-xs' {
-          @include text-xs;
-        } @else if $mixin-str == 'text-sm' {
-          @include text-sm;
-        } @else if $mixin-str == 'text-md' {
-          @include text-md;
-        } @else if $mixin-str == 'text-lg' {
-          @include text-lg;
-        } @else if $mixin-str == 'text-xl' {
-          @include text-xl;
-        } @else if $mixin-str == 'text-2xl' {
-          @include text-2xl;
-        } @else if $mixin-str == 'text-3xl' {
-          @include text-3xl;
-        } @else if $mixin-str == 'text-4xl' {
-          @include text-4xl;
         } @else if $mixin-str == 'font-thin' {
           @include font-thin;
         } @else if $mixin-str == 'font-extralight' {
@@ -876,6 +888,11 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include rows(str.unquote($value));
+        } @else if str.index($mixin-str, 'cols-custom(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include cols-custom(str.unquote($value));
         } @else if str.index($mixin-str, 'auto-fit(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -981,6 +998,31 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include filter(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-up(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-up(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-down(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-down(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-between(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-between(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-only(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-only(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-query(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'media-up(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -1001,11 +1043,6 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include media-only(str.unquote($value));
-        } @else if str.index($mixin-str, 'container-query(') == 1 {
-          $start: str.index($mixin-str, '(') + 1;
-          $end: str.length($mixin-str) - 1;
-          $value: str.slice($mixin-str, $start, $end);
-          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'supports(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -1211,6 +1248,11 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include gap-y(str.unquote($value));
+        } @else if str.index($mixin-str, 'text-size(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include text-size(str.unquote($value));
         } @else {
             @warn "Mixin '#{$mixin}' is not defined.";
         }

package/src/styles/themes/_theme.scss

@@ -5,8 +5,6 @@
 @use '../utilities/variables' as *;
 
 
- 
-
 // Generate scales for primitives
 $colors-primitives: ();
 
@@ -40,6 +38,24 @@ $colors-primitives: ();
   --button-text-color: var(--gray-100);
   --link-color: var(--primary);
   --link-hover-color: var(--primary-600);
+
+
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--background); // Light background
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #888; // Dark gray thumb
+    border-radius: 6px;
+    border: 3px solid var(--background); // Light background
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: #888 var(--background); // Dark gray thumb, light background
 }
 
 [data-theme="dark"] {
@@ -54,6 +70,17 @@ $colors-primitives: ();
   --button-text-color: var(--gray-200);
   --link-color: var(--primary);
   --link-hover-color: var(--primary-400);
+
+  &::-webkit-scrollbar-track {
+    background: var(--background);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #555;
+    border: 3px solid var(--background);
+  }
+
+  scrollbar-color: #555 var(--background); 
 }
 
 // --font-family-heading: var(--font-family-base);

package/src/styles/utilities/_borders.scss

@@ -20,13 +20,10 @@
   
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
- 
-        @each $i in 0 1 2 4 8 {
-            .border-#{$i}\@#{$breakpoint} { @include border($i); }
-        }
+    @media (min-width: #{$width}) {
         @each $i in 0 2 3 4 5 10 15 20 25 {
             .rounded-#{$i}\@#{$breakpoint} { @include border($i); }
         }
+        .rounded\@#{$breakpoint} { @include border(0.25rem); }
     }
 }

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

@@ -2,8 +2,30 @@
 @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));
 }
@@ -54,131 +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 '';
 }
-
-@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;
-            }
-        }
-    }
-}