@nuvoui/core 1.1.7 → 1.1.8

package/src/styles/utilities/_opacity.scss

@@ -1,12 +1,85 @@
-// _spacing.scss
+// Section: Presentation
+// Module: Opacity
 
 @use 'sass:math';
 @use './variables' as *;
 
+
+
+/**
+ * @component Opacity
+ * @description Controls element transparency with customizable opacity values and interactive states
+ *
+ * @example
+ * <!-- Basic opacity -->
+ * <div class="opacity-50">This element has 50% opacity</div>
+ * 
+ * <!-- Responsive opacity -->
+ * <div class="opacity-100 opacity-50@md">
+ *   100% opacity by default, 50% on medium screens and up
+ * </div>
+ * 
+ * <!-- Interactive states -->
+ * <div class="opacity-50 hover:opacity-100">
+ *   50% opacity, becomes fully visible on hover
+ * </div>
+ * 
+ * <button class="opacity-70 focus:opacity-100">
+ *   70% opacity, fully visible when focused
+ * </button>
+ * 
+ * <div class="opacity-75 active:opacity-100">
+ *   75% opacity, fully visible when clicked/active
+ * </div>
+ * 
+ * <!-- Group hover effect -->
+ * <div class="group">
+ *   <h3>Parent element with "group" class</h3>
+ *   <div class="opacity-0 group-hover:opacity-100">
+ *     Hidden by default, visible when parent is hovered
+ *   </div>
+ * </div>
+ * 
+ * <!-- With transition -->
+ * <div class="opacity-50 hover:opacity-100 transition-opacity">
+ *   Smooth opacity transition on hover
+ * </div>
+ *
+ * @classes
+ * Base:
+ * - opacity-{value}: Sets element opacity (0-100%)
+ *   Values: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
+ * 
+ * Interactive States:
+ * - hover:opacity-{value}: Changes opacity on mouse hover
+ * - focus:opacity-{value}: Changes opacity when element receives focus
+ * - active:opacity-{value}: Changes opacity when element is active/pressed
+ * - group-hover:opacity-{value}: Changes opacity when parent with .group class is hovered
+ * 
+ * Animation:
+ * - transition-opacity: Adds smooth transition when opacity changes
+ *
+ * @responsive
+ * All opacity classes support responsive variants using @breakpoint suffix:
+ * - opacity-50@sm: 50% opacity on small screens and up
+ * - hover:opacity-100@md: Full opacity on hover for medium screens and up
+ * 
+ * Available breakpoints: xs, sm, md, lg, xl, xxl
+ *
+ * @customization
+ * Opacity values are defined in the $percentages variable
+ * Transition timing can be customized via CSS variables
+ *
+ * @see transitions
+ */
+
 // Opacity Utilities
 @each $i in $percentages {
   .opacity-#{$i} { opacity: math.div($i, 100); }
   .hover\:opacity-#{$i}:hover { opacity: math.div($i, 100); }
+  .focus\:opacity-#{$i}:focus { opacity: math.div($i, 100); }
+  .active\:opacity-#{$i}:active { opacity: math.div($i, 100); }
+  .group:hover .group-hover\:opacity-#{$i} { opacity: math.div($i, 100); }
 }
 
 // Responsive Variants for Opacity
@@ -15,6 +88,17 @@
     @each $i in $percentages {
       .opacity-#{$i}\@#{$breakpoint} { opacity: math.div($i, 100); }
       .hover\:opacity-#{$i}\@#{$breakpoint}:hover { opacity: math.div($i, 100); }
+      .focus\:opacity-#{$i}\@#{$breakpoint}:focus { opacity: math.div($i, 100); }
+      .active\:opacity-#{$i}\@#{$breakpoint}:active { opacity: math.div($i, 100); }
+      .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} { opacity: math.div($i, 100); }
     }
   }
+}
+
+// Transition Opacity
+// TODO move to transitons may be?
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }

package/src/styles/utilities/_position.scss

@@ -1,106 +1,212 @@
 @use './variables' as *;
 
