@nuvoui/core 1.1.8 → 1.2.1

package/src/styles/utilities/_transitions.scss

@@ -1,5 +1,5 @@
 // _transitions.scss
-@use './variables' as *;
+@use '../abstracts'  as *;
 
 /**
  * Transition Utilities
@@ -42,18 +42,13 @@
   transition-delay: $time;
 }
 
-// Base transition
-.transition {
-  @include transition;
-}
-
-// Property-specific transitions
-.transition-none { @include transition-none; }
-.transition-all { @include transition-all; }
-.transition-colors { @include transition-colors; }
-.transition-opacity { @include transition-opacity; }
-.transition-shadow { @include transition-shadow; }
-.transition-transform { @include transition-transform; }
+// Timing functions
+$timing-functions: (
+  'linear': linear,
+  'in': cubic-bezier(0.4, 0, 1, 1),
+  'out': cubic-bezier(0, 0, 0.2, 1),
+  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
+);
 
 // Durations
 $durations: (
@@ -68,31 +63,6 @@ $durations: (
   '1000': 1000ms,
 );
 
-@each $name, $value in $durations {
-  .duration-#{$name} {
-    @include duration($value);
-  }
-}
-
-// Timing functions
-$timing-functions: (
-  'linear': linear,
-  'in': cubic-bezier(0.4, 0, 1, 1),
-  'out': cubic-bezier(0, 0, 0.2, 1),
-  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
-);
-
-@each $name, $value in $timing-functions {
-  .ease-#{$name} {
-    transition-timing-function: $value;
-  }
-}
-
-// Specific timing function classes
-.ease-linear { @include ease-linear; }
-.ease-in { @include ease-in; }
-.ease-out { @include ease-out; }
-.ease-in-out { @include ease-in-out; }
 
 // Delays
 $delays: (
@@ -107,45 +77,79 @@ $delays: (
   '1000': 1000ms,
 );
 
-@each $name, $value in $delays {
-  .delay-#{$name} {
-    @include delay($value);
+
+@if $generate-utility-classes {
+  // Base transition
+  .transition {
+    @include transition;
   }
-}
 
-// Responsive variants
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    // Base transition
-    .transition\@#{$breakpoint} {
-      @include transition;
+  // Property-specific transitions
+  .transition-none { @include transition-none; }
+  .transition-all { @include transition-all; }
+  .transition-colors { @include transition-colors; }
+  .transition-opacity { @include transition-opacity; }
+  .transition-shadow { @include transition-shadow; }
+  .transition-transform { @include transition-transform; }
+
+  @each $name, $value in $durations {
+    .duration-#{$name} {
+      @include duration($value);
     }
-    
-    // Property-specific transitions
-    .transition-none\@#{$breakpoint} { @include transition-none; }
-    .transition-all\@#{$breakpoint} { @include transition-all; }
-    .transition-colors\@#{$breakpoint} { @include transition-colors; }
-    .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
-    .transition-shadow\@#{$breakpoint} { @include transition-shadow; }
-    .transition-transform\@#{$breakpoint} { @include transition-transform; }
-    
-    // Duration responsive variants
-    @each $name, $value in $durations {
-      .duration-#{$name}\@#{$breakpoint} {
-        @include duration($value);
-      }
+  }
+
+  @each $name, $value in $timing-functions {
+    .ease-#{$name} {
+      transition-timing-function: $value;
+    }
+  }
+
+  // Specific timing function classes
+  .ease-linear { @include ease-linear; }
+  .ease-in { @include ease-in; }
+  .ease-out { @include ease-out; }
+  .ease-in-out { @include ease-in-out; }
+
+  @each $name, $value in $delays {
+    .delay-#{$name} {
+      @include delay($value);
     }
-    
-    // Timing function responsive variants
-    .ease-linear\@#{$breakpoint} { @include ease-linear; }
-    .ease-in\@#{$breakpoint} { @include ease-in; }
-    .ease-out\@#{$breakpoint} { @include ease-out; }
-    .ease-in-out\@#{$breakpoint} { @include ease-in-out; }
-    
-    // Delay responsive variants
-    @each $name, $value in $delays {
-      .delay-#{$name}\@#{$breakpoint} {
-        @include delay($value);
+  }
+
+  // Responsive variants
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      // Base transition
+      .transition\@#{$breakpoint} {
+        @include transition;
+      }
+      
+      // Property-specific transitions
+      .transition-none\@#{$breakpoint} { @include transition-none; }
+      .transition-all\@#{$breakpoint} { @include transition-all; }
+      .transition-colors\@#{$breakpoint} { @include transition-colors; }
+      .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
+      .transition-shadow\@#{$breakpoint} { @include transition-shadow; }
+      .transition-transform\@#{$breakpoint} { @include transition-transform; }
+      
+      // Duration responsive variants
+      @each $name, $value in $durations {
+        .duration-#{$name}\@#{$breakpoint} {
+          @include duration($value);
+        }
+      }
+      
+      // Timing function responsive variants
+      .ease-linear\@#{$breakpoint} { @include ease-linear; }
+      .ease-in\@#{$breakpoint} { @include ease-in; }
+      .ease-out\@#{$breakpoint} { @include ease-out; }
+      .ease-in-out\@#{$breakpoint} { @include ease-in-out; }
+      
+      // Delay responsive variants
+      @each $name, $value in $delays {
+        .delay-#{$name}\@#{$breakpoint} {
+          @include delay($value);
+        }
       }
     }
   }

package/src/styles/utilities/_typography.scss

@@ -4,7 +4,7 @@
 @use 'sass:map';
 
 // Import variables
-@use '../utilities/variables' as VAR;
+@use '../abstracts'  as VAR;
 
 
 /**
@@ -29,12 +29,12 @@
 /**
 * Text size utility
 * @param {string} $size - The size of the text.
-*/
+*/ 
 @mixin text-size($size) {
   @if map.has-key(VAR.$font-sizes, $size) {
     font-size: map.get(VAR.$font-sizes, $size);
   } @else {
-    @warn "Font size '#{$size}' not found in $font-sizes map.";
+    font-size: $size;
   }
   
 }
