@nuvoui/core 1.3.5 → 1.4.0

package/src/styles/utilities/_helpers.scss

@@ -4,128 +4,128 @@
 @use "sass:list";
 @use "sass:meta";
 
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
-
-@if VAR.$enable-debugger {
-  .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;
-    }
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+
+@if config-flags.$enable-debugger {
+    .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;
+        }
 
-    &.bottom-right {
-      inset: auto 10px 10px auto;
-      text-align: right;
-    }
+        &.top-right {
+            inset: 10px 10px auto 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;
-    }
+        &.bottom-left {
+            inset: auto auto 10px 10px;
+            text-align: left;
+        }
 
-    .NuvoUI-Debugger-Main {
-      $breakpoint-keys: map.keys(VAR.$breakpoints);
-      $total: list.length($breakpoint-keys);
+        &.bottom-right {
+            inset: auto 10px 10px auto;
+            text-align: right;
+        }
 
-      &::before,
-      &::after {
-        font-family: "Courier New", Courier, monospace;
-        font-size: 0.8em;
-        display: block;
-      }
+        .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;
+        }
 
-      &::before {
-        font-weight: bold;
-      }
+        .NuvoUI-Debugger-Main {
+            $breakpoint-keys: map.keys(config-breakpoint.$breakpoints);
+            $total: list.length($breakpoint-keys);
 
-      @for $i from 1 through $total {
-        $current: list.nth($breakpoint-keys, $i);
-        $current-width: map.get(VAR.$breakpoints, $current);
+            &::before,
+            &::after {
+                font-family: "Courier New", Courier, monospace;
+                font-size: 0.8em;
+                display: block;
+            }
 
-        @if $i == 1 {
-          @media (max-width: #{$current-width}) {
             &::before {
-              content: "Screen: #{$current}";
+                font-weight: bold;
             }
-          }
-        } @else {
-          $prev: list.nth($breakpoint-keys, $i - 1);
-          $prev-width: map.get(VAR.$breakpoints, $prev);
 
-          @media (min-width: #{$prev-width}) and (max-width: (#{$current-width} - 1)) {
-            &::before {
-              content: "Screen: #{$current}";
+            @for $i from 1 through $total {
+                $current: list.nth($breakpoint-keys, $i);
+                $current-width: map.get(config-breakpoint.$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(config-breakpoint.$breakpoints, $prev);
+
+                    @media (min-width: #{$prev-width}) and (max-width: (#{$current-width} - 1)) {
+                        &::before {
+                            content: "Screen: #{$current}";
+                        }
+                    }
+                }
             }
-          }
-        }
-      }
 
-      &::after {
-        content: attr(data-size);
-      }
-    }
+            &::after {
+                content: attr(data-size);
+            }
+        }
 
-    .NuvoUI-Debugger {
-      margin-top: 10px;
+        .NuvoUI-Debugger {
+            margin-top: 10px;
 
-      &::before,
-      &::after {
-        font-family: "Courier New", Courier, monospace;
-        font-size: 0.8em;
-        display: block;
-      }
+            &::before,
+            &::after {
+                font-family: "Courier New", Courier, monospace;
+                font-size: 0.8em;
+                display: block;
+            }
 
-      &::before {
-        font-weight: bold;
-        content: attr(data-element);
-      }
+            &::before {
+                font-weight: bold;
+                content: attr(data-element);
+            }
 
-      &::after {
-        content: attr(data-size);
-      }
-    }
+            &::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;
-      }
+        .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/_opacity.scss

@@ -3,8 +3,10 @@
 
 @use "sass:math";
 @use "sass:meta";
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../config/spacing" as config-spacing;
+@use "../functions/feature-flags" as fn-flags;
 
 // @component Opacity
 // @description Controls element transparency with customizable opacity values and interactive states
