@nuvoui/core 1.2.7 → 1.3.1

package/src/styles/utilities/_borders.scss

@@ -88,10 +88,8 @@ $border-styles: (solid, dashed, dotted, double, none);
   }
 }
 
-/**
- * @description Applies border radius to all corners
- * @param {String} $val - The border radius value
- */
+// @description Applies border radius to all corners
+// @param {String} $val - The border radius value
 @mixin rounded($val: null) {
   border-radius: get-rounded-value($val);
 }
@@ -167,7 +165,7 @@ $border-styles: (solid, dashed, dotted, double, none);
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("borders") {
   // Basic border classes (all sides)
   .border {
     @include border(1);

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

@@ -3,23 +3,19 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * Container Query Mixins
- *
- * Usage:
- * .container {
- *   container-type: inline-size;
- *   container-name: sidebar;
- * }
- * 
- * .item {
- *   @include container-up('md', 'sidebar') {
- *     // Styles for 'md' and up within 'sidebar' container
- *   }
- * }
- */
+// Container Query Mixins
+// Usage:
+// .container {
+//   container-type: inline-size;
+//   container-name: sidebar;
+// }
+// .item {
+//   @include container-up('md', 'sidebar') {
+//     // Styles for 'md' and up within 'sidebar' container
+//   }
+// }
 
-/// Container Query: Up
+// /Container Query: Up
 @mixin container-up($breakpoint, $containerName: null) {
   $bp-val: FN.get-breakpoint-value($breakpoint);
   @container #{$containerName} (min-width: #{$bp-val}) {
@@ -27,7 +23,7 @@
   }
 }
 
-/// Container Query: Down
+// /Container Query: Down
 @mixin container-down($breakpoint, $containerName: null) {
   $bp-val: FN.get-breakpoint-value($breakpoint);
   @container #{$containerName} (max-width: (#{ $bp-val } - 0.02px)) {
@@ -35,7 +31,7 @@
   }
 }
 
-/// Container Query: Between
+// /Container Query: Between
 @mixin container-between($lower, $upper, $containerName: null) {
   $min: FN.get-breakpoint-value($lower);
   $max: FN.get-breakpoint-value($upper);
@@ -44,7 +40,7 @@
   }
 }
 
-/// Container Query: Only
+// /Container Query: Only
 @mixin container-only($breakpoint, $containerName: null) {
   $min: FN.get-breakpoint-value($breakpoint);
   $next-breakpoint: null;
@@ -66,7 +62,7 @@
   }
 }
 
-/// Container Query: Query by Size
+// /Container Query: Query by Size
 @mixin container-query($size, $containerName: null) {
   @container #{$containerName} (min-width: $size) {
     @content;
@@ -81,7 +77,7 @@
   container-name: $name;
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("container-queries") {
   // Utility classes
   #{VAR.$parent-selector} .container-inline-size {
     container-type: inline-size;

package/src/styles/utilities/_cursor.scss

@@ -1,10 +1,11 @@
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 @mixin cursor($cursor-value) {
   cursor: #{$cursor-value};
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("cursors") {
   $cursor-values: ("auto", "pointer", "default", "move", "not-allowed", "wait", "help", "text", "cell", "crosshair", "grabbing", "grab", "zoom-in", "zoom-out", "none", "progress", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "context-menu", "all-scroll");
 
   // Generate classes for each cursor value

package/src/styles/utilities/_display.scss

@@ -4,73 +4,53 @@
 @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: revert;
+  display: initial;
 }
 
-/**
- * @description Set display to table.
- */
+// @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,8 +99,7 @@
   overflow-y: auto;
 }
 
-@if VAR.$generate-utility-classes {
-  // Base Classes
+@if FN.feature-enabled("displays") {
   #{VAR.$parent-selector} .hide {
     @include hide;
   }

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},