@nuvoui/core 0.3.1 → 1.0.1

package/src/styles/utilities/_display.scss

@@ -1,29 +1,25 @@
-@use "sass:math";
-@use 'sass:color';
-@use 'sass:map';
 
 @use './variables' as *;
 
-
-
 // Display Mixins
 @mixin d-none { display: none; }
 @mixin d-block { display: block; }
 @mixin d-inline { display: inline; }
 @mixin d-inline-block { display: inline-block; }
-@mixin d-table { display: table; }
-@mixin d-table-row { display: table-row; }
-@mixin d-table-cell { display: table-cell; }
+@mixin d-tbl { display: table; }
+@mixin d-tbl-row { display: table-row; }
+@mixin d-tbl-cell { display: table-cell; }
 
-// Base Classes
+// Base Classes 
 .hide { @include d-none; }
 .block { @include d-block; }
 .inline { @include d-inline; }
 .inline-block { @include d-inline-block; }
+
 .d {
-  &-table { @include d-table; }
-  &-table-row { @include d-table-row; }
-  &-table-cell { @include d-table-cell; }
+  &-tbl { @include d-tbl; }
+  &-tbl-row { @include d-tbl-row; }
+  &-tbl-cell { @include d-tbl-cell; }
 }
 
 // Responsive Variants
@@ -33,10 +29,11 @@
     .block\@#{$breakpoint} { @include d-block; }
     .inline\@#{$breakpoint} { @include d-inline; }
     .inline-block\@#{$breakpoint} { @include d-inline-block; }
+    
     .d {
-      &-table\@#{$breakpoint} { @include d-table; }
-      &-table-row\@#{$breakpoint} { @include d-table-row; }
-      &-table-cell\@#{$breakpoint} { @include d-table-cell; }
+      &-tbl\@#{$breakpoint} { @include d-tbl; }
+      &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
+      &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
     }
   }
 }

package/src/styles/utilities/{_responsive.scss → _media-queries.scss}

@@ -29,8 +29,7 @@
 
 @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)) {
+    @media screen and (min-width: map.get($breakpoints, $lower)) and (max-width: (map.get($breakpoints, $upper) - 0.02px)) {
       @content;
     }
   }
@@ -43,13 +42,13 @@
     $next-breakpoint: null;
     
     @each $name, $width in $breakpoints {
-      @if $width > $min and ($next-breakpoint == null or $width < $next-breakpoint) {
+      @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) {
+      @media (min-width: $min) and (max-width: ($next-breakpoint - 1)) {
         @content;
       }
     } @else {
@@ -81,13 +80,6 @@
   }
 }
 
-// Retina displays
-@mixin retina {
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    @content;
-  }
-}
-
 // Modern feature detection
 // Example: @include supports(display: grid) { }
 @mixin supports($property) {
@@ -96,21 +88,11 @@
   }
 }
 
-// Reduced motion preference
-@mixin reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    @content;
-  }
-}
 
-// High contrast mode
-@mixin high-contrast {
-  @media (forced-colors: active) {
-    @content;
-  }
-}
 
-// Dark mode
+
+// Mixin: Dark Mode
+// Applies styles when the user prefers a dark color scheme.
 @mixin dark-mode {
   @media (prefers-color-scheme: dark) {
     @content;
@@ -130,32 +112,9 @@
   }
 }
 
-// Modern hover capabilities
-@mixin hover-device {
-  @media (hover: hover) and (pointer: fine) {
-    @content;
-  }
-}
-
 // Modern aspect ratio
 @mixin aspect-ratio($ratio) {
-  @supports (aspect-ratio: #{$ratio}) {
-    aspect-ratio: #{$ratio};
-  }
-  
-  @supports not (aspect-ratio: #{$ratio}) {
-    &::before {
-      float: left;
-      padding-top: percentage(1 / $ratio);
-      content: '';
-    }
-    
-    &::after {
-      display: block;
-      content: '';
-      clear: both;
-    }
-  }
+  aspect-ratio: #{$ratio};
 }
 
 // Dynamic viewport units (modern browsers)
@@ -174,11 +133,15 @@
   #{$property}: env(safe-area-inset-#{$position});
 }
 
-// Color scheme transition
-@mixin color-scheme-transition {
-  @media (prefers-reduced-motion: no-preference) {
-    transition: background-color 0.3s ease, color 0.3s ease;
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
   }
 }
 
-
+// High contrast mode
+@mixin high-contrast {
+  @media (forced-colors: active) {
+    @content;
+  }
+}

