@nuvoui/core 1.2.4 → 1.2.6

package/src/styles/utilities/_spacing.scss

@@ -1,9 +1,9 @@
-@use 'sass:math';
-@use 'sass:string';
-@use 'sass:meta';
-@use '../abstracts'  as *; 
+@use "sass:math";
+@use "sass:string";
+@use "sass:meta";
+@use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
- 
 /**
  * @component Spacing
  * @description Controls element margins, padding, gaps, and spacing between children
@@ -73,41 +73,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,17 +82,17 @@
  * @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
 * @description Sets horizontal padding (left and right)
 * @param {Number|String} $val - Padding value
 */
-@mixin px($val) { 
-  $val: format-unit-value($val); 
-  
-  padding-inline: $val;
+@mixin px($val) {
+  padding-inline: FN.fix-units($val);
 }
 
 /**
@@ -135,21 +100,17 @@
 * @description Sets vertical padding (top and bottom)
 * @param {Number|String} $val - Padding value
 */
-@mixin py($val) { 
-  $val: format-unit-value($val); 
-  
-  padding-block: $val;
+@mixin py($val) {
+  padding-block: FN.fix-units($val);
 }
-  
+
 /**
 * @mixin pt
 * @description Sets padding-top
 * @param {Number|String} $val - Padding value
 */
-@mixin pt($val) { 
-  $val: format-unit-value($val); 
-
-  padding-top: $val; 
+@mixin pt($val) {
+  padding-top: FN.fix-units($val);
 }
 
 /**
@@ -157,10 +118,8 @@
 * @description Sets padding-right
 * @param {Number|String} $val - Padding value
 */
-@mixin pr($val) { 
-  $val: format-unit-value($val); 
-
-  padding-right: $val; 
+@mixin pr($val) {
+  padding-right: FN.fix-units($val);
 }
 
 /**
@@ -168,10 +127,8 @@
 * @description Sets padding-bottom
 * @param {Number|String} $val - Padding value
 */
-@mixin pb($val) { 
-  $val: format-unit-value($val); 
-
-  padding-bottom: $val; 
+@mixin pb($val) {
+  padding-bottom: FN.fix-units($val);
 }
 
 /**
@@ -179,10 +136,8 @@
 * @description Sets padding-left
 * @param {Number|String} $val - Padding value
 */
-@mixin pl($val) { 
-  $val: format-unit-value($val); 
-
-  padding-left: $val; 
+@mixin pl($val) {
+  padding-left: FN.fix-units($val);
 }
 
 // -----------------------------------------------
@@ -194,10 +149,8 @@
 * @description Sets margin on all sides
 * @param {Number|String} $val - Margin value
 */
-@mixin m($val) { 
-  $val: format-unit-value($val); 
-
-  margin: $val; 
+@mixin m($val) {
+  margin: FN.fix-units($val);
 }
 
 /**
@@ -205,10 +158,8 @@
 * @description Sets horizontal margin (left and right)
 * @param {Number|String} $val - Margin value
 */
-@mixin mx($val) { 
-  $val: format-unit-value($val); 
-
-  margin-inline: $val;
+@mixin mx($val) {
+  margin-inline: FN.fix-units($val);
 }
 
 /**
@@ -216,10 +167,10 @@
 * @description Sets vertical margin (top and bottom)
 * @param {Number|String} $val - Margin value
 */
-@mixin my($val) { 
-  $val: format-unit-value($val);
+@mixin my($val) {
+  $val: FN.fix-units($val);
 
-  margin-block: $val;
+  margin-block: FN.fix-units($val);
 }
 
 /**
@@ -227,21 +178,17 @@
 * @description Sets margin-top
 * @param {Number|String} $val - Margin value
 */
-@mixin mt($val) { 
-  $val: format-unit-value($val); 
-
-  margin-top: $val; 
+@mixin mt($val) {
+  margin-top: FN.fix-units($val, VAR.$default-unit);
 }
 
 /**
 * @mixin mr
-* @description Sets margin-right
+* @description Sets margin-right 
 * @param {Number|String} $val - Margin value
 */
-@mixin mr($val) { 
-  $val: format-unit-value($val); 
-  
-  margin-right: $val; 
+@mixin mr($val) {
+  margin-right: FN.fix-units($val);
 }
 
 /**
@@ -249,10 +196,8 @@
 * @description Sets margin-bottom
 * @param {Number|String} $val - Margin value
 */
-@mixin mb($val) { 
-  $val: format-unit-value($val); 
-  
-  margin-bottom: $val; 
+@mixin mb($val) {
+  margin-bottom: FN.fix-units($val);
 }
 
 /**
@@ -260,30 +205,99 @@
 * @description Sets margin-left
 * @param {Number|String} $val - Margin value
 */
-@mixin ml($val) { 
-  $val: format-unit-value($val); 
-  
-  margin-left: $val; 
+@mixin ml($val) {
+  margin-left: FN.fix-units($val);
 }
 
 /**
 * @mixin ml-auto
 * @description Sets margin-left to auto
 */
-@mixin ml-auto {   margin-left: auto; } 
+@mixin ml-auto {
+  margin-left: auto;
+}
 
 /**
 * @mixin mr-auto
 * @description Sets margin-right to auto
 */
-@mixin mr-auto {   margin-right: auto; } 
+@mixin mr-auto {
+  margin-right: auto;
+}
 
 /**
 * @mixin mx-auto
 * @description Centers element horizontally using auto margins
 */
-@mixin mx-auto { @include ml-auto; @include mr-auto; }
+@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: FN.fix-units($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,22 +310,18 @@
  */
 @mixin space-y($i) {
   & > * + * {
-    $i: format-unit-value($i);
-    
-    margin-top: $i;
+    margin-top: FN.fix-units($i);
   }
 }
 
- /**
+/**
   * @mixin space-x
   * @description Adds horizontal spacing between direct children
   * @param {Number|String} $i - Space amount
   */
 @mixin space-x($i) {
   & > * + * {
-    $i: format-unit-value($i);
-    
-    margin-left: $i;
+    margin-left: FN.fix-units($i);
   }
 }
 
@@ -324,108 +334,246 @@
  * @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) {
+  gap: FN.fix-units($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) {
+  column-gap: FN.fix-units($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) {
+  row-gap: FN.fix-units($val);
+}
 
-@if $generate-utility-classes {
+@if VAR.$generate-utility-classes {
   // -----------------------------------------------
   // AUTO MARGIN UTILITY CLASSES
   // -----------------------------------------------
 
-  .mx-auto { @include mx-auto; }
-  .ml-auto { @include ml-auto; }
-  .mr-auto { @include mr-auto; }
+  #{VAR.$parent-selector} .mx-auto {
+    @include mx-auto;
+  }
+
+  #{VAR.$parent-selector} .ml-auto {
+    @include ml-auto;
+  }
+
+  #{VAR.$parent-selector} .mr-auto {
+    @include mr-auto;
+  }
 
   // -----------------------------------------------
   // GAP AUTO CLASS
   // -----------------------------------------------
 
-  .gap-auto { gap: auto; }
+  #{VAR.$parent-selector} .gap-auto {
+    gap: auto;
+  }
+
+  // Auto inset utility classes
+  #{VAR.$parent-selector} .inset-auto {
+    @include inset-auto;
+  }
+
+  #{VAR.$parent-selector} .inset-x-auto {
+    @include inset-x-auto;
+  }
+
+  #{VAR.$parent-selector} .inset-y-auto {
+    @include inset-y-auto;
+  }
 
   // -----------------------------------------------
   // SPACING CLASSES
   // -----------------------------------------------
 
-  @each $key, $value in $spacings {
-      // Padding classes
-      .p-#{$key} { @include p($value); }
-      .px-#{$key} { @include px($value); }
-      .py-#{$key} { @include py($value); }
-      .pt-#{$key} { @include pt($value); }
-      .pr-#{$key} { @include pr($value); }
-      .pb-#{$key} { @include pb($value); }
-      .pl-#{$key} { @include pl($value); }
-
-      // Margin classes
-      .m-#{$key} { @include m($value); }
-      .mx-#{$key} { @include mx($value); }
-      .my-#{$key} { @include my($value); }
-      .mt-#{$key} { @include mt($value); }
-      .mr-#{$key} { @include mr($value); }
-      .mb-#{$key} { @include mb($value); }
-      .ml-#{$key} { @include ml($value); }
-      
-      // Gap classes
-      .gap-#{$key} { @include gap($value); }
-      .gap-x-#{$key} { @include gap-x($value); }
-      .gap-y-#{$key} { @include gap-y($value); }
-
-      // Space classes
-      .space-x-#{$key} { @include space-x($value); }
-      .space-y-#{$key} { @include space-y($value); }
-  }
+  @each $key, $value in VAR.$spacings {
+    // Padding classes
+    #{VAR.$parent-selector} .p-#{$key} {
+      @include p($value);
+    }
+    #{VAR.$parent-selector} .px-#{$key} {
+      @include px($value);
+    }
+    #{VAR.$parent-selector} .py-#{$key} {
+      @include py($value);
+    }
+    #{VAR.$parent-selector} .pt-#{$key} {
+      @include pt($value);
+    }
+    #{VAR.$parent-selector} .pr-#{$key} {
+      @include pr($value);
+    }
+    #{VAR.$parent-selector} .pb-#{$key} {
+      @include pb($value);
+    }
+    #{VAR.$parent-selector} .pl-#{$key} {
+      @include pl($value);
+    }
+
+    // Margin classes
+    #{VAR.$parent-selector} .m-#{$key} {
+      @include m($value);
+    }
+    #{VAR.$parent-selector} .mx-#{$key} {
+      @include mx($value);
+    }
+    #{VAR.$parent-selector} .my-#{$key} {
+      @include my($value);
+    }
+    #{VAR.$parent-selector} .mt-#{$key} {
+      @include mt($value);
+    }
+    #{VAR.$parent-selector} .mr-#{$key} {
+      @include mr($value);
+    }
+    #{VAR.$parent-selector} .mb-#{$key} {
+      @include mb($value);
+    }
+    #{VAR.$parent-selector} .ml-#{$key} {
+      @include ml($value);
+    }
 
