@nuvoui/core 1.3.0 → 1.3.1

package/src/styles/layouts/_grid.scss

@@ -6,16 +6,12 @@
 @use "../abstracts/functions" as FN;
 @use "../abstracts/config" as VAR;
 
-/**
- * @description Establishes a grid container.
- */
+// @description Establishes a grid container.
 @mixin grid {
   display: grid;
 }
 
-/**
- * @description Establishes a inline-grid container.
- */
+// @description Establishes a inline-grid container.
 @mixin grid-inline {
   display: inline-grid;
 }
@@ -28,17 +24,14 @@
   grid-template-rows: repeat($count, minmax(0, 1fr));
 }
 
-/**
-* @description Establishes a grid container with a specified number of columns.
-* @param {number} $count - The number of columns.
+// @description Establishes a grid container with a specified number of columns.
+// @param {number} $count - The number of columns.
 
-/// EXAMPLE USAGE
-.custom-grid {
-  display: grid;
-  @include cols-custom("1fr_auto_1fr");
-}
-
-*/
+// /EXAMPLE USAGE
+// .custom-grid {
+//  display: grid;
+//  @include cols-custom("1fr_auto_1fr");
+// }
 
 @mixin cols-custom($template) {
   // Convert underscores to spaces so "1fr_auto" becomes "1fr auto"
@@ -76,26 +69,20 @@ $alignments: (
   "stretch": stretch,
 );
 
-/**
- * @description justify-items container.
- * @param {string} $value - The value for the justify-items property.
- */
+// @description justify-items container.
+// @param {string} $value - The value for the justify-items property.
 @mixin justify($value) {
   justify-items: $value;
 }
 
-/**
- * @description Establishes a align-items container.
- * @param {string} $value - The value for the align-items property.
- */
+// @description Establishes a align-items container.
+// @param {string} $value - The value for the align-items property.
 @mixin align($value) {
   align-items: $value;
 }
 
-/**
- * @description Establishes a place-items container.
- * @param {string} $value - The value for the place-items property.
- */
+// @description Establishes a place-items container.
+// @param {string} $value - The value for the place-items property.
 @mixin place($value) {
   place-items: $value;
 }
@@ -131,7 +118,7 @@ $alignments: (
   grid-row: $row;
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("grid") {
   // Build the flat selector list manually with proper escaping
   $base-grid-selector: #{VAR.$parent-selector} + " .grid";
   $all-grid-selectors: $base-grid-selector;

package/src/styles/themes/_theme.scss

@@ -5,8 +5,9 @@
 @use "sass:list";
 @use "../utilities/colors" as COL;
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("theme") {
   :root,
   #{VAR.$parent-selector} [data-theme="light"] {
     // Theme color CSS variables
@@ -79,19 +80,18 @@
   @each $color-name, $scale in COL.$colors {
     @each $shade, $value in $scale {
       // Automatic text contrast for backgrounds
-      // todo: documentaton may add karo issay
       #{VAR.$parent-selector} .text-on-#{$color-name}-#{$shade} {
         color: COL.find-text-color($value);
       }
 
       #{VAR.$parent-selector} .text-#{$color-name}-#{$shade},
-      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover,
       #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
 
       #{VAR.$parent-selector} .bg-#{$color-name}-#{$shade},
-      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover,
       #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
         background-color: var(--#{$color-name}-#{$shade});
       }
@@ -105,13 +105,13 @@
 
     // Base color classes
     #{VAR.$parent-selector} .text-#{$color-name},
-    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover,
     #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name} {
       color: var(--#{$color-name});
     }
 
     #{VAR.$parent-selector} .bg-#{$color-name},
-    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover,
     #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name} {
       background-color: var(--#{$color-name});
     }
@@ -132,13 +132,13 @@
       }
 
       #{VAR.$parent-selector} .text-#{$color-name}-#{$shade},
-      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .hover\:text-#{$color-name}-#{$shade}:hover,
       #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name}-#{$shade} {
         color: var(--#{$color-name}-#{$shade});
       }
 
       #{VAR.$parent-selector} .bg-#{$color-name}-#{$shade},
-      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover, // todo: improve these loops to save time
+      #{VAR.$parent-selector} .hover\:bg-#{$color-name}-#{$shade}:hover,
       #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name}-#{$shade} {
         background-color: var(--#{$color-name}-#{$shade});
       }
@@ -152,13 +152,13 @@
 
     // Base color classes
     #{VAR.$parent-selector} .text-#{$color-name},
-    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover,
     #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name} {
       color: var(--#{$color-name});
     }
 
     #{VAR.$parent-selector} .bg-#{$color-name},
-    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover, // todo: improve these loops to save time
+    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover,
     #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name} {
       background-color: var(--#{$color-name});
     }

package/src/styles/utilities/_alignment.scss

@@ -1,4 +1,5 @@
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 @mixin align-baseline {
   vertical-align: baseline;
@@ -13,7 +14,7 @@
   vertical-align: bottom;
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("alignments") {
   #{VAR.$parent-selector} .align-baseline {
     @include align-baseline;
   }

package/src/styles/utilities/_animations.scss

@@ -2,7 +2,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@use "../abstracts/functions" as *;
+@use "../abstracts/functions" as FN;
 @use "../abstracts/config" as VAR;
 
 $generated-keyframes: ();
@@ -17,11 +17,9 @@ $generated-keyframes: ();
   }
 }
 
-/**
- * @mixin animate-bounce
- * @description Creates a bouncing animation
- * @param {Map} $props - Animation properties
- */
+// @mixin animate-bounce
+// @description Creates a bouncing animation
+// @param {Map} $props - Animation properties
 @mixin animate-bounce($props: ()) {
   $defaults: (
     vertical: 0.5rem,
@@ -73,11 +71,9 @@ $generated-keyframes: ();
   transition-timing-function: ease-in-out;
 }
 
-/**
- * @mixin animate-pulse
- * @description Creates a pulsing opacity animation
- * @param {Map} $props - Animation properties
- */
+// @mixin animate-pulse
+// @description Creates a pulsing opacity animation
+// @param {Map} $props - Animation properties
 @mixin animate-pulse($props: ()) {
   $defaults: (
     min-opacity: 0.5,
@@ -111,11 +107,9 @@ $generated-keyframes: ();
   }
 }
 
-/**
- * @mixin animate-spin
- * @description Creates a spinning animation
- * @param {Map} $props - Animation properties
- */
+// @mixin animate-spin
+// @description Creates a spinning animation
+// @param {Map} $props - Animation properties
 @mixin animate-spin($props: ()) {
   $defaults: (
     direction: normal,
@@ -150,11 +144,9 @@ $generated-keyframes: ();
   }
 }
 
-/**
- * @mixin animate-ping
- * @description Creates a ping animation (scale + fade)
- * @param {Map} $props - Animation properties
- */
+// @mixin animate-ping
+// @description Creates a ping animation (scale + fade)
+// @param {Map} $props - Animation properties
 @mixin animate-ping($props: ()) {
   $defaults: (
     scale: 2,
@@ -183,11 +175,9 @@ $generated-keyframes: ();
   }
 }
 
-/**
- * @mixin animate-fade
- * @description Creates fade in/out animation
- * @param {Map} $props - Animation properties
- */
+// @mixin animate-fade
+// @description Creates fade in/out animation
+// @param {Map} $props - Animation properties
 @mixin animate-fade($props: ()) {
   $defaults: (
     type: in,
@@ -248,11 +238,9 @@ $generated-keyframes: ();
   }
 }
 
-/**
- * @mixin animate-shake
- * @description Creates a shake animation
- * @param {Map} $props - Animation properties
- */
+// @mixin animate-shake
+// @description Creates a shake animation
+// @param {Map} $props - Animation properties
 @mixin animate-shake($props: ()) {
   $defaults: (
     intensity: 5px,
@@ -296,7 +284,7 @@ $generated-keyframes: ();
   }
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("animations") {
   // Add to your existing animation utilities
 
   #{VAR.$parent-selector} .animate-pulse {

package/src/styles/utilities/_backdrop-filters.scss

@@ -3,16 +3,12 @@
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * Backdrop Filter Utilities
- *
- * Provides utility classes and mixins for backdrop-filter effects.
- * All utilities come with responsive variants.
- *
- * Usage:
- * <div class="backdrop-blur-md">Blurred backdrop</div>
- * <div class="backdrop-blur-lg@md">Blurred backdrop on medium screens and up</div>
- */
+// Backdrop Filter Utilities
+// Provides utility classes and mixins for backdrop-filter effects.
+// All utilities come with responsive variants.
+// Usage:
+// <div class="backdrop-blur-md">Blurred backdrop</div>
+// <div class="backdrop-blur-lg@md">Blurred backdrop on medium screens and up</div>
 
 // Blur values
 $backdrop-blur-values: (
@@ -305,7 +301,7 @@ $backdrop-filter-presets: (
   }
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("backdrops") {
   // Generate base utilities
   @include generate-backdrop-filter-utilities;
 

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: 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,7 +99,7 @@
   overflow-y: auto;
 }
 
-@if VAR.$generate-utility-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;