@@ -58,33 +60,33 @@
 //  @see transitions
 
 @mixin opacity($value) {
-  opacity: calc(#{$value} / 100);
+    opacity: calc(#{$value} / 100);
 }
 
-@if FN.feature-enabled("opacity") {
-  // Opacity Utilities
-  @each $i in VAR.$percentages {
-    #{VAR.$parent-selector} .opacity-#{$i},
-    #{VAR.$parent-selector} .hover\:opacity-#{$i}:hover,
-    #{VAR.$parent-selector} .focus\:opacity-#{$i}:focus,
-    #{VAR.$parent-selector} .active\:opacity-#{$i}:active,
-    #{VAR.$parent-selector} .group:hover .group-hover\:opacity-#{$i} {
-      @include opacity($i);
+@if fn-flags.feature-enabled("opacity") {
+    // Opacity Utilities
+    @each $i in config-spacing.$percentages {
+        #{config-flags.$parent-selector} .opacity-#{$i},
+        #{config-flags.$parent-selector} .hover\:opacity-#{$i}:hover,
+        #{config-flags.$parent-selector} .focus\:opacity-#{$i}:focus,
+        #{config-flags.$parent-selector} .active\:opacity-#{$i}:active,
+        #{config-flags.$parent-selector} .group:hover .group-hover\:opacity-#{$i} {
+            @include opacity($i);
+        }
     }
-  }
 
-  // Responsive Variants for Opacity
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      @each $i in VAR.$percentages {
-        #{VAR.$parent-selector} .opacity-#{$i}\@#{$breakpoint},
-        #{VAR.$parent-selector} .hover\:opacity-#{$i}\@#{$breakpoint}:hover,
-        #{VAR.$parent-selector} .focus\:opacity-#{$i}\@#{$breakpoint}:focus,
-        #{VAR.$parent-selector} .active\:opacity-#{$i}\@#{$breakpoint}:active,
-        #{VAR.$parent-selector} .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
-          @include opacity($i);
+    // Responsive Variants for Opacity
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            @each $i in config-spacing.$percentages {
+                #{config-flags.$parent-selector} .opacity-#{$i}\@#{$breakpoint},
+                #{config-flags.$parent-selector} .hover\:opacity-#{$i}\@#{$breakpoint}:hover,
+                #{config-flags.$parent-selector} .focus\:opacity-#{$i}\@#{$breakpoint}:focus,
+                #{config-flags.$parent-selector} .active\:opacity-#{$i}\@#{$breakpoint}:active,
+                #{config-flags.$parent-selector} .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
+                    @include opacity($i);
+                }
+            }
         }
-      }
     }
-  }
 }

package/src/styles/utilities/_position.scss

@@ -1,5 +1,8 @@
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../config/spacing" as config-spacing;
+@use "../functions/feature-flags" as fn-flags;
+@use "../functions/units" as fn-units;
 
 // @component Position
 // @description Controls element positioning and placement within the document flow
@@ -50,7 +53,7 @@
 //   @include static;
 // }
 @mixin static {
-  position: static;
+    position: static;
 }
 
 // @mixin relative
@@ -60,7 +63,7 @@
 //   @include relative;
 // }
 @mixin relative {
-  position: relative;
+    position: relative;
 }
 
 // @mixin absolute
@@ -72,7 +75,7 @@
 //   left: 0;
 // }
 @mixin absolute {
-  position: absolute;
+    position: absolute;
 }
 
 // @mixin absolute
@@ -84,7 +87,7 @@
 //   left: 0;
 // }
 @mixin fixed {
-  position: fixed;
+    position: fixed;
 }
 
 // @mixin sticky
@@ -94,9 +97,9 @@
 //   @include sticky;
 // }
 @mixin sticky {
-  position: sticky;
-  z-index: 999;
-  top: 0;
+    position: sticky;
+    z-index: 999;
+    top: 0;
 }
 
 // @mixin top
@@ -108,7 +111,7 @@
 //   @include top(1rem);
 // }
 @mixin top($value) {
-  top: FN.fix-units($value);
+    top: fn-units.fix-units($value);
 }
 
 // @mixin right
@@ -120,7 +123,7 @@
 //   @include right(0);
 // }
 @mixin right($value) {
-  right: FN.fix-units($value);
+    right: fn-units.fix-units($value);
 }
 
 // @mixin bottom