-// Position Mixins
+/**
+ * @component Position
+ * @description Controls element positioning and placement within the document flow
+ *
+ * @example
+ * <!-- Basic positioning -->
+ * <div class="relative">
+ *   <div class="absolute top-0 right-0">
+ *     Positioned in top-right corner
+ *   </div>
+ * </div>
+ * 
+ * <!-- Sticky header -->
+ * <header class="sticky top-0">
+ *   This header sticks to the top when scrolling
+ * </header>
+ * 
+ * <!-- Responsive positioning -->
+ * <div class="relative@md">
+ *   <div class="absolute@md top-2 left-2">
+ *     Only positioned on medium screens and up
+ *   </div>
+ * </div>
+ *
+ * @classes
+ * Position Types:
+ * - static: Default position, follows document flow
+ * - relative: Positioned relative to normal position
+ * - absolute: Positioned relative to nearest positioned ancestor
+ * - fixed: Positioned relative to viewport
+ * - sticky: Positioned based on scroll position
+ * 
+ * Placement:
+ * - top-{value}: Sets top position
+ * - right-{value}: Sets right position
+ * - bottom-{value}: Sets bottom position
+ * - left-{value}: Sets left position
+ * 
+ * Common values: 0, 1, 2, 3, 4, 5, 10, etc. (based on spacing scale)
+ *
+ * @responsive
+ * All position classes support responsive variants using @breakpoint suffix:
+ * - relative@md: Relative positioning on medium screens and up
+ * - top-0@lg: Zero top position on large screens
+ *
+ * @see z-index, transform
+ */
+
+
+//-----------------------------------------------
+// MIXINS
+//-----------------------------------------------
+
+ 
+/**
+ * @mixin static
+ * @description Sets position to static (default document flow)
+ * @example
+ * .element {
+ *   @include static;
+ * }
+ */
 @mixin static {
   position: static;
 }
 
+/**
+ * @mixin relative
+ * @description Sets position to relative, creating a positioning context
+ * @example
+ * .container {
+ *   @include relative;
+ * }
+ */
 @mixin relative {
   position: relative;
 }
 
+/**
+ * @mixin absolute
+ * @description Sets position to absolute, removing from normal document flow
+ * @example
+ * .popup {
+ *   @include absolute;
+ *   top: 0;
+ *   left: 0;
+ * }
+ */
 @mixin absolute {
   position: absolute;
 }
 
+/**
+ * @mixin absolute
+ * @description Sets position to absolute, removing from normal document flow
+ * @example
+ * .popup {
+ *   @include absolute;
+ *   top: 0;
+ *   left: 0;
+ * }
+ */
 @mixin fixed {
   position: fixed;
 } 
  
+/**
+ * @mixin sticky
+ * @description Creates a sticky element that remains in view during scrolling
+ * @example
+ * .nav {
+ *   @include sticky;
+ * }
+ */
 @mixin sticky {
   position: sticky;
   z-index: 999;
   top: 0;
 } 
 
-// Position Classes
-.static {
-  @include static;
-}
 
-.relative {
-  @include relative;
-}
-
-.absolute {
-  @include absolute;
-}
-
-.fixed {
-  @include fixed;
-}
-
-.sticky {
-  @include sticky;
-}
-
-// Responsive Position Classes
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    .static\@#{$breakpoint} {
-      @include static;
-    }
-    .relative\@#{$breakpoint} {
-      @include relative;
-    }
-    .absolute\@#{$breakpoint} {
-      @include absolute;
-    }
-    .fixed\@#{$breakpoint} {
-      @include fixed;
-    }
-    .sticky\@#{$breakpoint} {
-      @include sticky;
-    }
-  }
-}
-
-
-// Top, Right, Bottom, Left Mixins
-@mixin top($value) {
-  top: if($value == 0, $value, $value + px);
-}
+/**
+ * @mixin top
+ * @description Sets the top position of an element
+ * @param {Number|Length} $value - Position value (in px, rem, etc.)
+ * @example
+ * .toast {
+ *   @include absolute;
+ *   @include top(1rem);
+ * }
+ */
+ @mixin top($value) {top: $value; }
+
+ /**
+  * @mixin right
+  * @description Sets the right position of an element
+  * @param {Number|Length} $value - Position value (in px, rem, etc.)
+  * @example
+  * .badge {
+  *   @include absolute;
+  *   @include right(0);
+  * }
+  */
+ @mixin right($value) {right: $value; }
+ 
+ /**
+  * @mixin bottom
+  * @description Sets the bottom position of an element
+  * @param {Number|Length} $value - Position value (in px, rem, etc.)
+  * @example
+  * .footer {
+  *   @include fixed;
+  *   @include bottom(0);
+  * }
+  */
+ @mixin bottom($value) {bottom: $value; }
+ 
+ /**
+  * @mixin left
+  * @description Sets the left position of an element
+  * @param {Number|Length} $value - Position value (in px, rem, etc.)
+  * @example
+  * .sidebar {
+  *   @include fixed;
+  *   @include left(0);
+  * }
+  */
+ @mixin left($value) {left: $value; }
 
