@nuvoui/core 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",
@@ -36,7 +36,7 @@
     "lint": "stylelint \"src/**/*.scss\"",
     "format": "prettier --write \"src/**/*.{scss,js,json}\"",
     "clean": "node -e \"const fs=require('fs');if(fs.existsSync('dist')) fs.rmSync('dist',{recursive:true})\"",
-    "build:scss": "sass src/styles/index.scss:dist/nuvoui.css --style expanded",
+    "build:scss": "sass src/styles/build.scss:dist/nuvoui.css --style expanded",
     "build:minify": "postcss dist/nuvoui.css -o dist/nuvoui.min.css --use cssnano --map",
     "prebuild": "npm run clean",
     "build": "npm run build:scss && npm run build:minify",

package/src/styles/abstracts/_config.scss

@@ -2,8 +2,31 @@
 @use "sass:math";
 @use "sass:list";
 
+$feature-flags: (
+  "alignments": true,
+  "animations": true,
+  "backdrops": true,
+  "borders": true,
+  "container-queries": true,
+  "cursors": true,
+  "displays": true,
+  "flex": true,
+  "grid": true,
+  "opacity": true,
+  "position": true,
+  "shadows": true,
+  "sizing": true,
+  "spacing": true,
+  "tooltips": true,
+  "theme": true,
+  "transforms": true,
+  "transitions": true,
+  "typography": true,
+  "z-index": true,
+) !default;
+
 // Framework Configuration Options
-$generate-utility-classes: true !default;
+$generate-utility-classes: false !default;
 $enable-dark-mode: true !default;
 
 $enable-debugger: false !default;
@@ -205,7 +228,7 @@ $border-radii: (
   "lg": 0.75rem,
   "xl": 1rem,
   "2xl": 1.25rem,
-  "circle": 50%,
+  "full": 50%,
   "none": 0,
 ) !default;
 

package/src/styles/abstracts/_functions.scss

@@ -41,11 +41,9 @@
   }
 }
 
-/**
- * Ensures a value has a unit, adding $default-unit if none exists
- * @param {Number|String} $val - The value to check
- * @return {String} - The value with units
- */
+// Ensures a value has a unit, adding $default-unit if none exists
+// @param {Number|String} $val - The value to check
+// @return {String} - The value with units
 @function fix-units($val, $unit: $default-unit, $debug: null) {
   @if meta.type-of($val) != number and meta.type-of($val) != string {
     @error "fix-units() requires a number or string value";
@@ -112,3 +110,16 @@
 
   @return list.append($result, str-trim($string));
 }
+
+// Helper function to check if a feature is enabled
+@function feature-enabled($feature) {
+  @if not $generate-utility-classes {
+    @return false;
+  }
+
+  @if not map.has-key($feature-flags, $feature) {
+    @return true; // Default to enabled if not specified
+  }
+
+  @return map.get($feature-flags, $feature);
+}

package/src/styles/base/_base.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 
-/* Import variables */
+// Import variables
 @use "../abstracts/config" as *;
 @use "../utilities/media-queries" as media;
 
@@ -28,7 +28,7 @@ body#{$parent-selector} {
 #{$parent-selector} h5,
 #{$parent-selector} h6 {
   margin-bottom: 0.5em;
-  font-family: var(--font-family-heading);
+  font-family: var(--font-family-base);
   font-weight: 700;
   line-height: 1.2;
 }

package/src/styles/base/_reset.scss

@@ -28,8 +28,6 @@ dd {
 
 // Prevent font size inflation
 html {
-  -moz-text-size-adjust: none; /* stylelint-disable-line */
-  -webkit-text-size-adjust: none; /* stylelint-disable-line */
   text-size-adjust: none;
 }
 

package/src/styles/build.scss

@@ -0,0 +1,3 @@
+@use "./index.scss" as NuvoUI with (
+  $generate-utility-classes: true
+);

package/src/styles/layouts/_container.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
 
 // Base container styles
 @mixin container-base {
@@ -27,9 +28,15 @@
   @include container-padding(1rem);
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("container-queries") {
   // Container classes
   #{VAR.$parent-selector} .container {
     @include container;
   }
+  #{VAR.$parent-selector} .container.flex {
+    @include container(flex);
+  }
+  #{VAR.$parent-selector} .container.grid {
+    @include container(grid);
+  }
 }

package/src/styles/layouts/_flex.scss

@@ -2,398 +2,316 @@
 // Module: Flex | Flex Inline
 // Note: Gap utilities are defined in _spacing.scss
 
