@nuvoui/core 1.2.3 → 1.2.5

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,10 +92,9 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin px($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
   
-  padding-left: $val; 
-  padding-right: $val; 
+  padding-inline: $val;
 }
 
 /**
@@ -137,10 +103,9 @@
 * @param {Number|String} $val - Padding value
 */
 @mixin py($val) { 
-  $val: format-unit-value($val); 
-
-  padding-top: $val; 
-  padding-bottom: $val; 
+  $val: FN.fix-units($val); 
+  
+  padding-block: $val;
 }
   
 /**
@@ -149,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; 
 }
@@ -160,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; 
 }
@@ -171,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; 
 }
@@ -182,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; 
 }
@@ -197,7 +162,7 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin m($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
   margin: $val; 
 }
@@ -208,10 +173,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin mx($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val); 
 
-  margin-left: $val; 
-  margin-right: $val; 
+  margin-inline: $val;
 }
 
 /**
@@ -220,10 +184,9 @@
 * @param {Number|String} $val - Margin value
 */
 @mixin my($val) { 
-  $val: format-unit-value($val); 
+  $val: FN.fix-units($val);
 
-  margin-top: $val; 
-  margin-bottom: $val; 
+  margin-block: $val;
 }
 
 /**
@@ -232,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; 
 }
@@ -243,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; 
 }
@@ -254,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; 
 }
@@ -265,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; 
 }
@@ -289,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
 // -----------------------------------------------
@@ -300,7 +328,7 @@
  */
 @mixin space-y($i) {
   & > * + * {
-    $i: format-unit-value($i);
+    $i: FN.fix-units($i);
     
     margin-top: $i;
   }
@@ -313,7 +341,7 @@
   */
 @mixin space-x($i) {
   & > * + * {
-    $i: format-unit-value($i);
+    $i: FN.fix-units($i);
     
     margin-left: $i;
   }
@@ -328,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 {
   // -----------------------------------------------
@@ -359,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
   // -----------------------------------------------
@@ -390,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); }
+    
   }
 
 
@@ -402,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 {
@@ -430,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);
   }