-@mixin right($value) {
-  right: if($value == 0, $value, $value + px);
-}
 
-@mixin bottom($value) {
-  bottom: if($value == 0, $value, $value + px);
-}
 
-@mixin left($value) {
-  left: if($value == 0, $value, $value + px);
-}
+//-----------------------------------------------
+// UTILITY CLASSES
+//-----------------------------------------------
 
-// Top, Right, Bottom, Left Classes
-@each $i in $spacings {
-  .top-#{$i} {@include top($i);}
-  .right-#{$i} {@include right($i);}
-  .bottom-#{$i} {@include bottom($i);}
-  .left-#{$i} {@include left($i);}
+// Position Classes
+.static { @include static; }
+.relative { @include relative; }
+.absolute { @include absolute; }
+.fixed { @include fixed; }
+.sticky { @include sticky; }
+
+// Placement Classes
+@each $key, $value in $spacings {
+  .top-#{$key} { @include top($value); }
+  .right-#{$key} { @include right($value); }
+  .bottom-#{$key} { @include bottom($value); }
+  .left-#{$key} { @include left($value); }
 }
 
+//-----------------------------------------------
+// RESPONSIVE CLASSES
+//-----------------------------------------------
 
-// Pixel widths based on spacing scale
+// Responsive Position Classes
 @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);}
-      }
+    .static\@#{$breakpoint} {@include static;}
+    .relative\@#{$breakpoint} {@include relative;}
+    .absolute\@#{$breakpoint} {@include absolute;}
+    .fixed\@#{$breakpoint} {@include fixed;}
+    .sticky\@#{$breakpoint} {@include sticky;}
+    @each $key, $value in $spacings {
+        .top-#{$key}\@#{$breakpoint} {@include top($value);}
+        .right-#{$key}\@#{$breakpoint} {@include right($value);}
+        .bottom-#{$key}\@#{$breakpoint} {@include bottom($value);}
+        .left-#{$key}\@#{$breakpoint} {@include left($value);}
+    }
   }
 }

package/src/styles/utilities/_shadows.scss

@@ -2,8 +2,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:string';
-@use './variables' as *;
-
+@use './variables' as VAR;
 
 // Shadow Variables
 $shadow-colors: (
@@ -59,6 +58,15 @@ $shadow-sizes: (
 }
 
 @mixin shadow($size: 'md', $color: 'default') {
+  @if not map.has-key($shadow-sizes, $size) {
+    @warn "Shadow size '#{$size}' not found in $shadow-sizes map";
+    $size: 'md'; // Fallback to default
+  }
+  @if not map.has-key($shadow-colors, $color) {
+    @warn "Shadow color '#{$color}' not found in $shadow-colors map";
+    $color: 'default'; // Fallback to default
+  }
+
   $shadow: map.get($shadow-sizes, $size);
   $shadow-color: map.get($shadow-colors, $color);
   @include shadow-base(
@@ -96,11 +104,78 @@ $shadow-sizes: (
   .shadow-inset-#{$size} {
     @include shadow-inset($size);
   }
+
+
+  // hover shadows
+  .hover\:shadow-#{$size}:hover {
+    @include shadow($size);
+  }
+  
+  .hover\:shadow-#{$size}-dark:hover {
+    @include shadow($size, 'dark');
+  }
+  
+  .hover\:shadow-inset-#{$size}:hover {
+    @include shadow-inset($size);
+  }
+  
+
+  // focus shadows
+  .focus\:shadow-#{$size}:hover {
+    @include shadow($size);
+  }
+  
+  .focus\:shadow-#{$size}-dark:hover {
+    @include shadow($size, 'dark');
+  }
+  
+  .focus\:shadow-inset-#{$size}:hover {
+    @include shadow-inset($size);
+  }
+}
+
+// Active variants
+@each $size, $values in $shadow-sizes {
+  .active\:shadow-#{$size}:active {
+    @include shadow($size);
+  }
+}
+
+// Responsive variants
+@each $breakpoint, $width in VAR.$breakpoints {
+  @media (min-width: #{$width}) {
+    // Regular shadows with breakpoints
+    @each $size, $values in $shadow-sizes {
+      .shadow-#{$size}\@#{$breakpoint} {
+        @include shadow($size);
+      }
+      
+      // Hover shadows with breakpoints
+      .hover\:shadow-#{$size}\@#{$breakpoint}:hover {
+        @include shadow($size);
+      }
+      
+      // Focus shadows with breakpoints
+      .focus\:shadow-#{$size}\@#{$breakpoint}:focus {
+        @include shadow($size);
+      }
+    }
+  }
 }
 