-/**
- * @component Flex
- * @description Flexbox layout system for creating flexible page layouts
- *
- * @example
- * <div class="flex row between x-center">
- *   <div class="w-6">Left column (6 units)</div>
- *   <div class="w-6">Right column (6 units)</div>
- * </div>
- * 
- * <div class="flex col@md row@lg">
- *   <!-- Changes direction based on breakpoint -->
- * </div>
- *
- * @classes
- * Base:
- * - flex: Creates a flex container
- * 
- * Direction:
- * - row: Sets flex-direction to row
- * - col: Sets flex-direction to column
- * - row-reverse: Reverses row direction
- * - col-reverse: Reverses column direction
- * 
- * Alignment:
- * - start/end/center: Controls justify-content
- * - x-start/x-end/x-center: Controls align-items
- * 
- * Child elements:
- * - w-{1-12}: Sets width based on column count
- * - grow: Allows item to grow
- * - shrink/no-shrink: Controls shrink behavior
- *
- * @responsive
- * All classes support responsive variants using @breakpoint suffix:
- * - row@md: Row direction on medium screens and up
- * - between@lg: Space-between on large screens
- *
- * @see grid
- */
+// @component Flex
+// @description Flexbox layout system for creating flexible page layouts
+
+// @example
+// <div class="flex row between x-center">
+//   <div class="w-6">Left column (6 units)</div>
+//   <div class="w-6">Right column (6 units)</div>
+// </div>
+
+// <div class="flex col@md row@lg">
+//   <!-- Changes direction based on breakpoint -->
+// </div>
+
+// @classes
+// Base:
+// - flex: Creates a flex container
+
+// Direction:
+// - row: Sets flex-direction to row
+// - col: Sets flex-direction to column
+// - row-reverse: Reverses row direction
+// - col-reverse: Reverses column direction
+
+// Alignment:
+// - start/end/center: Controls justify-content
+// - x-start/x-end/x-center: Controls align-items
+
+// Child elements:
+// - w-{1-12}: Sets width based on column count
+// - grow: Allows item to grow
+// - shrink/no-shrink: Controls shrink behavior
+
+// @responsive
+// All classes support responsive variants using @breakpoint suffix:
+// - row@md: Row direction on medium screens and up
+// - between@lg: Space-between on large screens
+
+// @see grid
 
 @use "sass:math";
 @use "../utilities/media-queries" as MC;
 @use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
-/**
- * @description Establishes a flex container.
- */
+// @description Establishes a flex container.
 @mixin flex {
   display: flex;
 }
 
-/**
- * @description Establishes a flex-inline container.
- */
+// @description Establishes a flex-inline container.
 @mixin flex-inline {
   display: inline-flex;
 }
 
-/**
- * @description Sets flex-direction to row.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to row.
+// @dependencies flex | flex-inline
 @mixin row {
   flex-direction: row;
 }
 
-/**
- * @description Sets flex-direction to row-reverse.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to row-reverse.
+// @dependencies flex | flex-inline
 @mixin row-reverse {
   flex-direction: row-reverse;
 }
 
-/**
- * @description Sets flex-direction to column.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to column.
+// @dependencies flex | flex-inline
 @mixin col {
   flex-direction: column;
 }
 
-/**
- * @description Sets flex-direction to column-reverse.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-direction to column-reverse.
+// @dependencies flex | flex-inline
 @mixin col-reverse {
   flex-direction: column-reverse;
 }
 
-/**
- * @description Sets flex-wrap to wrap.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-wrap to wrap.
+// @dependencies flex | flex-inline
 @mixin wrap {
   flex-wrap: wrap;
 }
 
-/**
- * @description Sets flex-wrap to nowrap.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-wrap to nowrap.
+// @dependencies flex | flex-inline
 @mixin nowrap {
   flex-wrap: nowrap;
 }
 
-/**
- * @description Sets flex-wrap to wrap-reverse
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-wrap to wrap-reverse
+// @dependencies flex | flex-inline
 @mixin wrap-reverse {
   flex-wrap: wrap-reverse;
 }
 
-/**
- * @description Sets justify-content to flex-start
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to flex-start
+// @dependencies flex | flex-inline
 @mixin start {
   justify-content: flex-start;
 }
 
-/**
- * @description Sets justify-content to flex-end
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to flex-end
+// @dependencies flex | flex-inline
 @mixin end {
   justify-content: flex-end;
 }
 
-/**
- * @description Sets justify-content to center
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to center
+// @dependencies flex | flex-inline
 @mixin center {
   justify-content: center;
 }
 
-/**
- * @description Sets justify-content to stretch
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to stretch
+// @dependencies flex | flex-inline
 @mixin stretch {
   justify-content: stretch;
 }
 
-/**
- * @description Sets justify-content to space-between
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to space-between
+// @dependencies flex | flex-inline
 @mixin between {
   justify-content: space-between;
 }
 
-/**
- * @description Sets justify-content to space-around
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to space-around
+// @dependencies flex | flex-inline
 @mixin around {
   justify-content: space-around;
 }
 
-/**
- * @description Sets justify-content to space-evenly
- * @dependencies flex | flex-inline
- */
+// @description Sets justify-content to space-evenly
+// @dependencies flex | flex-inline
 @mixin evenly {
   justify-content: space-evenly;
 }
 
 // Cross Axis Alignment Mixins
 