+    // Gap classes
+    #{VAR.$parent-selector} .gap-#{$key} {
+      @include gap($value);
+    }
+    #{VAR.$parent-selector} .gap-x-#{$key} {
+      @include gap-x($value);
+    }
+    #{VAR.$parent-selector} .gap-y-#{$key} {
+      @include gap-y($value);
+    }
+
+    // Space classes
+    #{VAR.$parent-selector} .space-x-#{$key} {
+      @include space-x($value);
+    }
+    #{VAR.$parent-selector} .space-y-#{$key} {
+      @include space-y($value);
+    }
+
+    #{VAR.$parent-selector} .inset-#{$key} {
+      @include inset($value);
+    }
+    #{VAR.$parent-selector} .inset-x-#{$key} {
+      @include inset-x($value);
+    }
+    #{VAR.$parent-selector} .inset-y-#{$key} {
+      @include inset-y($value);
+    }
+  }
 
   // -----------------------------------------------
   // RESPONSIVE SPACING CLASSES
   // -----------------------------------------------
 
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
-      .mx-auto\@#{$breakpoint} { @include mx-auto; }
-      .ml-auto\@#{$breakpoint} { @include ml-auto; }
-      .mr-auto\@#{$breakpoint} { @include mr-auto; }
+      #{VAR.$parent-selector} .mx-auto\@#{$breakpoint} {
+        @include mx-auto;
+      }
+      #{VAR.$parent-selector} .ml-auto\@#{$breakpoint} {
+        @include ml-auto;
+      }
+      #{VAR.$parent-selector} .mr-auto\@#{$breakpoint} {
+        @include mr-auto;
+      }
+      #{VAR.$parent-selector} .inset-auto\@#{$breakpoint} {
+        @include inset-auto;
+      }
+      #{VAR.$parent-selector} .inset-x-auto\@#{$breakpoint} {
+        @include inset-x-auto;
+      }
+      #{VAR.$parent-selector} .inset-y-auto\@#{$breakpoint} {
+        @include inset-y-auto;
+      }
 
       // Generate utilities from spacing map
