@nuvoui/core 0.3.0 → 1.0.1

package/src/styles/components/_navbar.scss

@@ -1,125 +1,137 @@
 // _navbar.scss
 
-@use '../utilities/variables' as *;
+@use '../utilities/media-queries' as Responsive;
 @use '../utilities/shadows' as *;
+@use '../utilities/variables' as *;
 @use '../layouts/container' as Container;
 @use '../layouts/flex' as Flex;
-@use '../layouts/grid' as Grid;
-
-:root {
-    --shadow-color: 255, 0, 0;
-}
 
 .navbar {
-
-    @include Flex.between;
     @include Container.container-flex;
+    @include Flex.align-center;
+    @include Flex.between;
 
-    // @include Grid.grid-flow-row;
-    // @include Grid.grid-flow-col;
-    // @include Grid.grid-cols(2);
-    // @include Container.container-grid;
-
-    & {
-        @include Flex.align-center;
-        // @include shadow('md', 'colored');
+    &:hover {
+        @include shadow('lg', 'dark');
+    }
 
-        background-color: var(--nav-bg);
+    background-color: var(--nav-bg);
 
-        &:hover {
-            @include shadow('lg', 'dark');
+    .logo {
+        img {
+            max-height: 40px;
+            width: auto;
         }
+    }
 
-        .logo {
-            img {
-                max-height: 40px;
-                width: auto;
+    .submenu {
+        background-color: white;
+        display: block;
+        visibility: hidden; // Use visibility instead of display
+        pointer-events: none; // Prevents interaction when hidden
+        opacity: 0;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 200px;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        box-shadow: 0 2px 5px rgba(0 0 0 / 10%);
+
+        // Animation
+        transition:
+            opacity 0.2s ease-in-out,
+            visibility 0.2s ease-in-out;
+
+        li {
+            a {
+                padding: 0.75rem 1rem;
             }
         }
 
-        .menu {
-            @include Flex.flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-
-            li {
-                position: relative;
-
-                a {
-                    display: block;
-                    padding: 1rem;
-                    text-decoration: none;
-                    color: var(--nav-text);
-                    transition: background-color 0.2s ease-in-out;
+        // Nested dropdowns
+        .submenu {
+            top: 0;
+            left: 100%;
+        }
+    }
 
-                    &:hover {
-                        background-color: var(--nav-hover);
-                    }
+    .menu {
+        @include Flex.flex;
+        
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            position: relative;
+
+            a {
+                display: block;
+                padding: 1rem;
+                text-decoration: none;
+                color: var(--nav-text);
+                transition: background-color 0.2s ease-in-out;
+
+                &:hover {
+                    background-color: var(--nav-hover);
                 }
+            }
 
-                // Dropdown styles
-                &:hover>.submenu {
-                    display: block;
-                    visibility: visible;
-                    opacity: 1;
-                    pointer-events: auto; // Re-enable interactions
-                }
+            // Dropdown styles
+            &:hover>.submenu {
+                display: block;
+                visibility: visible;
+                opacity: 1;
+                pointer-events: auto; // Re-enable interactions
             }
         }
+    }
 
-        .submenu {
-            background-color: white;
-            display: block;
-            visibility: hidden; // Use visibility instead of display
-            pointer-events: none; // Prevents interaction when hidden
-            opacity: 0;
-
+    // Responsive styles
+    @include Responsive.media-down(md) {
+        .menu {
+            transition: all 1.3s ease;
+            display: none;
+            flex-direction: column;
+            background-color: var(--nav-bg);
             position: absolute;
             top: 100%;
             left: 0;
-            min-width: 200px;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            background-color: var(--nav-bg);
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-
-            // Animation
-            transition:
-                opacity 0.2s ease-in-out,
-                visibility 0.2s ease-in-out;
-
-            li {
-                a {
-                    padding: 0.75rem 1rem;
-                }
-            }
+            width: 100%;
 
-            // Nested dropdowns
-            .submenu {
-                top: 0;
-                left: 100%;
+            &[data-visible="true"] {
+                display: flex;
             }
-        }
-
-        @media (max-width: 768px) {
-            flex-direction: column;
 
-            .menu {
-                flex-direction: column;
+            li {
                 width: 100%;
+                text-align: left;
 
                 .submenu {
-                    position: static;
+                    position: relative;
+                    left: 0;
+                    top: 0;
                     display: none;
-                    width: 100%;
+                    visibility: visible;
+                    opacity: 1;
+                    pointer-events: auto;
+                    box-shadow: none;
+                    background-color: var(--nav-hover);
 
-                    li a {
-                        padding-left: 2rem;
+                    &[data-visible="true"] {
+                        display: flex;
+                        flex-direction: column;
                     }
                 }
             }
         }
+
+        .navbar__cta {
+            width: 100%;
+            justify-content: center;
+            padding: 1rem 0;
+        }
     }
 }

package/src/styles/index.scss

@@ -1,6 +1,5 @@
-// Forward all modules for external use
+/* Forward all modules for external use */
 @forward 'utilities/variables';
-@forward './global';
 
 // Base styles
 @forward 'base/reset';
@@ -8,9 +7,14 @@
 
 // Utilities
 @forward 'utilities/animations';
+@forward 'utilities/borders'; 
 @forward 'utilities/colors';
+@forward 'utilities/display';
+@forward 'utilities/opacity';
 @forward 'utilities/position';
+@forward 'utilities/media-queries';
 @forward 'utilities/shadows';
+@forward 'utilities/sizing';
 @forward 'utilities/spacing';
 @forward 'utilities/typography';
 @forward 'utilities/tooltips';
@@ -27,8 +31,6 @@
 
 // Components
 @forward 'components/button';
+@forward 'components/hamburger';
 @forward 'components/navbar';
-@forward 'components/form';
-
-// Local usage
-@use './global' as *;
+@forward 'components/form';

package/src/styles/layouts/_container.scss

@@ -12,6 +12,7 @@
 
 @mixin container {
   @include container-base;
+  
   & {
     @each $breakpoint, $width in $container-max-widths {
       @media (min-width: map.get($breakpoints, $breakpoint)) {

package/src/styles/layouts/_flex.scss

@@ -38,9 +38,19 @@
 @mixin self-center {align-self: center;}
 @mixin self-stretch {align-self: stretch;}
 
+@mixin shrink {flex-shrink: 1;}
+@mixin shrink-0 {flex-shrink: 0;}
+@mixin shrink-2 {flex-shrink: 2;}
+
 // Flex Child Mixins
-@mixin w-full {flex: 0 0 100%;}
-@mixin w-auto {flex: 1 1 auto;}
+@mixin f-w-full {flex: 0 0 100%;}
+@mixin f-w-auto {flex: 1 1 auto;}
+@mixin grow { flex: 1 1 0%; }
+@mixin no-grow { flex: none; }
+
+@mixin w-col($size) {
+  flex: 0 0 math.percentage(math.div($size, $column-count)) !important;
+}
 
 // Base flex container
 .flex {
@@ -72,19 +82,22 @@
   &.items-baseline { align-items: baseline; }
   &.items-stretch { align-items: stretch; }
   
-  // Gap modifiers
-  @for $i from 0 through 8 {
-    &.gap-#{$i} { gap: #{$i * 0.25}rem; }
-  }
-  
   // Child flex items (using column count)
-  > .w-auto { flex: 1 1 auto; }
-  > .w-full { flex: 0 0 100%; }
-  
+  > .w-auto { @include f-w-auto }
+  > .w-full { @include f-w-full }
+  > .grow { @include grow; }
+  > .no-grow { @include no-grow; }
+
+  > .order-first { order: -1; }
+  > .order-last { order: 9999; }
+  > .order-none { order: 0; }
+
+  > .shrink { @include shrink; }
+  > .shrink-0 { @include shrink-0; }
+  > .shrink-2 { @include shrink-2; }
   @for $i from 1 through $column-count {
-    > .w-#{$i} {
-      flex: 0 0 math.percentage( math.div($i, $column-count));
-    }
+    > .w-#{$i} { @include w-col($i) }
+    > .order-#{$i} { order: $i; }
   }
 }
 
@@ -92,45 +105,48 @@
 // Responsive variants
 @each $breakpoint, $width in $breakpoints {
   @media (min-width: $width) {
-    // Direction
-    .flex.row\@#{$breakpoint} { flex-direction: row; }
-    .flex.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
-    .flex.col\@#{$breakpoint} { flex-direction: column; }
-    .flex.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
-    
-    // Wrap
-    .flex.wrap\@#{$breakpoint} { flex-wrap: wrap; }
-    .flex.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
-    .flex.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
-    
-    // Justify
-    .flex.start\@#{$breakpoint} { justify-content: flex-start; }
-    .flex.end\@#{$breakpoint} { justify-content: flex-end; }
-    .flex.center\@#{$breakpoint} { justify-content: center; }
-    .flex.between\@#{$breakpoint} { justify-content: space-between; }
-    .flex.around\@#{$breakpoint} { justify-content: space-around; }
-    .flex.evenly\@#{$breakpoint} { justify-content: space-evenly; }
-
-    // Align
-    .flex.items-start\@#{$breakpoint} { align-items: flex-start; }
-    .flex.items-end\@#{$breakpoint} { align-items: flex-end; }
-    .flex.items-center\@#{$breakpoint} { align-items: center; }
-    .flex.items-baseline\@#{$breakpoint} { align-items: baseline; }
-    .flex.items-stretch\@#{$breakpoint} { align-items: stretch; }
-    
-    // Width (using column count)
-    .flex.w-auto\@#{$breakpoint} { flex: 1 1 auto; }
-    .flex.w-full\@#{$breakpoint} { flex: 0 0 100%; }
-    
-    @for $i from 1 through $column-count {
-      .flex.w-#{$i}\@#{$breakpoint} {
-        flex: 0 0 math.percentage(math.div($i, $column-count));
+    .flex {
+      // Direction
+      &.row\@#{$breakpoint} { flex-direction: row; }
+      &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
+      &.col\@#{$breakpoint} { flex-direction: column; }
+      &.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
+      
+      // Wrap
+      &.wrap\@#{$breakpoint} { flex-wrap: wrap; }
+      &.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
+      &.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
+      
+      // Justify
+      &.start\@#{$breakpoint} { justify-content: flex-start; }
+      &.end\@#{$breakpoint} { justify-content: flex-end; }
+      &.center\@#{$breakpoint} { justify-content: center; }
+      &.between\@#{$breakpoint} { justify-content: space-between; }
+      &.around\@#{$breakpoint} { justify-content: space-around; }
+      &.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; }
+
+      // Width (using column count)
+      & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
+      & > .w-full\@#{$breakpoint} { @include f-w-full; }
+      & > .grow\@#{$breakpoint} { @include grow; }
+      & > .no-grow\@#{$breakpoint} { @include no-grow; }
+      & > .order-first\@#{$breakpoint} { order: -1; }
+      & > .order-last\@#{$breakpoint} { order: 9999; }
+      & > .order-none\@#{$breakpoint} { order: 0; }
+      @for $i from 1 through $column-count {
+        & > .w-#{$i}\@#{$breakpoint} { @include w-col($i) }
+        & > .order-#{$i}\@#{$breakpoint} { order: $i; }
+        & > .shrink\@#{$breakpoint} { @include shrink; }
+        & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
+        & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
       }
     }
-    
-    // Gap
-    @for $i from 0 through 8 {
-      .flex.gap-#{$i}\@#{$breakpoint} { gap: #{$i * 0.25}rem; }
-    }
   }
 }

package/src/styles/layouts/_grid.scss

@@ -82,15 +82,13 @@
   // Responsive grid columns
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .grid.#{$breakpoint}\:cols-#{$i} {
+      .grid.cols-#{$i}#{$breakpoint} {
         @include grid-cols($i);
       }
     }
   }
 }
 
-
-
 // Generate Column Span Classes with Responsive Variants
 @for $i from 1 through $column-count {
   .col-span-#{$i} {
@@ -99,7 +97,7 @@
 
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .#{$breakpoint}\:col-span-#{$i} {
+      .col-span-#{$i}\@#{$breakpoint} {
         @include col-span($i);
       }
     }
@@ -108,7 +106,7 @@
 
 
 // Auto-fit/fill Classes
-@each $breakpoint, $width in $column-widths {
+@each $breakpoint, $width in $breakpoints {
   .grid.auto-fit-#{$breakpoint} { @include grid-auto-fit($width); }
   .grid.auto-fill-#{$breakpoint} { @include grid-auto-fill($width); }
 }
@@ -133,13 +131,13 @@ $alignments: (
 
   @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {
-      .#{$breakpoint}\:justify-items-#{$name} {
+      .justify-items-#{$name}\@#{$breakpoint} {
         justify-items: $value;
       }
-      .#{$breakpoint}\:align-items-#{$name} {
+      .align-items-#{$name}\@#{$breakpoint} {
         align-items: $value;
       }
-      .#{$breakpoint}\:place-items-#{$name} {
+      .place-items-#{$name}\@#{$breakpoint} {
         place-items: $value;
       }
     }

package/src/styles/themes/_theme.scss

@@ -98,7 +98,7 @@ $opacity-levels: (
   // Tooltip
   --tooltip-bg: var(--dark);
   --tooltip-text: var(--light);
-  --tooltip-shadow-color: rgba(0,0,0,0.4);
+  --tooltip-shadow-color: rgb(0 0 0 / 40%);
   --microtip-transition-duration: 0.518s;
   --microtip-transition-delay: .2s;
   --microtip-transition-easing: cubic-bezier(0.16, 1, 0.9, 1);

package/src/styles/utilities/_animations.scss

@@ -6,7 +6,7 @@
 $generated-keyframes: ();
 
 
-@mixin generateBounceKeyframes($keyframeName, $x, $y) {
+@mixin generate-bounce-keyframes($keyframeName, $x, $y) {
     @if not list.index($generated-keyframes, $keyframeName) {
         $generated-keyframes: list.append($generated-keyframes, $keyframeName) !global;
         
@@ -14,9 +14,11 @@ $generated-keyframes: ();
             0% {
                 transform: translateX(-#{$x}) translateY(-#{$y});
             }
+
             50% {
                 transform: translateX(#{$x}) translateY(#{$y});
             }
+
             100% {
                 transform: translateX(-#{$x}) translateY(-#{$y});
             }
@@ -24,8 +26,7 @@ $generated-keyframes: ();
     }
 }
 
-
-@mixin animate-move($props) {
+@mixin animate-bounce($props) {
     $defaults: (
         vertical: 0%,
         horizontal: 0%,
@@ -33,11 +34,11 @@ $generated-keyframes: ();
         timing: ease-in-out,
         iteration: infinite
     );
+    
     // Merge with defaults
     $props: map.merge($defaults, $props);
-
-    $x: map.get($props, 'vertical');
-    $y: map.get($props, 'horizontal');
+    $x: map.get($props, 'horizontal');
+    $y: map.get($props, 'vertical');
     $duration: map.get($props, 'duration');
     $easing: map.get($props, 'timing');
     $iteration: map.get($props, 'iteration');
@@ -47,16 +48,15 @@ $generated-keyframes: ();
     $y-unit: if($y, safe-unit-name(get-unit($y)), '-');
     
     // Clean values (remove units)
-    $cleanX: if($x, strip-unit($x), 0);
-    $cleanY: if($y, strip-unit($y), 0);
-
-    $animationName: anim-bounce-#{$cleanX}#{$x-unit}-#{$cleanY}#{$y-unit};
+    $clean-x: if($x, strip-unit($x), 0);
+    $clean-y: if($y, strip-unit($y), 0);
+    $animation-name: anim-bounce-#{$clean-x}#{$x-unit}-#{$clean-y}#{$y-unit};
 
 
     & {
-        animation: #{$animationName} $duration $easing $iteration;
+        animation: #{$animation-name} $duration $easing $iteration;
     }
-    @include generateBounceKeyframes($animationName, $x, $y);
+    @include generate-bounce-keyframes($animation-name, $x, $y);
 }
 
 
@@ -72,64 +72,9 @@ $generated-keyframes: ();
     .anim__fade-in-reveal {
         scale: .2;
         opacity: 0.7;
-
         animation: fade-in-reveal linear forwards;
         animation-timeline: view();
-
         animation-range-start: cover;
         animation-range-end: 550px;
-
-        // animation-range: enter;
-        // animation-range: exit;
-    }
-}
-
-@keyframes fadeOutAndCollapse {
-    0% {
-        opacity: 1;
-        bottom: 0px;
-        height: auto;
-    }
-    50% {
-        bottom: -500px;
-        opacity: 0;
-    }
-    100% {
-        bottom: 100%;
-        opacity: 0;
-        height: 0;
-        overflow: hidden;
     }
-}
-
-
-
-
-// @keyframes moveVertical {
-//     0% {
-//       transform: translateY(-5%);
-//     }
-  
-//     50% {
-//       transform: translateY(5%);
-//     }
-  
-//     100% {
-//       transform: translateY(-5%);
-//     }
-//   }
-  
-//   @keyframes moveHorizontal {
-//     0% {
-//       transform: translateX(-50%) translateY(-10%);
-//     }
-  
-//     50% {
-//       transform: translateX(50%) translateY(10%);
-//     }
-  
-//     100% {
-//       transform: translateX(-50%) translateY(-10%);
-//     }
-//   }
-  
+}

package/src/styles/utilities/_borders.scss

@@ -0,0 +1,36 @@
+// _spacing.scss
+
+@use 'sass:math';
+@use './variables' as *;
+
+// todo: mixins mising and also finalize .b .bb or not to .b
+@mixin border($val) { $val: if($val == 0, $val, $val + px); border-width: $val; }
+@mixin rounded($val) { border-radius: $val; }
+
+.border { @include border(1); }
+.border-0 { @include border(0); }
+
+@each $i in 0 1 2 4 8 {
+    .border-#{$i} { @include border($i); }
+}
+
+@each $color-name, $color-value in $colors {
+    .border-#{$color-name} { border-color: $color-value; }
+}
+
+.rounded { @include rounded(0.25rem); }
+.square { @include rounded(0) }
+.pill { @include rounded(9999px); }
+
+// Responsive Position Classes
+@each $breakpoint, $width in $breakpoints {
+    @media (min-width: $width) {
+ 
+        @each $i in 0 1 2 4 8 {
+            .border-#{$i}\@#{$breakpoint} { @include border($i); }
+        }
+        @each $i in 0 2 3 4 5 10 15 20 25 {
+            .rounded-#{$i}\@#{$breakpoint} { @include border($i); }
+        }
+    }
+}