@nuvoui/core 1.3.0 → 1.3.2

package/src/styles/utilities/_display.scss

@@ -4,73 +4,73 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * Display Utilities
- *
- * Classes:
- * - .hide, .show: Control element visibility
- * - .block, .inline, .inline-block: Basic display modes
- * - .d-tbl, .d-tbl-row, .d-tbl-cell: Table display modes
- * - .overflow-hidden: Control overflow behavior
- *
- * All utilities support responsive variants with @breakpoint suffix:
- * - .hide@md, .block@lg, etc.
- */
+// Display Utilities
+// Classes:
+//  - .hide, .show: Control element visibility
+//  - .block, .inline, .inline-block: Basic display modes
+//  - .d-tbl, .d-tbl-row, .d-tbl-cell: Table display modes
+//  - .overflow-hidden: Control overflow behavior
+// All utilities support responsive variants with @breakpoint suffix:
+//  - .hide@md, .block@lg, etc.
 
 // Display Mixins
 
-/**
- * @description Set display to none.
- */
+// @description Set display to none.
 @mixin hide {
   display: none;
 }
 
-/**
- * @description Set display to block.
- */
+// @description Set display to block.
 @mixin block {
   display: block;
 }
 
-/**
- * @description Set display to inline.
- */
+// @description Set display to inline.
 @mixin inline {
   display: inline;
 }
 
-/**
- * @description Set display to inline-block.
- */
+// @description Set display to inline-block.
 @mixin inline-block {
   display: inline-block;
 }
 
-/**
- * @description Set display to initial original state.
- */
+// @description Set display to initial original state.
 @mixin show {
   display: initial;
 }
 
-/**
- * @description Set display to table.
- */
+// @description Establishes a grid container.
+@mixin grid {
+  display: grid;
+}
+
+// @description Establishes a inline-grid container.
+@mixin grid-inline {
+  display: inline-grid;
+}
+
+// @description Establishes a flex container.
+@mixin flex {
+  display: flex;
+}
+
+// @description Establishes a flex-inline container.
+@mixin flex-inline {
+  display: inline-flex;
+}
+
+// @description Set display to table.
 @mixin d-tbl {
   display: table;
 }
 
-/**
- * @description Set display to table-row.
- */
+// @description Set display to table-row.
 @mixin d-tbl-row {
   display: table-row;
 }
 
-/**
- * @description Set display to table-cell.
- */
+// @description Set display to table-cell.
 @mixin d-tbl-cell {
   display: table-cell;
 }
@@ -119,7 +119,7 @@
   overflow-y: auto;
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("displays") {
   #{VAR.$parent-selector} .hide {
     @include hide;
   }
@@ -140,6 +140,24 @@
     @include inline-block;
   }
 
+  #{VAR.$parent-selector} .contents {
+    @include contents;
+  }
+
+  #{VAR.$parent-selector} .grid {
+    @include grid;
+
+    &.inline {
+      @include grid-inline;
+    }
+  }
+  #{VAR.$parent-selector} .flex {
+    @include flex;
+
+    &.inline {
+      @include flex-inline;
+    }
+  }
   #{VAR.$parent-selector} .visible {
     @include visible;
   }
@@ -152,10 +170,6 @@
     @include collapse;
   }
 
-  #{VAR.$parent-selector} .contents {
-    @include contents;
-  }
-
   #{VAR.$parent-selector} .overflow-hidden {
     @include overflow-hidden;
   }
@@ -228,6 +242,24 @@
       #{VAR.$parent-selector} .inline-block\@#{$breakpoint} {
         @include inline-block;
       }
+
+      #{VAR.$parent-selector} .contents\@#{$breakpoint} {
+        @include contents;
+      }
+      #{VAR.$parent-selector} .grid\@#{$breakpoint} {
+        @include grid;
+
+        &.inline {
+          @include grid-inline;
+        }
+      }
+      #{VAR.$parent-selector} .flex\@#{$breakpoint} {
+        @include flex;
+
+        &.inline {
+          @include flex-inline;
+        }
+      }
       #{VAR.$parent-selector} .visible\@#{$breakpoint} {
         @include visible;
       }
@@ -237,9 +269,6 @@
       #{VAR.$parent-selector} .collapse\@#{$breakpoint} {
         @include collapse;
       }
-      #{VAR.$parent-selector} .contents\@#{$breakpoint} {
-        @include contents;
-      }
       #{VAR.$parent-selector} .overflow-hidden\@#{$breakpoint} {
         @include overflow-hidden;
       }

package/src/styles/utilities/_helpers.scss

@@ -5,6 +5,7 @@
 @use "sass:meta";
 
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 @if VAR.$enable-debugger {
   .NuvoUI-Debugger-Wrapper {

package/src/styles/utilities/_media-queries.scss

@@ -8,11 +8,9 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * @description Media query mixins.
- * @param {string|number} $breakpoint - The breakpoint value.
- * @param {string} $type - The media query type (e.g. 'lg', 'md').
- */
+// @description Media query mixins.
+// @param {string|number} $breakpoint - The breakpoint value.
+// @param {string} $type - The media query type (e.g. 'lg', 'md').
 @mixin media-up($breakpoint, $debug: null) {
   $blueprint-value: FN.fix-units(FN.get-breakpoint-value($breakpoint, $debug));
   $val: $blueprint-value - 0.01;

package/src/styles/utilities/_opacity.scss

@@ -4,79 +4,64 @@
 @use "sass:math";
 @use "sass:meta";
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
-/**
- * @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 
- */
+// @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
 
 @mixin opacity($value) {
   opacity: calc(#{$value} / 100);
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("opacity") {
   // Opacity Utilities
   @each $i in VAR.$percentages {
     #{VAR.$parent-selector} .opacity-#{$i},

package/src/styles/utilities/_position.scss

@@ -1,176 +1,148 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * @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
- */
+// @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
+// @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
+// @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
+// @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 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
+// @description Creates a sticky element that remains in view during scrolling
+// @example
+// .nav {
+//   @include sticky;
+// }
 @mixin sticky {
   position: sticky;
   z-index: 999;
   top: 0;
 }
 
-/**
- * @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
+// @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: FN.fix-units($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
+// @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: FN.fix-units($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
+// @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: FN.fix-units($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
+// @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;
 }
@@ -201,7 +173,7 @@ $position-fractions: (
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("position") {
   // Position Classes
   #{VAR.$parent-selector} .static {
     @include static;