@nuvoui/core 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "main": "dist/nuvoui.css",
   "module": "src/styles/index.scss",
@@ -51,6 +51,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "chokidar": "^4.0.3",
     "cssnano": "^7.0.6",
     "glob": "^11.0.0",
     "postcss": "^8.4.49",

package/src/styles/base/_base.scss

@@ -2,6 +2,7 @@
 
 /* Import variables */
 @use '../utilities/variables' as *;
+@use '../utilities/media-queries' as media;
 
 :root {
   --font-family-base: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
@@ -181,3 +182,19 @@ a {
   border: 0 !important;
 }
 
+
+
+code {
+  font-family: 'Courier New', Courier, monospace; 
+  background-color: #f8f8f8; 
+  color: #d63384; 
+  padding: 2px 6px;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
+  white-space: nowrap;
+
+  @include media.dark-mode {
+    background-color: #333; 
+    color: #f8f8f2; 
+  }
+}

package/src/styles/index.scss

@@ -5,11 +5,15 @@
 @forward 'base/reset';
 @forward 'base/base';
 
+// Layouts
+@forward 'layouts/container';
+@forward 'layouts/flex';
+@forward 'layouts/grid';
+
 // Utilities
 @forward 'utilities/animations';
 @forward 'utilities/borders';
 @forward 'utilities/colors';
-@forward 'utilities/display';
 @forward 'utilities/opacity';
 @forward 'utilities/position';
 @forward 'utilities/media-queries';
@@ -18,11 +22,10 @@
 @forward 'utilities/spacing';
 @forward 'utilities/typography';
 @forward 'utilities/tooltips';
+@forward 'utilities/display';
+
+@forward 'utilities/helpers';
 
-// Layouts
-@forward 'layouts/container';
-@forward 'layouts/flex';
-@forward 'layouts/grid';
 
 // Theme
 @forward 'themes/theme';

package/src/styles/layouts/_container.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../utilities/variables' as *;
 
-// Container mixins
+// Base container styles
 @mixin container-base {
   width: 100%;
   margin-left: auto;
@@ -10,39 +10,30 @@
   padding-right: 1rem;
 }
 
-@mixin container {
+// Responsive container mixin
+@mixin container($display: block) {
   @include container-base;
   
-  & {
-    @each $breakpoint, $width in $container-max-widths {
-      @media (min-width: map.get($breakpoints, $breakpoint)) {
-          max-width: $width;
-      }
+  display: $display;
+
+  @each $breakpoint, $width in $container-max-widths {
+    @media (min-width: map.get($breakpoints, $breakpoint)) {
+      max-width: $width;
     }
   }
 }
 
-@mixin container-flex {
-  display: flex;
-  @include container;
-}
-
-@mixin container-grid {
-  display: grid;
-  @include container;
-}
-
 // Container classes
 .container {
   @include container;
 }
 
 .container-flex {
-  @include container-flex;
+  @include container(flex);
 }
 
 .container-grid {
-  @include container-grid;
+  @include container(grid);
 }
 
 .container-fluid {

package/src/styles/layouts/_flex.scss

@@ -1,54 +1,258 @@
+// Section: Layout
+// Module: Flex | Flex Inline
+
 @use 'sass:math';
+@use '../utilities/media-queries' as MC;
 @use '../utilities/variables' as *;
-@use '../utilities/functions' as *;
+@use '../utilities/functions' as FN;
 
-// Flex Container Mixins
+/**
+ * @description Establishes a flex container.
+ */
 @mixin flex {display: flex;}
+
+/**
+ * @description Establishes a flex-inline container.
+ */
 @mixin flex-inline {display: inline-flex;}
 
-// Direction Mixins
+/**
+ * @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
+ */
 @mixin row-reverse {flex-direction: row-reverse;}
+
+/**
+ * @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
+ */
 @mixin col-reverse {flex-direction: column-reverse;}
 
-// Wrap Mixins
+/**
+ * @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
+ */
 @mixin nowrap {flex-wrap: nowrap;}
+
+/**
+ * @description Sets flex-wrap to wrap-reverse
+ * @dependencies flex | flex-inline
+ */
 @mixin wrap-reverse {flex-wrap: wrap-reverse;}
 
-// Main Axis Alignment Mixins
+/**
+ * @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
+ */
 @mixin end {justify-content: flex-end;}
+
+/**
+ * @description Sets justify-content to center
+ * @dependencies flex | flex-inline
+ */
 @mixin center {justify-content: center;}
+
+/**
+ * @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
+ */
 @mixin around {justify-content: space-around;}
+
+/**
+ * @description Sets justify-content to space-evenly
+ * @dependencies flex | flex-inline
+ */
 @mixin evenly {justify-content: space-evenly;}
 
 // Cross Axis Alignment Mixins
-@mixin align-start {align-items: flex-start;}
-@mixin align-end {align-items: flex-end;}
-@mixin align-center {align-items: center;}
-@mixin align-stretch {align-items: stretch;}
-@mixin align-baseline {align-items: baseline;}
+
+/**
+ * @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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@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
+ */
+@mixin x-content-stretch { align-content: stretch; }
 
 // Self Alignment Mixins
+
+/**
+ * @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
+ */
 @mixin self-start {align-self: flex-start;}
+
+/**
+ * @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
+ */
 @mixin self-center {align-self: center;}
+
+/**
+ * @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
+ */
+@mixin self-baseline {align-self: baseline;}
+
+/**
+ * @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
+ */
 @mixin shrink-0 {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
+ */
 @mixin shrink-2 {flex-shrink: 2;}
 
+
 // Flex Child Mixins
+
+/**
+ * @description Sets flex to 0 0 100%
+ */
 @mixin f-w-full {flex: 0 0 100%;}
+
+/**
+ * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
+ */
 @mixin f-w-auto {flex: 1 1 auto;}
+
+/**
+ * @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.
+ */
 @mixin no-grow { flex: none; }
 
+/**
+ * @description Sets how many columns this would take using percentage of $column-count.
+ * @param {Number} $size - The number of columns to span.
+ */
 @mixin w-col($size) {
   flex: 0 0 math.percentage(math.div($size, $column-count));
 }
@@ -77,12 +281,20 @@
   &.evenly { justify-content: space-evenly; }
   
   // Align modifiers
-  &.items-start { align-items: flex-start; }
-  &.items-end { align-items: flex-end; }
-  &.items-center { align-items: center; }
-  &.items-baseline { align-items: baseline; }
-  &.items-stretch { align-items: stretch; }
+  &.x-start { align-items: flex-start; }
+  &.x-end { align-items: flex-end; }
+  &.x-center { align-items: center; }
+  &.x-baseline { align-items: baseline; }
+  &.x-stretch { align-items: stretch; }
   
+  &.x-content-start { align-content: flex-start; }
+  &.x-content-end { align-content: flex-end; }
+  &.x-content-center { align-content: center; }
+  &.x-content-between { align-content: space-between; }
+  &.x-content-around { align-content: space-around; }
+  &.x-content-evenly { align-content: space-evenly; }
+  &.x-content-stretch { align-content: stretch; }
+
   // Child flex items (using column count)
   > .w-auto { @include f-w-auto }
   > .w-full { @include f-w-full }
@@ -102,11 +314,14 @@
   }
 }
 
-
-// Responsive variants
 @each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
-    .flex {
+  // Get breakpoint value using FN function
+  $bp-val: FN.get-breakpoint-value($breakpoint);
+  
+  @media (min-width: #{$bp-val}) {
+    .flex\@#{$breakpoint} {
+      display: flex;
+
       // Direction
       &.row\@#{$breakpoint} { flex-direction: row; }
       &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
@@ -127,12 +342,20 @@
       &.evenly\@#{$breakpoint} { justify-content: space-evenly; }
 
       // Align
-      &.items-start\@#{$breakpoint} { align-items: flex-start; }
-      &.items-end\@#{$breakpoint} { align-items: flex-end; }
-      &.items-center\@#{$breakpoint} { align-items: center; }
-      &.items-baseline\@#{$breakpoint} { align-items: baseline; }
-      &.items-stretch\@#{$breakpoint} { align-items: stretch; }
+      &.x-start\@#{$breakpoint} { align-items: flex-start; }
+      &.x-end\@#{$breakpoint} { align-items: flex-end; }
+      &.x-center\@#{$breakpoint} { align-items: center; }
+      &.x-baseline\@#{$breakpoint} { align-items: baseline; }
+      &.x-stretch\@#{$breakpoint} { align-items: stretch; }
 
+      &.x-content-start\@#{$breakpoint} { align-content: flex-start; }
+      &.x-content-end\@#{$breakpoint} { align-content: flex-end; }
+      &.x-content-center\@#{$breakpoint} { align-content: center; }
+      &.x-content-between\@#{$breakpoint} { align-content: space-between; }
+      &.x-content-around\@#{$breakpoint} { align-content: space-around; }
+      &.x-content-evenly\@#{$breakpoint} { align-content: space-evenly; }
+      &.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
+      
       // Width (using column count)
       & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
       & > .w-full\@#{$breakpoint} { @include f-w-full; }

package/src/styles/layouts/_grid.scss

@@ -1,73 +1,83 @@
+// Section: Layout
+// Module: Grid | Grid Inline
+
+@use 'sass:math';
+@use '../utilities/functions' as FN;
 @use '../utilities/variables' as *;
 
-// Grid Container Mixins
-@mixin grid {
-  display: grid;
-}
+/**
+ * @description Establishes a grid container.
+ */
+@mixin grid {display: grid;}
 
-@mixin grid-inline {
-  display: inline-grid;
-}
+/**
+ * @description Establishes a inline-grid container.
+ */
+@mixin grid-inline {display: inline-grid;}
 
 // Grid Template Mixins
-@mixin grid-cols($count) {
-  grid-template-columns: repeat($count, minmax(0, 1fr));
-}
+@mixin cols($count) {grid-template-columns: repeat($count, minmax(0, 1fr));}
+@mixin rows($count) {grid-template-rows: repeat($count, minmax(0, 1fr));}
 
-@mixin grid-rows($count) {
-  grid-template-rows: repeat($count, minmax(0, 1fr));
+@mixin grid-cols-custom($template) {
+  // Convert underscores to spaces so "1fr_auto" becomes "1fr auto"
+  $converted: FN.str-replace($template, "_", " ");
+  grid-template-columns: $converted;
 }
 
 // Auto-fit/fill Mixins
-@mixin grid-auto-fit($min-width) {
-  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
-}
-
-@mixin grid-auto-fill($min-width) {
-  grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));
-}
+@mixin auto-fit($min-width) {grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));}
+@mixin auto-fill($min-width) {grid-template-columns: repeat(auto-fill, minmax($min-width, 1fr));}
 
 // Grid Flow Mixins
-@mixin grid-flow-row { grid-auto-flow: row; }
-@mixin grid-flow-col { grid-auto-flow: column; }
-@mixin grid-flow-dense { grid-auto-flow: dense; }
+@mixin flow-in-row { grid-auto-flow: row; }
+@mixin flow-in-col { grid-auto-flow: column; }
+@mixin flow-dense-items { grid-auto-flow: dense; }
 
 // Grid Alignment Mixins
-@mixin justify-items($value) {
-  justify-items: $value;
-}
 
-@mixin align-items($value) {
-  align-items: $value;
-}
+/**
+ * @description justify-items container.
+ * @param {string} $value - The value for the justify-items property.
+ */
+@mixin justify-items($value) {justify-items: $value;}
 
-@mixin place-items($value) {
-  place-items: $value;
-}
+/**
+ * @description Establishes a align-items container.
+ * @param {string} $value - The value for the align-items property.
+ */
+@mixin align-items($value) {align-items: $value;}
+
+/**
+ * @description Establishes a place-items container.
+ * @param {string} $value - The value for the place-items property.
+ */
+@mixin place-items($value) {place-items: $value;}
 
 // Grid Item Placement Mixins
-@mixin col-span($span) {
-  grid-column: span $span / span $span;
-}
+@mixin span-col($span) {grid-column: span $span / span $span;}
+@mixin span-row($span) {grid-row: span $span / span $span;}
+@mixin col-start($start) {grid-column-start: $start;}
+@mixin col-end($end) {grid-column-end: $end;}
+@mixin row-start($start) {grid-row-start: $start;}
+@mixin row-end($end) {grid-row-end: $end;}
 
-@mixin row-span($span) {
-  grid-row: span $span / span $span;
+@mixin grid-position($col, $row) {
+  grid-column: $col;
+  grid-row: $row;
 }
-
-@mixin col-start($start) {
-  grid-column-start: $start;
+@mixin position-col($col) {
+  grid-column: $start;
 }
-
-@mixin col-end($end) {
-  grid-column-end: $end;
+@mixin position-row($row) {
+  grid-row: $row;
 }
 
-@mixin row-start($start) {
-  grid-row-start: $start;
-}
 
-@mixin row-end($end) {
-  grid-row-end: $end;
+/// EXAMPLE USAGE
+.custom-grid {
+  display: grid;
+  @include grid-cols-custom("1fr_auto_1fr");
 }
 
 // Classes
@@ -75,15 +85,17 @@
 .grid.inline { @include grid-inline; }
 
 // Grid Template Classes
-@for $i from 1 through $column-count {
-  .grid.cols-#{$i} { @include grid-cols($i); }
-  .grid.rows-#{$i} { @include grid-rows($i); }
-
-  // Responsive grid columns
-  @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
-      .grid.cols-#{$i}#{$breakpoint} {
-        @include grid-cols($i);
+@each $breakpoint, $width in $breakpoints {
+    // Responsive grid columns
+    @media (min-width: #{$width}) {
+      .grid { @include grid; }
+
+      @for $i from 1 through $column-count {
+        .grid.cols-#{$i} { @include cols($i); }
+        .grid.rows-#{$i} { @include rows($i); }
+    
+      .grid.cols-#{$i}\@#{$breakpoint} {
+        @include cols($i);
       }
     }
   }
@@ -91,14 +103,22 @@
 
 // Generate Column Span Classes with Responsive Variants
 @for $i from 1 through $column-count {
-  .col-span-#{$i} {
-    @include col-span($i);
+  .span-col-#{$i} {
+    @include span-col($i);
+  }
+
+  .span-row-#{$i} {
+    @include span-row($i);
   }
 
   @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
-      .col-span-#{$i}\@#{$breakpoint} {
-        @include col-span($i);
+    @media (min-width: #{$width}) {
+      .span-col-#{$i}\@#{$breakpoint} {
+        @include span-col($i);
+      }
+
+      .span-row-#{$i}\@#{$breakpoint} {
+        @include span-row($i);
       }
     }
   }
@@ -107,14 +127,14 @@
 
 // Auto-fit/fill Classes
 @each $breakpoint, $width in $breakpoints {
-  .grid.auto-fit-#{$breakpoint} { @include grid-auto-fit($width); }
-  .grid.auto-fill-#{$breakpoint} { @include grid-auto-fill($width); }
+  .grid.auto-fit-#{$breakpoint} { @include auto-fit($width); }
+  .grid.auto-fill-#{$breakpoint} { @include auto-fill($width); }
 }
 
 // Flow Classes
-.grid.flow-row { @include grid-flow-row; }
-.grid.flow-col { @include grid-flow-col; }
-.grid.flow-dense { @include grid-flow-dense; }
+.grid.flow-row { @include flow-in-row; }
+.grid.flow-col { @include flow-in-col; }
+.grid.flow-dense { @include flow-dense-items; }
 
 // Alignment Classes
 $alignments: (
@@ -130,14 +150,14 @@ $alignments: (
   .place-items-#{$name} { place-items: $value; }
 
   @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
+    @media (min-width: #{$width}) {
       .justify-items-#{$name}\@#{$breakpoint} {
         justify-items: $value;
       }
       .align-items-#{$name}\@#{$breakpoint} {
         align-items: $value;
       }
-      .place-items-#{$name}\@#{$breakpoint} {
+      .place-items-#{$name}\@#{$breakpoint} {  
         place-items: $value;
       }
     }