@nuvoui/core 1.3.0 → 1.3.1

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;

package/src/styles/utilities/_shadows.scss

@@ -3,6 +3,7 @@
 @use "sass:math";
 @use "sass:string";
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 // TODO: SHADOWS WITH COLOR VARIANTS WITH RESPONSIVE
 $shadow-sizes: (
@@ -44,24 +45,18 @@ $shadow-sizes: (
   ),
 );
 
-/**
-* Generates a CSS shadow string from a given size.
-*
-* @param {String} $size - The shadow size.
-* @param {String} $color - The shadow color.
-* @return {String} - The CSS shadow string.
-*/
+// Generates a CSS shadow string from a given size.
+// @param {String} $size - The shadow size.
+// @param {String} $color - The shadow color.
+// @return {String} - The CSS shadow string.
 
 @mixin shadow-base($x, $y, $blur, $spread, $color) {
   box-shadow: $x $y $blur $spread $color;
 }
 
-/**
-* Generates a CSS shadow string from a given size.
-*
-* @param {String} $size - The shadow size.
-* @param {String} $color - The shadow color.
-*/
+// Generates a CSS shadow string from a given size.
+// @param {String} $size - The shadow size.
+// @param {String} $color - The shadow color.
 @mixin shadow($size: "md", $color: "default") {
   @if not map.has-key($shadow-sizes, $size) {
     @error "Shadow size '#{$size}' not found in $shadow-sizes map";
@@ -101,7 +96,7 @@ $shadow-sizes: (
 }
 
 // Utility Classes
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("shadows") {
   #{VAR.$parent-selector} .shadow-none {
     box-shadow: none !important;
   }

package/src/styles/utilities/_sizing.scss

@@ -94,7 +94,7 @@
   height: 100dvh;
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("sizing") {
   #{VAR.$parent-selector} .w-screen {
     @include w-screen;
   }