@@ -132,7 +135,7 @@
 //  @include bottom(0);
 // }
 @mixin bottom($value) {
-  bottom: FN.fix-units($value);
+    bottom: fn-units.fix-units($value);
 }
 
 // @mixin left
@@ -144,148 +147,148 @@
 //  @include left(0);
 // }
 @mixin left($value) {
-  left: $value;
+    left: $value;
 }
 
 // todo: Documentation
 @mixin absolute-center {
-  position: absolute;
-  left: 50%;
-  top: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
 
-  --translate-x: -50%;
-  --translate-y: -50%;
+    --translate-x: -50%;
+    --translate-y: -50%;
 
-  transform: translateX(var(--translate-x)) 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));
+    transform: translateX(var(--translate-x)) 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));
 }
 
 // todo: Documentation
 // Fractional and percentage placements
 $position-fractions: (
-  "25p": 25%,
-  "33p": 33.333%,
-  "50p": 50%,
-  "66p": 66.667%,
-  "75p": 75%,
-  "100p": 100%,
+    "25p": 25%,
+    "33p": 33.333%,
+    "50p": 50%,
+    "66p": 66.667%,
+    "75p": 75%,
+    "100p": 100%,
 );
 
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
-@if FN.feature-enabled("position") {
-  // Position Classes
-  #{VAR.$parent-selector} .static {
-    @include static;
-  }
-
-  #{VAR.$parent-selector} .relative {
-    @include relative;
-  }
-
-  #{VAR.$parent-selector} .absolute {
-    @include absolute;
-  }
-
-  #{VAR.$parent-selector} .fixed {
-    @include fixed;
-  }
-
-  #{VAR.$parent-selector} .sticky {
-    @include sticky;
-  }
-
-  #{VAR.$parent-selector} .absolute-center {
-    @include absolute-center;
-  }
-
-  @each $key, $value in $position-fractions {
-    #{VAR.$parent-selector} .top-#{$key} {
-      @include top($value);
-    }
-    #{VAR.$parent-selector} .right-#{$key} {
-      @include right($value);
-    }
-    #{VAR.$parent-selector} .bottom-#{$key} {
-      @include bottom($value);
-    }
-    #{VAR.$parent-selector} .left-#{$key} {
-      @include left($value);
+@if fn-flags.feature-enabled("position") {
+    // Position Classes
+    #{config-flags.$parent-selector} .static {
+        @include static;
     }
-  }
 
-  // Placement Classes
-  @each $key, $value in VAR.$spacings {
-    #{VAR.$parent-selector} .top-#{$key} {
-      @include top($value);
-    }
-    #{VAR.$parent-selector} .right-#{$key} {
-      @include right($value);
-    }
-    #{VAR.$parent-selector} .bottom-#{$key} {
-      @include bottom($value);
-    }
-    #{VAR.$parent-selector} .left-#{$key} {
-      @include left($value);
+    #{config-flags.$parent-selector} .relative {
+        @include relative;
     }
-  }
 
-  // -----------------------------------------------
-  // RESPONSIVE CLASSES
-  // -----------------------------------------------
-
-  // Responsive Position Classes
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      #{VAR.$parent-selector} .static\@#{$breakpoint} {
-        @include static;
-      }
-      #{VAR.$parent-selector} .relative\@#{$breakpoint} {
-        @include relative;
-      }
-      #{VAR.$parent-selector} .absolute\@#{$breakpoint} {
+    #{config-flags.$parent-selector} .absolute {
         @include absolute;
-      }
-      #{VAR.$parent-selector} .fixed\@#{$breakpoint} {
+    }
+
+    #{config-flags.$parent-selector} .fixed {
         @include fixed;
-      }
-      #{VAR.$parent-selector} .sticky\@#{$breakpoint} {
+    }
+
+    #{config-flags.$parent-selector} .sticky {
         @include sticky;
-      }
-      #{VAR.$parent-selector} .absolute-center\@#{$breakpoint} {
+    }
+
+    #{config-flags.$parent-selector} .absolute-center {
         @include absolute-center;
-      }
+    }
 