-/**
- * @description Sets align-items to flex-start - aligns items to the start of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to flex-start - aligns items to the start of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-start {
   align-items: flex-start;
 }
 
-/**
- * @description Sets align-items to flex-end - aligns items to the end of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to flex-end - aligns items to the end of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-end {
   align-items: flex-end;
 }
 
-/**
- * @description Sets align-items to center - aligns items to the center of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to center - aligns items to the center of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-center {
   align-items: center;
 }
 
-/**
- * @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-stretch {
   align-items: stretch;
 }
 
-/**
- * @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-baseline {
   align-items: baseline;
 }
 
 // Cross Axis Content Mixins
 
-/**
- * @description Sets align-content to flex-start - aligns content to the start of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to flex-start - aligns content to the start of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-start {
   align-content: flex-start;
 }
 
-/**
- * @description Sets align-content to flex-end - aligns content to the end of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to flex-end - aligns content to the end of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-end {
   align-content: flex-end;
 }
 
-/**
- * @description Sets align-content to center - aligns content to the center of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to center - aligns content to the center of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-center {
   align-content: center;
 }
 
-/**
- * @description Sets align-content to space-between - aligns content to the space between the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to space-between - aligns content to the space between the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-between {
   align-content: space-between;
 }
 
-/**
- * @description Sets align-content to space-around - aligns content to the space around the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to space-around - aligns content to the space around the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-around {
   align-content: space-around;
 }
 
-/**
- * @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-evenly {
   align-content: space-evenly;
 }
 
-/**
- * @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
- * @dependencies flex | flex-inline
- */
+// @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
+// @dependencies flex | flex-inline
 @mixin x-content-stretch {
   align-content: stretch;
 }
 
 // Self Alignment Mixins
 
-/**
- * @description Sets align-self to auto
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to auto
+// @dependencies flex | flex-inline
 @mixin self-auto {
   align-self: auto;
 }
 
-/**
- * @description Sets align-self to flex-start
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to flex-start
+// @dependencies flex | flex-inline
 @mixin self-start {
   align-self: flex-start;
 }
 
-/**
- * @description Sets align-self to flex-end
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to flex-end
+// @dependencies flex | flex-inline
 @mixin self-end {
   align-self: flex-end;
 }
 
-/**
- * @description Sets align-self to center
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to center
+// @dependencies flex | flex-inline
 @mixin self-center {
   align-self: center;
 }
 
-/**
- * @description Sets align-self to stretch
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to stretch
+// @dependencies flex | flex-inline
 @mixin self-stretch {
   align-self: stretch;
 }
 
-/**
- * @description Sets align-self to baseline
- * @dependencies flex | flex-inline
- */
+// @description Sets align-self to baseline
+// @dependencies flex | flex-inline
 @mixin self-baseline {
   align-self: baseline;
 }
 
-/**
- * @description Sets flex-shrink to 1 - allows the item to shrink.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-shrink to 1 - allows the item to shrink.
+// @dependencies flex | flex-inline
 @mixin shrink {
   flex-shrink: 1;
 }
 
-/**
- * @description Sets flex-shrink to 0 - prevents the item from shrinking.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-shrink to 0 - prevents the item from shrinking.
+// @dependencies flex | flex-inline
 @mixin no-shrink {
   flex-shrink: 0;
 }
 
-/**
- * @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
- * @dependencies flex | flex-inline
- */
+// @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
+// @dependencies flex | flex-inline
 @mixin shrink-twice {
   flex-shrink: 2;
 }
 
 // Flex Child Mixins
 
-/**
- * @description Sets flex to 0 0 100%
- */
+// @description Sets flex to 0 0 100%
 @mixin fill-full {
   flex: 0 0 100%;
 }
 
-/**
- * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
- */
+// @description Sets flex to 1 1 auto - allows the item to grow and shrink.
 @mixin fill-auto {
   flex: 1 1 auto;
 }
 
-/**
- * @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
- */
+// @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
 @mixin grow {
   flex: 1 1 0%;
 }
 
-/**
- * @description Sets flex to none - prevents the item from growing.
- */
+// @description Sets flex to none - prevents the item from growing.
 @mixin no-grow {
   flex: none;
 }
 
-/**
- * @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
- */
+// @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
 @mixin grow-only {
   flex: 1 0 auto;
 }
 
-/**
- * @description Sets how many columns this would take using percentage of VAR.$column-count.
- * @param {Number} $size - The number of columns to span.
- */
+// @description Sets how many columns this would take using percentage of VAR.$column-count.
+// @param {Number} $size - The number of columns to span.
 @mixin fill($size) {
-  flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
+  $percentage: math.percentage(math.div($size, VAR.$column-count));
+
+  $n: math.div(VAR.$column-count, $size); // How many items fit in a row
+  $gap-adjustment: calc(var(--flex-gap, 0px) * #{$n - 1} / #{$n});
+
+  // The width calculation accounts for the gap proportionally
+  flex: 0 0 calc(#{$percentage} - #{$gap-adjustment});
 }
 
-@if VAR.$generate-utility-classes {
+@if FN.feature-enabled("flex") {
   // Build flat selector list for all flex containers
   $flex-selectors: "#{VAR.$parent-selector} .flex";