@nuvoui/core 1.2.4 → 1.2.5

package/src/styles/utilities/_borders.scss

@@ -3,12 +3,36 @@
 
 @use 'sass:math';
 @use 'sass:map';
-@use '../abstracts'  as *;
-
+@use 'sass:meta';
+@use 'sass:string' as str;
+@use '../abstracts' as *;
+@use '../abstracts/functions' as FN;
 
 
 // Common border styles
 $border-styles: (solid, dashed, dotted, double, none);
+ 
+
+@function get-rounded-value($val) {
+  @if not $val { 
+    @return map.get($border-radii, 'md');
+  } @else if meta.type-of($val) == string {
+    $clean-val: $val;
+    
+    // Try to find the value in the border-radii map
+    @if map.has-key($border-radii, $clean-val) {
+      @return map.get($border-radii, $clean-val);
+    } @else if map.has-key($border-radii, str.unquote($clean-val)) {
+      @return map.get($border-radii, str.unquote($clean-val));
+    } @else {
+      // Not a predefined value, process it as a custom value
+      @return FN.fix-units($val);
+    }
+  } @else {
+    // Case 3: $val is a custom value, ensure it has units
+    @return FN.fix-units($val);
+  }
+}
 
 // -----------------------------------------------
 // MIXINS
@@ -17,14 +41,18 @@ $border-styles: (solid, dashed, dotted, double, none);
 // Core Border Mixins - improved to include style and color by default
 // SKIP Documentation
 @mixin border($val, $style: solid, $color: var(--border)) { 
+  $val: FN.fix-units($val);
+ 
   border-width: $val; 
   @if $val != 0 {
       border-style: $style;
       border-color: $color;
     }
-}
+} 
 
 @mixin border-top($val) { 
+  $val: FN.fix-units($val);
+
   border-top-width: $val; 
   @if $val != 0 {
     border-top-style: solid;
@@ -33,6 +61,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 }
 
 @mixin border-right($val) { 
+  $val: FN.fix-units($val);
+
   border-right-width: $val; 
   @if $val != 0 {
     border-right-style: solid;
@@ -41,6 +71,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 }
 
 @mixin border-bottom($val) { 
+  $val: FN.fix-units($val);
+
   border-bottom-width: $val; 
   @if $val != 0 {
     border-bottom-style: solid;
@@ -49,6 +81,8 @@ $border-styles: (solid, dashed, dotted, double, none);
 }
 
 @mixin border-left($val) { 
+  $val: FN.fix-units($val);
+
   border-left-width: $val; 
   @if $val != 0 {
     border-left-style: solid;
@@ -61,54 +95,54 @@ $border-styles: (solid, dashed, dotted, double, none);
  * @param {String} $val - The border radius value
  */
 @mixin rounded($val: null) {
-  border-radius: if($val == null, map.get($border-radii, 'md'), $val);
+  border-radius: get-rounded-value($val);
 }
 
 @mixin rounded-t($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-top-left-radius: $val;
   border-top-right-radius: $val;
 }
 
 @mixin rounded-r($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-top-right-radius: $val;
   border-bottom-right-radius: $val;
 }
 
 @mixin rounded-b($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-bottom-left-radius: $val;
   border-bottom-right-radius: $val;
 }
 
 @mixin rounded-l($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
 
   border-top-left-radius: $val;
   border-bottom-left-radius: $val;
 }
 
 @mixin rounded-tl($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-top-left-radius: $val; 
 }
 @mixin rounded-tr($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-top-right-radius: $val; 
 }
 @mixin rounded-br($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-bottom-right-radius: $val; 
 }
 @mixin rounded-bl($val: null) { 
-  $val: if($val == null, map.get($border-radii, 'md'), $val);
+  $val: get-rounded-value($val);
   
   border-bottom-left-radius: $val; 
 }
@@ -126,25 +160,6 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 @mixin pill { @include rounded(9999px); } // todo: doc missing
 
-// -----------------------------------------------
-// VARIABLES
-// -----------------------------------------------
-
-// Common border width values that are most useful
-$border-widths: (0, 1, 2, 4, 8);
-
-// Common border radius values that are most useful
-$border-radii: (
-  'xs': 0.25rem,
-  'sm': 0.375rem,
-  'md': 0.5rem,
-  'lg': 0.75rem,
-  'xl': 1rem,
-  '2xl': 1.25rem,
-  'full': 9999px,
-  'none': 0
-);
-
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------

package/src/styles/utilities/_colors.scss

@@ -108,12 +108,3 @@ $colors-primitives: ();
 @mixin gradient($direction, $colors...) {
   background-image: linear-gradient($direction, $colors);
 }
-
-// Filter Mixins
-@mixin backdrop-filter($value) {
-  backdrop-filter: $value;
-}
-
-@mixin filter($value) {
-  filter: $value;
-} 

package/src/styles/utilities/_helpers.scss

@@ -6,7 +6,7 @@
 
 @use "../abstracts/config" as *;
 
-@if $enable-debuger {
+@if $enable-debugger {
   .NuvoUI-Debugger-Wrapper {
     color: #fff;
     font-family: Arial, sans-serif;

package/src/styles/utilities/_index.scss

@@ -3,6 +3,7 @@
 // Forward all utility files
 @forward "alignment";
 @forward "animations";
+@forward "backdrop-filters";
 @forward "borders";
 @forward "colors";
 @forward "container-queries";
@@ -16,5 +17,7 @@
 @forward "sizing";
 @forward "spacing";
 @forward "tooltips";
+@forward "transforms";
 @forward "transitions";
 @forward "typography";
+@forward "z-index";

package/src/styles/utilities/_sizing.scss

@@ -3,16 +3,17 @@
 @use 'sass:math';
 @use 'sass:string' as str;
 @use '../abstracts'  as VAR;
+@use '../abstracts/functions' as FN;
 @use './container-queries' as Q;
 @use './media-queries' as MQ;
 
-@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($value) { width: FN.fix-units($value); }
+@mixin height($value) { height: FN.fix-units($value); }
+@mixin min-width($value) { min-width: FN.fix-units($value); }
+@mixin min-height($value) { min-height: FN.fix-units($value); }
+@mixin max-width($value) { max-width: FN.fix-units($value); }
+@mixin max-height($value) { max-height: FN.fix-units($value); }
+.widthx { @include width(100%); }
 @mixin width-percent($i) { width: str.unquote($i + '%'); }
 @mixin height-percent($i) { height: str.unquote($i + '%'); }
 @mixin min-width-percent($i) { min-width: str.unquote($i + '%'); }
@@ -68,8 +69,13 @@
 
   // Generate utilities from spacing map
   @each $key, $value in VAR.$spacings {
-    .w-#{$key} { @include width($value); }
-    .h-#{$key} { @include height($value); }
+    .w-#{$key},
+    .hover\:w-#{$key}:hover,
+    .group:hover .group-hover\:w-#{$key} { @include width($value); }
+    .h-#{$key},
+    .hover\:h-#{$key}:hover,
+    .group:hover .group-hover\: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); }
@@ -96,8 +102,13 @@
     @include MQ.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); }
+        .w-#{$i}\@#{$breakpoint},
+        .hover\:w-#{$i}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:w-#{$i}\@#{$breakpoint} { @include width($i); }
+        .h-#{$i}\@#{$breakpoint},
+        .hover\:h-#{$i}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:h-#{$i}\@#{$breakpoint} { @include height($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); }
@@ -105,8 +116,14 @@
       }
 
       @each $key, $value in VAR.$spacings {
-        .w-#{$key}\@#{$breakpoint} { @include width($value); }
-        .h-#{$key}\@#{$breakpoint} { @include height($value); }
+        .w-#{$key}\@#{$breakpoint},
+        .hover\:w-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\:w-#{$key}\@#{$breakpoint} { @include width($value); }
+        .h-#{$key}\@#{$breakpoint},
+        .hover\:h-#{$key}\@#{$breakpoint}:hover,
+        .group:hover .group-hover\: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); }

package/src/styles/utilities/_spacing.scss

@@ -2,6 +2,7 @@
 @use 'sass:string';
 @use 'sass:meta';
 @use '../abstracts'  as *; 
+@use '../abstracts/functions'  as FN; 
 
  
 /**
@@ -73,40 +74,6 @@
  * @see flex, grid, display
  */
 
-// -----------------------------------------------
-// HELPER FUNCTIONS
-// -----------------------------------------------
-
-/**
- * @function format-unit-value
- * @description Ensures values have appropriate units
- * @param {Number|String} $value - The value to format
- * @returns {Number|String} Value with appropriate units
- * @internal
- */
-
-@function format-unit-value($value) {
-  // Zero check
-  @if $value == 0 {
-    @return 0;
-  }
-
-  // If pure number (no units), add px
-  @if meta.type-of($value) == 'number' and math.unit($value) == "" {
-    @return $value * 1px; // Multiply by 1px instead of adding px
-  }
-
-  // If number with units (like rem), return as is
-  @if meta.type-of($value) == 'number' and math.unit($value) != "" {
-    @return $value; // Already has units, return as is
-  }
-
-   // Convert value to string for unit checking
-  $value-str: if(meta.type-of($value) == 'string', string.unquote($value), #{$value});
-  
-  @return $value-str;
-}
-
 
 // -----------------------------------------------
 // PADDING MIXINS
@@ -117,7 +84,7 @@
  * @description Sets padding on all sides
  * @param {Number|String} $val - Padding value
  */
-@mixin p($val) {  padding: format-unit-value($val); }
+@mixin p($val) {  padding: FN.fix-units($val); }
 
 /**
 * @mixin px
@@ -125,7 +92,7 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin px($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
   
   padding-inline: $val;
 }
@@ -136,7 +103,7 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin py($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
   
   padding-block: $val;
 }
@@ -147,7 +114,7 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pt($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   padding-top: $val; 
 }
@@ -158,7 +125,7 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pr($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   padding-right: $val; 
 }
@@ -169,7 +136,7 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pb($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   padding-bottom: $val; 
 }
@@ -180,7 +147,7 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin pl($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   padding-left: $val; 
 }
@@ -195,7 +162,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin m($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   margin: $val; 
 }
@@ -206,7 +173,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mx($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   margin-inline: $val;
 }
@@ -217,7 +184,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin my($val) { 
-  $val: format-unit-value($val);
+  $val: FN.fix-units($val);
 
   margin-block: $val;
 }
@@ -228,7 +195,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mt($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   margin-top: $val; 
 }
@@ -239,7 +206,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mr($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
   
   margin-right: $val; 
 }
@@ -250,7 +217,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mb($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
   
   margin-bottom: $val; 
 }
@@ -261,7 +228,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin ml($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
   
   margin-left: $val; 
 }
@@ -285,6 +252,71 @@
 @mixin mx-auto { @include ml-auto; @include mr-auto; }
 
 
+// -----------------------------------------------
+// INSET MIXINS
+// -----------------------------------------------
+
+/**
+ * @mixin inset
+ * @description Sets all inset properties (top, right, bottom, left)
+ * @param {Number|String} $val - Inset value
+ */
+ @mixin inset($val) {
+  $val: FN.fix-units($val);
+  
+  inset: $val;
+}
+
+/**
+ * @mixin inset-x
+ * @description Sets horizontal inset properties (left and right)
+ * @param {Number|String} $val - Inset value
+ */
+@mixin inset-x($val) {
+  $val: FN.fix-units($val);
+
+  left: $val;
+  right: $val;
+}
+
+/**
+ * @mixin inset-y
+ * @description Sets vertical inset properties (top and bottom)
+ * @param {Number|String} $val - Inset value
+ */
+@mixin inset-y($val) {
+  $val: FN.fix-units($val);
+
+  top: $val;
+  bottom: $val;
+}
+
+/**
+ * @mixin inset-auto
+ * @description Sets all inset properties to auto
+ */
+@mixin inset-auto {
+  inset: auto;
+}
+
+/**
+ * @mixin inset-x-auto
+ * @description Sets horizontal inset properties to auto
+ */
+@mixin inset-x-auto {
+  left: auto;
+  right: auto;
+}
+
+/**
+ * @mixin inset-y-auto
+ * @description Sets vertical inset properties to auto
+ */
+@mixin inset-y-auto {
+  top: auto;
+  bottom: auto;
+}
+
 // -----------------------------------------------
 // SPACING MIXINS
 // -----------------------------------------------
@@ -296,7 +328,7 @@
  */
 @mixin space-y($i) {
   & > * + * {
-    $i: format-unit-value($i);
+    $i: FN.fix-units($i);
     
     margin-top: $i;
   }
@@ -309,7 +341,7 @@
   */
 @mixin space-x($i) {
   & > * + * {
-    $i: format-unit-value($i);
+    $i: FN.fix-units($i);
     
     margin-left: $i;
   }
@@ -324,21 +356,21 @@
  * @description Sets gap between grid/flex children
  * @param {Number|String} $val - Gap value
  */
- @mixin gap($val) { $val: format-unit-value($val); gap: $val; }
+ @mixin gap($val) { $val: FN.fix-units($val); gap: $val; }
 
  /**
   * @mixin gap-x
   * @description Sets horizontal gap between grid/flex children
   * @param {Number|String} $val - Gap value
   */
- @mixin gap-x($val) { $val: format-unit-value($val); column-gap: $val; }
+ @mixin gap-x($val) { $val: FN.fix-units($val); column-gap: $val; }
  
  /**
   * @mixin gap-y
   * @description Sets vertical gap between grid/flex children
   * @param {Number|String} $val - Gap value
   */
- @mixin gap-y($val) { $val: format-unit-value($val); row-gap: $val; }
+ @mixin gap-y($val) { $val: FN.fix-units($val); row-gap: $val; }
 
 @if $generate-utility-classes {
   // -----------------------------------------------
@@ -355,6 +387,12 @@
 
   .gap-auto { gap: auto; }
 
+    // Auto inset utility classes
+    .inset-auto { @include inset-auto; }
+    .inset-x-auto { @include inset-x-auto; }
+    .inset-y-auto { @include inset-y-auto; }
+
+    
   // -----------------------------------------------
   // SPACING CLASSES
   // -----------------------------------------------
@@ -386,6 +424,11 @@
       // Space classes
       .space-x-#{$key} { @include space-x($value); }
       .space-y-#{$key} { @include space-y($value); }
+
+      .inset-#{$key} { @include inset($value); }
+      .inset-x-#{$key} { @include inset-x($value); }
+      .inset-y-#{$key} { @include inset-y($value); }
+    
   }
 
 
@@ -398,6 +441,9 @@
       .mx-auto\@#{$breakpoint} { @include mx-auto; }
       .ml-auto\@#{$breakpoint} { @include ml-auto; }
       .mr-auto\@#{$breakpoint} { @include mr-auto; }
+      .inset-auto\@#{$breakpoint} { @include inset-auto; }
+      .inset-x-auto\@#{$breakpoint} { @include inset-x-auto; }
+      .inset-y-auto\@#{$breakpoint} { @include inset-y-auto; }
 
       // Generate utilities from spacing map
       @each $key, $value in $spacings {
@@ -426,6 +472,10 @@
         // Space classes
         .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
         .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
+        .inset-#{$key}\@#{$breakpoint} { @include inset($value); }
+        .inset-x-#{$key}\@#{$breakpoint} { @include inset-x($value); }
+        .inset-y-#{$key}\@#{$breakpoint} { @include inset-y($value); }
+     
       }
     }
   }

package/src/styles/utilities/_tooltips.scss

@@ -180,6 +180,9 @@
   &::before,
   &::after {
     inset: auto auto auto 100%;
+    left: auto;    // Remove any left positioning
+    right: 100%;   // Position to the left of the element
+    top: 50%;
     transform: translate3d(10px, -50%, 0);
   }