-      // Fractional responsive placements
-      @each $key, $value in $position-fractions {
-        #{VAR.$parent-selector} .top-#{$key}\@#{$breakpoint} {
-          @include top($value);
+    @each $key, $value in $position-fractions {
+        #{config-flags.$parent-selector} .top-#{$key} {
+            @include top($value);
         }
-        #{VAR.$parent-selector} .right-#{$key}\@#{$breakpoint} {
-          @include right($value);
+        #{config-flags.$parent-selector} .right-#{$key} {
+            @include right($value);
         }
-        #{VAR.$parent-selector} .bottom-#{$key}\@#{$breakpoint} {
-          @include bottom($value);
+        #{config-flags.$parent-selector} .bottom-#{$key} {
+            @include bottom($value);
         }
-        #{VAR.$parent-selector} .left-#{$key}\@#{$breakpoint} {
-          @include left($value);
+        #{config-flags.$parent-selector} .left-#{$key} {
+            @include left($value);
         }
-      }
+    }
 
-      @each $key, $value in VAR.$spacings {
-        #{VAR.$parent-selector} .top-#{$key}\@#{$breakpoint} {
-          @include top($value);
+    // Placement Classes
+    @each $key, $value in config-spacing.$spacings {
+        #{config-flags.$parent-selector} .top-#{$key} {
+            @include top($value);
+        }
+        #{config-flags.$parent-selector} .right-#{$key} {
+            @include right($value);
         }
-        #{VAR.$parent-selector} .right-#{$key}\@#{$breakpoint} {
-          @include right($value);
+        #{config-flags.$parent-selector} .bottom-#{$key} {
+            @include bottom($value);
         }
-        #{VAR.$parent-selector} .bottom-#{$key}\@#{$breakpoint} {
-          @include bottom($value);
+        #{config-flags.$parent-selector} .left-#{$key} {
+            @include left($value);
         }
-        #{VAR.$parent-selector} .left-#{$key}\@#{$breakpoint} {
-          @include left($value);
+    }
+
+    // -----------------------------------------------
+    // RESPONSIVE CLASSES
+    // -----------------------------------------------
+
+    // Responsive Position Classes
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            #{config-flags.$parent-selector} .static\@#{$breakpoint} {
+                @include static;
+            }
+            #{config-flags.$parent-selector} .relative\@#{$breakpoint} {
+                @include relative;
+            }
+            #{config-flags.$parent-selector} .absolute\@#{$breakpoint} {
+                @include absolute;
+            }
+            #{config-flags.$parent-selector} .fixed\@#{$breakpoint} {
+                @include fixed;
+            }
+            #{config-flags.$parent-selector} .sticky\@#{$breakpoint} {
+                @include sticky;
+            }
+            #{config-flags.$parent-selector} .absolute-center\@#{$breakpoint} {
+                @include absolute-center;
+            }
+
+            // Fractional responsive placements
+            @each $key, $value in $position-fractions {
+                #{config-flags.$parent-selector} .top-#{$key}\@#{$breakpoint} {
+                    @include top($value);
+                }
+                #{config-flags.$parent-selector} .right-#{$key}\@#{$breakpoint} {
+                    @include right($value);
+                }
+                #{config-flags.$parent-selector} .bottom-#{$key}\@#{$breakpoint} {
+                    @include bottom($value);
+                }
+                #{config-flags.$parent-selector} .left-#{$key}\@#{$breakpoint} {
+                    @include left($value);
+                }
+            }
+
+            @each $key, $value in config-spacing.$spacings {
+                #{config-flags.$parent-selector} .top-#{$key}\@#{$breakpoint} {
+                    @include top($value);
+                }
+                #{config-flags.$parent-selector} .right-#{$key}\@#{$breakpoint} {
+                    @include right($value);
+                }
+                #{config-flags.$parent-selector} .bottom-#{$key}\@#{$breakpoint} {
+                    @include bottom($value);
+                }
+                #{config-flags.$parent-selector} .left-#{$key}\@#{$breakpoint} {
+                    @include left($value);
+                }
+            }
         }
-      }
     }
-  }
 }