@@ -102,10 +102,6 @@
 @mixin whitespace-pre-wrap { white-space: pre-wrap; }
 
 
-
-
-
-
 @mixin responsive-typography($breakpoint: null) {
   $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
 
@@ -157,25 +153,26 @@
   .truncate-3#{$suffix} { @include truncate-lines(3); }
   .truncate-4#{$suffix} { @include truncate-lines(4); }
   .truncate-5#{$suffix} { @include truncate-lines(5); }
-
 }
 
-@include responsive-typography();
-.break-normal { @include break-normal; }
-.break-words { @include break-words; }
-.break-all { @include break-all; }
-.whitespace-normal { @include whitespace-normal; }
-.whitespace-nowrap { @include whitespace-nowrap; }
-.whitespace-pre { @include whitespace-pre; }
-.whitespace-pre-line { @include whitespace-pre-line; }
-.whitespace-pre-wrap { @include whitespace-pre-wrap; }
-
-@each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-        @each $size, $val in VAR.$font-sizes {
-            .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
-        }
-        @include responsive-typography($breakpoint);
-    }
-}
+@if VAR.$generate-utility-classes {
+  @include responsive-typography;
+  .break-normal { @include break-normal; }
+  .break-words { @include break-words; }
+  .break-all { @include break-all; }
+  .whitespace-normal { @include whitespace-normal; }
+  .whitespace-nowrap { @include whitespace-nowrap; }
+  .whitespace-pre { @include whitespace-pre; }
+  .whitespace-pre-line { @include whitespace-pre-line; }
+  .whitespace-pre-wrap { @include whitespace-pre-wrap; }
+
+  @each $breakpoint, $width in VAR.$breakpoints {
+      @media (min-width: #{$width}) {
+          @each $size, $val in VAR.$font-sizes {
+              .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
+          }
+          @include responsive-typography($breakpoint);
+      }
+  }
 
+}

package/src/styles/utilities/_functions.scss

@@ -1,84 +0,0 @@
-@use 'sass:string';
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:meta';
-@use 'variables' as *;
-
-@function str-replace($string, $search, $replace: " ") {
-    $index: string.index($string, $search);
-    @if $index {
-      @return string.slice($string, 1, $index - 1)
-        + $replace
-        + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
-    }
-    @return $string;
-  }
-
-@function get-breakpoint-value($bp) {
-    @if map.has-key($breakpoints, $bp) {
-        @return map.get($breakpoints, $bp);
-    } @else if meta.type-of($bp) == number {
-        @return $bp;
-    } @else {
-        @warn 'Invalid breakpoint: #{$bp}';
-        @return null;
-    }
-}
-
-@function strip-unit($value) {
-  @return math.div($value, ($value * 0 + 1));
-}
-
-@function safe-unit-name($unit) {
-  
-  @if $unit == '%' {
-      @return 'per';
-  } @else if $unit == '.' {
-      @return 'dot';
-  } @else {
-      @return $unit;
-  }
-}
-
-@function get-unit($value) {
-  $value-str: #{$value};
-  
-  // Relative length units
-  @if string.index($value-str, 'em') {
-      @return 'em';
-  } @else if string.index($value-str, 'rem') {
-      @return 'rem';
-  } @else if string.index($value-str, '%') {
-      @return '%';
-  }
-  
-  // Viewport units
-  @else if string.index($value-str, 'vw') {
-      @return 'vw';
-  } @else if string.index($value-str, 'vh') {
-      @return 'vh';
-  } @else if string.index($value-str, 'vmin') {
-      @return 'vmin';
-  } @else if string.index($value-str, 'vmax') {
-      @return 'vmax';
-  }
-  
-  // Absolute length units
-  @else if string.index($value-str, 'px') {
-      @return 'px';
-  } @else if string.index($value-str, 'cm') {
-      @return 'cm';
-  } @else if string.index($value-str, 'mm') {
-      @return 'mm';
-  } @else if string.index($value-str, 'in') {
-      @return 'in';
-  } @else if string.index($value-str, 'pt') {
-      @return 'pt';
-  } @else if string.index($value-str, 'pc') {
-    @return 'pc';
-  }
-  
-  // Return empty string if no unit found
-  @return '';
-}