-      @each $key, $value in $spacings {
+      @each $key, $value in VAR.$spacings {
         // Padding classes
-        .p-#{$key}\@#{$breakpoint} { @include p($value); }
-        .px-#{$key}\@#{$breakpoint} { @include px($value); }
-        .py-#{$key}\@#{$breakpoint} { @include py($value); }
-        .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
-        .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
-        .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
-        .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
+        #{VAR.$parent-selector} .p-#{$key}\@#{$breakpoint} {
+          @include p($value);
+        }
+        #{VAR.$parent-selector} .px-#{$key}\@#{$breakpoint} {
+          @include px($value);
+        }
+        #{VAR.$parent-selector} .py-#{$key}\@#{$breakpoint} {
+          @include py($value);
+        }
+        #{VAR.$parent-selector} .pt-#{$key}\@#{$breakpoint} {
+          @include pt($value);
+        }
+        #{VAR.$parent-selector} .pr-#{$key}\@#{$breakpoint} {
+          @include pr($value);
+        }
+        #{VAR.$parent-selector} .pb-#{$key}\@#{$breakpoint} {
+          @include pb($value);
+        }
+        #{VAR.$parent-selector} .pl-#{$key}\@#{$breakpoint} {
+          @include pl($value);
+        }
 
         // Margin classes