-// Hover variants
-.shadow-hover {
-  &:hover {
-    @include shadow('lg');
+@for $i from 1 through 5 {
+  .elevation-#{$i} {
+    @if $i == 1 {
+      @include shadow('sm');
+    } @else if $i == 2 {
+      @include shadow('md');
+    } @else if $i == 3 {
+      @include shadow('lg');
+    } @else if $i == 4 {
+      @include shadow('xl');
+    } @else if $i == 5 {
+      @include shadow('monster');
+    }
+    z-index: $i;
   }
 }

package/src/styles/utilities/_sizing.scss

@@ -1,8 +1,9 @@
 // _spacing.scss
   
 @use 'sass:math';
-@use './variables' as *;
+@use './variables' as VAR;
 @use './container-queries' as Q;
+@use './media-queries' as MC;
 
 @mixin width($value) { width: $value; }
 @mixin height($value) { height: $value; }
@@ -11,13 +12,12 @@
 @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 + '%'};  }
-@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 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%; }
@@ -28,64 +28,68 @@
 @mixin min-h-full { min-height: 100%; }
 @mixin max-h-full { max-height: 100%; }
 
+@mixin w-screen { width: 100vw; }
+@mixin h-screen { height: 100dvh; }
+
+.w-screen { @include w-screen; }
+.h-screen { @include h-screen; }
+
+// Width utilities need :not(.flex) to avoid conflicts with flex child sizing
 :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 }
+.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}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); }
+@each $i in VAR.$percentages {
+    .w-#{$i}p { @include width-percent($i); }
+    .h-#{$i}p { @include height-percent($i); }
+    .min-w-#{$i}p { @include min-width-percent($i); }
+    .min-h-#{$i}p { @include min-height-percent($i); }
+    .max-w-#{$i}p { @include max-width-percent($i); }
+    .max-h-#{$i}p { @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) }
+@each $key, $value in VAR.$spacings {
+    .w-#{$key} { @include width($value); }
+    .h-#{$key} { @include height($value); }
+    .min-w-#{$key} { @include min-width($value); }
+    .min-h-#{$key} { @include min-height($value); }
+    .max-w-#{$key} { @include max-width($value); }
+    .max-h-#{$key} { @include max-height($value); }
 }
 
 // Pixel widths based on spacing scale
-@each $breakpoint, $width in $breakpoints {
+@each $breakpoint, $width in VAR.$breakpoints {
 
     .w-#{$breakpoint} { @include width($width); }
-    .min-w-#{$breakpoint} { @include min-width($width) }
-    .max-w-#{$breakpoint} { @include max-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) {
+    @include MC.media-up ($breakpoint) {
         // Generate utilities from spacing map
+        @each $i in VAR.$percentages {
+            .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
+            .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
+            .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
+            .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
+            .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
+            .max-h-#{$i}p\@#{$breakpoint} { @include max-height-percent($i); }
+        }
 
-        @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) }
-            .min-h-#{$i}\@#{$breakpoint} { @include min-height($i) }
-            .max-w-#{$i}\@#{$breakpoint} { @include max-width($i) }
-            .max-h-#{$i}\@#{$breakpoint} { @include max-height($i) }
+        @each $key, $value in VAR.$spacings {
+            .w-#{$key}\@#{$breakpoint} { @include width($value); }
+            .h-#{$key}\@#{$breakpoint} { @include height($value); }
+            .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
+            .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
+            .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }
+            .max-h-#{$key}\@#{$breakpoint} { @include max-height($value); }
         }
     }
 }