package/src/styles/utilities/_variables.scss

@@ -1,126 +0,0 @@
-@use 'sass:map';
-@use 'sass:math';
-
-$base-size: 16;
-@function rem($px) {
-  @if $px == 0 {
-    @return 0;
-  }
-  
-  // Strip units if $px has any
-  $value: if(math.unit($px) == '', $px, math.div($px, math.unit($px)));
-  
-  @return math.div($value, $base-size) * 1rem;
-}
-
-// Global variables that might be used across different modules
-$enable-debuger: false !default;
-$enable-dark-mode: true !default;
-$enable-rtl: true !default;;
-$enable-reduced-motion: true !default;
-$column-count: 12 !default;
-
-$default-container-name: nuvoui-container !default;
-$nuvoui-container-queries: false !default;
-
-$primary: #007bff !default;
-$secondary: #6c757d !default;
-$success: #28a745 !default;
-$danger: #dc3545 !default;
-$warning: #ffc107 !default;
-$info: #17a2b8 !default;
-
-$color-primitives: (
-  'gray': #6b7280,
-  'red': #ef4444,
-  'blue': #3b82f6,
-  'green': #22c55e,
-  'yellow': #eab308,
-  'purple': #a855f7,
-  'pink': #ec4899
-) !default;
-
-$theme-tokens: (
-  'background',
-  'foreground',
-  'surface',
-  'border',
-  'text-primary',
-  'text-secondary'
-) !default;
-
-// Default theme config (can be overridden)
-$light-theme: (
-  'background': #fff,
-  'foreground': #000,
-  'surface': #fff,
-  'border': #e5e7eb,
-  'text-primary': #000,
-  'text-secondary': #4b5563
-) !default;
-
-$dark-theme: (
-  'background': #000,
-  'foreground': #fff,
-  'surface': #1a1a1a,
-  'border': #2e2e2e,
-  'text-primary': #fff,
-  'text-secondary': #a3a3a3
-) !default;
-
-// Breakpoints
-$breakpoints: (
-  'xs': 480px,
-  'sm': 640px,
-  'md': 768px,
-  'lg': 1024px,
-  'xl': 1280px,
-  '2xl': 1536px, 
-) !default;
-
-$grid-item-sizes: (
-  'xs': 200px,
-  'sm': 250px, 
-  'md': 300px,
-  'lg': 350px,
-  'xl': 400px
-) !default;
-
-// _variables.scss
-$font-sizes: (
-  'xs': 0.75rem,  // 12px
-  'sm': 0.875rem, // 14px
-  'md': 1rem,     // 16px
-  'lg': 1.25rem,  // 20px
-  'xl': 1.5rem,   // 24px
-  '2xl': 1.75rem, // 28px
-  '3xl': 2rem,    // 32px
-  '4xl': 2.5rem   // 40px
-) !default;
-
-@debug rem(4);
-// Updated spacing map
-$spacings: (
-  0: 0,
-  1: rem(4),    // 0.25rem
-  2: rem(8),    // 0.5rem
-  3: rem(12),   // 0.75rem
-  4: rem(16),   // 1rem
-  5: rem(20),   // 1.25rem
-  6: rem(24),   // 1.5rem
-  8: rem(32),   // 2rem
-  10: rem(40),  // 2.5rem
-  12: rem(48),  // 3rem
-  16: rem(64),  // 4rem
-  20: rem(80),  // 5rem
-  24: rem(96),  // 6rem
-  32: rem(128), // 8rem
-  40: rem(160), // 10rem
-  48: rem(192), // 12rem
-  56: rem(224), // 14rem
-  64: rem(256)  // 16rem
-);
-
-$percentages: (
-  0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
-) !default;