-        .m-#{$key}\@#{$breakpoint} { @include m($value); }
-        .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
-        .my-#{$key}\@#{$breakpoint} { @include my($value); }
-        .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
-        .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
-        .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
-        .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
-
-        .gap-#{$key}\@#{$breakpoint} { gap: $value; }
-        .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
-        .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
-  
+        #{VAR.$parent-selector} .m-#{$key}\@#{$breakpoint} {
+          @include m($value);
+        }
+        #{VAR.$parent-selector} .mx-#{$key}\@#{$breakpoint} {
+          @include mx($value);
+        }
+        #{VAR.$parent-selector} .my-#{$key}\@#{$breakpoint} {
+          @include my($value);
+        }
+        #{VAR.$parent-selector} .mt-#{$key}\@#{$breakpoint} {
+          @include mt($value);
+        }
+        #{VAR.$parent-selector} .mr-#{$key}\@#{$breakpoint} {
+          @include mr($value);
+        }
+        #{VAR.$parent-selector} .mb-#{$key}\@#{$breakpoint} {
+          @include mb($value);
+        }
+        #{VAR.$parent-selector} .ml-#{$key}\@#{$breakpoint} {
+          @include ml($value);
+        }
+
+        #{VAR.$parent-selector} .gap-#{$key}\@#{$breakpoint} {
+          gap: $value;
+        }
+        #{VAR.$parent-selector} .gap-x-#{$key}\@#{$breakpoint} {
+          column-gap: $value;
+        }
+        #{VAR.$parent-selector} .gap-y-#{$key}\@#{$breakpoint} {
+          row-gap: $value;
+        }
+
         // Space classes
-        .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
-        .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
+        #{VAR.$parent-selector} .space-x-#{$key}\@#{$breakpoint} {
+          @include space-x($value);
+        }
+        #{VAR.$parent-selector} .space-y-#{$key}\@#{$breakpoint} {
+          @include space-y($value);
+        }
+        #{VAR.$parent-selector} .inset-#{$key}\@#{$breakpoint} {
+          @include inset($value);
+        }
+        #{VAR.$parent-selector} .inset-x-#{$key}\@#{$breakpoint} {
+          @include inset-x($value);
+        }
+        #{VAR.$parent-selector} .inset-y-#{$key}\@#{$breakpoint} {
+          @include inset-y($value);
+        }
       }
     }
   }