package/src/styles/utilities/_opacity.scss

@@ -0,0 +1,20 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+// Opacity Utilities
+@each $i in $percentages {
+  .opacity-#{$i} { opacity: math.div($i, 100); }
+  .hover\:opacity-#{$i}:hover { opacity: math.div($i, 100); }
+}
+
+// Responsive Variants for Opacity
+@each $breakpoint, $width in $breakpoints {
+  @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

@@ -1,63 +1,66 @@
 @use './variables' as *;
+
 // Position Mixins
-@mixin p-static {
+@mixin static {
   position: static;
 }
 
-@mixin p-relative {
+@mixin relative {
   position: relative;
 }
 
-@mixin p-absolute {
+@mixin absolute {
   position: absolute;
 }
 
-@mixin p-fixed {
+@mixin fixed {
   position: fixed;
-}
-
-@mixin p-sticky {
+} 
+ 
+@mixin sticky {
   position: sticky;
-}
+  z-index: 999;
+  top: 0;
+} 
 
 // Position Classes
-.p-static {
-  @include p-static;
+.static {
+  @include static;
 }
 
-.p-relative {
-  @include p-relative;
+.relative {
+  @include relative;
 }
 
-.p-absolute {
-  @include p-absolute;
+.absolute {
+  @include absolute;
 }
 
-.p-fixed {
-  @include p-fixed;
+.fixed {
+  @include fixed;
 }
 
-.p-sticky {
-  @include p-sticky;
+.sticky {
+  @include sticky;
 }
 
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    .p-static\@#{$breakpoint} {
-      @include p-static;
+    .static\@#{$breakpoint} {
+      @include static;
     }
-    .p-relative\@#{$breakpoint} {
-      @include p-relative;
+    .relative\@#{$breakpoint} {
+      @include relative;
     }
-    .p-absolute\@#{$breakpoint} {
-      @include p-absolute;
+    .absolute\@#{$breakpoint} {
+      @include absolute;
     }
-    .p-fixed\@#{$breakpoint} {
-      @include p-fixed;
+    .fixed\@#{$breakpoint} {
+      @include fixed;
     }
-    .p-sticky\@#{$breakpoint} {
-      @include p-sticky;
+    .sticky\@#{$breakpoint} {
+      @include sticky;
     }
   }
 }
@@ -81,17 +84,23 @@
 }
 
 // Top, Right, Bottom, Left Classes
-@for $i from 0 through 100{
-  .top-#{$i} {
-    @include top($i);
-  }
-  .right-#{$i} {
-    @include right($i);
-  }
-  .bottom-#{$i} {
-    @include bottom($i);
-  }
-  .left-#{$i} {
-    @include left($i);
+@each $i in $spacings {
+  .top-#{$i} {@include top($i);}
+  .right-#{$i} {@include right($i);}
+  .bottom-#{$i} {@include bottom($i);}
+  .left-#{$i} {@include left($i);}
+}
+
+
+// Pixel widths based on spacing scale
+@each $breakpoint, $width in $breakpoints {
+  @media (min-width: $width) {
+      // Generate utilities from spacing map
+      @each $i in $spacings {
+          .top-#{$i}\@#{$breakpoint} {height: if($i == 0, $i, $i + px);}
+          .right-#{$i}\@#{$breakpoint} {width: if($i == 0, $i, $i + px);}
+          .bottom-#{$i}\@#{$breakpoint} {min-width: if($i == 0, $i, $i + px);}
+          .left-#{$i}\@#{$breakpoint} {min-height: if($i == 0, $i, $i + px);}
+      }
   }
 }

package/src/styles/utilities/_shadows.scss

@@ -7,10 +7,10 @@
 
 // Shadow Variables
 $shadow-colors: (
-  'default': rgba(0, 0, 0, 0.1),
-  'dark': rgba(0, 0, 0, 0.2),
-  'darker': rgba(0, 0, 0, 0.35),
-  'darkest': rgba(0, 0, 0, 0.5),
+  'default': rgb(0 0 0 / 10%),
+  'dark': rgb(0 0 0 / 20%),
+  'darker': rgb(0 0 0 / 35%),
+  'darkest': rgb(0 0 0 / 50%),
 );
 
 $shadow-sizes: (
@@ -60,7 +60,6 @@ $shadow-sizes: (
 
 @mixin shadow($size: 'md', $color: 'default') {
   $shadow: map.get($shadow-sizes, $size);
-
   $shadow-color: map.get($shadow-colors, $color);
   @include shadow-base(
     map.get($shadow, 'x'),

package/src/styles/utilities/_sizing.scss

@@ -0,0 +1,73 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+@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-percent($i) { width: #{$i + '%'}; }
+@mixin height-percent($i) { height: #{$i + '%'};  }
+@mixin min-width-percent($i) { min-width: #{$i + '%'}; }
+@mixin min-height-percent($i) { min-height: #{$i + '%'};  }
+@mixin max-width-percent($i) { max-width: #{$i + '%'}; }
+@mixin max-height-percent($i) { max-height: #{$i + '%'};  }
+
+
+@mixin w-auto { width: auto; }
+@mixin w-full { width: 100%; }
+@mixin h-auto { height: auto; }
+@mixin h-full { height: 100%; }
+@mixin min-w-full { min-width: 100%; }
+@mixin max-w-full { max-width: 100%; }
+@mixin min-h-full { min-height: 100%; }
+@mixin max-h-full { max-height: 100%; }
+
+: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 }
+
+// Percentage widths
+@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); }
+}
+
+// Generate utilities from spacing map
+@each $i in $spacings {
+    .w-#{$i} { @include width($i); }
+    .h-#{$i} { @include height($i); }
+    .min-w-#{$i} { @include min-width($i) }
+    .min-h-#{$i} { @include min-height($i) }
+    .max-w-#{$i} { @include max-width($i) }
+    .max-h-#{$i} { @include max-height($i) }
+}
+
+// Pixel widths based on spacing scale
+@each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+        // Generate utilities from spacing map
+        @each $i in $spacings {
+            .w-#{$i}\@#{$breakpoint} { @include width($i); }
+            .h-#{$i}\@#{$breakpoint} { @include height($i); }
+            .min-w-#{$i}\@#{$breakpoint} { @include min-width($i) }
+            .min-h-#{$i}\@#{$breakpoint} { @include min-height($i) }
+            .max-w-#{$i}\@#{$breakpoint} { @include max-width($i) }
+            .max-h-#{$i}\@#{$breakpoint} { @include max-height($i) }
+        }
+    }
+}

package/src/styles/utilities/_spacing.scss

@@ -1,27 +1,46 @@
-// _spacing.scss
-
 @use 'sass:math';
 @use './variables' as *; 
 
 
 // Padding mixins
-@mixin p($val) { $val: if($val==0, $val, $val + px); padding: $val !important; }
-@mixin px($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; padding-right: $val !important; }
-@mixin py($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; padding-bottom: $val !important; }
-@mixin pt($val) { $val: if($val==0, $val, $val + px); padding-top: $val !important; }
-@mixin pr($val) { $val: if($val==0, $val, $val + px); padding-right: $val !important; }
-@mixin pb($val) { $val: if($val==0, $val, $val + px); padding-bottom: $val !important; }
-@mixin pl($val) { $val: if($val==0, $val, $val + px); padding-left: $val !important; }
+@mixin p($val) { $val: if($val == 0, $val, $val + px); padding: $val !important; }
+@mixin px($val) { $val: if($val == 0, $val, $val + px); padding-left: $val !important; padding-right: $val !important; }
+@mixin py($val) { $val: if($val == 0, $val, $val + px); padding-top: $val !important; padding-bottom: $val !important; }
+@mixin pt($val) { $val: if($val == 0, $val, $val + px); padding-top: $val !important; }
+@mixin pr($val) { $val: if($val == 0, $val, $val + px); padding-right: $val !important; }
+@mixin pb($val) { $val: if($val == 0, $val, $val + px); padding-bottom: $val !important; }
+@mixin pl($val) { $val: if($val == 0, $val, $val + px); padding-left: $val !important; }
 
 // Margin mixins
-@mixin m($val) { $val: if($val==0, $val, $val + px); margin: $val !important; }
-@mixin mx($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; margin-right: $val !important; }
-@mixin my($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; margin-bottom: $val !important; }
-@mixin mt($val) { $val: if($val==0, $val, $val + px); margin-top: $val !important; }
-@mixin mr($val) { $val: if($val==0, $val, $val + px); margin-right: $val !important; }
-@mixin mb($val) { $val: if($val==0, $val, $val + px); margin-bottom: $val !important; }
-@mixin ml($val) { $val: if($val==0, $val, $val + px); margin-left: $val !important; }
+@mixin m($val) { $val: if($val == 0, $val, $val + px); margin: $val !important; }
+@mixin mx($val) { $val: if($val == 0, $val, $val + px); margin-left: $val !important; margin-right: $val !important; }
+@mixin my($val) { $val: if($val == 0, $val, $val + px); margin-top: $val !important; margin-bottom: $val !important; }
+@mixin mt($val) { $val: if($val == 0, $val, $val + px); margin-top: $val !important; }
+@mixin mr($val) { $val: if($val == 0, $val, $val + px); margin-right: $val !important; }
+@mixin mb($val) { $val: if($val == 0, $val, $val + px); margin-bottom: $val !important; }
+@mixin ml($val) { $val: if($val == 0, $val, $val + px); margin-left: $val !important; }
+
+// Auto margin utilities
+@mixin ml-auto { margin-left: auto; }
+@mixin mr-auto { margin-right: auto; }
+@mixin mx-auto { @include ml-auto; @include mr-auto; }
+
+// Spacing map
+@mixin space-y($i) { & > * + * { margin-top: if($i == 0, 0, $i + px); } }
+@mixin space-x($i) { & > * + * { margin-left: if($i == 0, 0, $i + px); } }
+
+
+// Gap Mixins
+@mixin gap($value) { gap: if($value == 0, $value, $value + px); }
+@mixin gap-x($value) { column-gap: if($value == 0, $value, $value + px); }
+@mixin gap-y($value) { row-gap: if($value == 0, $value, $value + px); }
+
+.mx-auto { @include mx-auto; }
+.ml-auto { @include ml-auto; }
+.mr-auto { @include mr-auto; }
 
+// Gap Classes
+.gap-auto { gap: auto; }
 
 // Generate utilities from spacing map
 @each $i in $spacings {
@@ -42,13 +61,25 @@
     .mr-#{$i} { @include mr($i); }
     .mb-#{$i} { @include mb($i); }
     .ml-#{$i} { @include ml($i); }
-    // .gap-#{$key} { gap: $value; }
+    
+    // Gap classes
+    .gap-#{$i} { @include gap($i); }
+    .gap-x-#{$i} { @include gap-x($i); }
+    .gap-y-#{$i} { @include gap-y($i); }
+
+    // Space classes
+    .space-x-#{$i} { @include space-x($i); }
+    .space-y-#{$i} { @include space-y($i); }
 }
 
 
 // Responsive Position 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 $i in $spacings {
             // Padding classes
@@ -68,52 +99,15 @@
             .mr-#{$i}\@#{$breakpoint} { @include mr($i); }
             .mb-#{$i}\@#{$breakpoint} { @include mb($i); }
             .ml-#{$i}\@#{$breakpoint} { @include ml($i); }
-        }
-    }
-}
 
-// Auto margin utilities
-@mixin ml-auto { margin-left: auto; }
-@mixin mr-auto { margin-right: auto; }
-@mixin mx-auto { @include ml-auto; @include mr-auto; }
-
-.mx-auto { @include mx-auto; }
-
-
-.ml-auto { @include ml-auto; }
-.mr-auto { @include mr-auto; }
-
-
-
-// Gap Mixins
-@mixin gap($value) {
-    gap: if($value == 0, $value, $value + px);
-}
-
-@mixin gap-x($value) {
-    column-gap: if($value == 0, $value, $value + px);
-}
-
-@mixin gap-y($value) {
-    row-gap: if($value == 0, $value, $value + px);
-}
-
-// Gap Classes
-.gap-auto { gap: auto; }
-
-@each $i in $spacings {
-    .gap-#{$i} { @include gap($i); }
-    .gap-x-#{$i} { @include gap-x($i); }
-    .gap-y-#{$i} { @include gap-y($i); }
-}
-
-// Responsive Gap Classes
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
-    @each $i in $spacings {
-      .gap-#{$i}\@#{$breakpoint} { gap: $i; }
-      .gap-x-#{$i}\@#{$breakpoint} { column-gap: $i; }
-      .gap-y-#{$i}\@#{$breakpoint} { row-gap: $i; }
+            .gap-#{$i}\@#{$breakpoint} { gap: $i; }
+            .gap-x-#{$i}\@#{$breakpoint} { column-gap: $i; }
+            .gap-y-#{$i}\@#{$breakpoint} { row-gap: $i; }
+      
+            
+            // Space classes
+            .space-x-#{$i}\@#{$breakpoint} { @include space-x($i); }
+            .space-y-#{$i}\@#{$breakpoint} { @include space-y($i); }
+        }
     }
-  }
 }