@nuvoui/core 0.3.1 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "0.3.1",
+  "version": "1.0.1",
   "description": "NuvoUI Core SCSS Library",
   "main": "dist/index.css",
   "module": "src/styles/index.scss",
@@ -10,8 +10,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && npm run build:scss",
-    "build:scss": "sass src/styles/index.scss:dist/index.css --style compressed",
+    "build": "vite build",
     "prepare": "npm run build",
     "lint": "stylelint \"src/**/*.scss\"",
     "format": "prettier --write \"src/**/*.{scss,js,json}\"",
@@ -48,7 +47,10 @@
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
+    "prettier": "^3.3.3",
     "sass": "^1.81.0",
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "vite": "^5.4.11"
   },
   "peerDependencies": {

package/src/styles/base/_base.scss

@@ -1,8 +1,12 @@
 @use 'sass:map';
 
-// Import variables
+/* Import variables */
 @use '../utilities/variables' as *;
 
+:root {
+  --font-family-base: system-ui, -apple-system, "BlinkMacSystemFont", 'Segoe UI', "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
+}
+
 // Base typography styles
 html {
   font-size: 16px;
@@ -66,4 +70,24 @@ a {
   &:hover {
     color: var(--link-hover-color);
   }
-}
+}
+
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.focus\:outline-none:focus {
+  outline: none;
+}
+
+.focus\:ring:focus {
+  box-shadow: 0 0 0 3px rgb(66 153 225 / 50%);
+}

package/src/styles/base/_reset.scss

@@ -26,7 +26,8 @@ dd {
 // Set core body defaults
 body {
   min-height: 100vh;
-  text-rendering: optimizeSpeed;
+  min-height: 100dvh;
+  text-rendering: optimizespeed;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -50,8 +51,9 @@ textarea,
 select {
   font: inherit;
   transition: all 0.2s ease-in-out;
+  
   &:focus {
-      box-shadow: inset 0 0 7px 0px #60b0cd; /* Change this to your preferred color and width */
+      box-shadow: inset 0 0 7px 0 #60b0cd; /* Change this to your preferred color and width */
       outline: 2px solid #40c1bf; /* Change this to your preferred color and width */
   }
 }
@@ -74,6 +76,7 @@ ol {
   list-style: none;
   margin: 0;
   padding: 0;
+  
   // Modern properties
   padding-inline-start: 0;  // Replaces padding-left
   margin-block: 0;          // Replaces margin-top/bottom

package/src/styles/components/_button.scss

@@ -3,16 +3,9 @@
 
 @use '../utilities/variables' as *;
 @use '../utilities/typography' as *;
+@use '../utilities/borders' as *;
 @use '../themes/theme' as *;
 
-// Define text size map
-$text-size-map: (
-  'xs': 0.75rem,
-  'sm': 0.875rem,
-  'md': 1rem,
-  'lg': 1.125rem,
-  'xl': 1.25rem
-);
 
 // Button Base Mixins
 @mixin btn-base {
@@ -54,25 +47,22 @@ $text-size-map: (
 // Button Variants
 @mixin btn-solid($color) {
   background-color: theme-color($color);
-  color: white;//var(--text-inverse);
+  color: if($color == 'light', black, white); /* var(--text-inverse); */
 
-  &:hover:not(:disabled) {
-    background-color: theme-color($color, 'hover');
-  }
-
-  &:active:not(:disabled) {
-    background-color: theme-color($color, 'active');
-  }
-
-  &:disabled {
-    background-color: theme-color($color, 'disabled');
-  }
+  &:disabled { background-color: theme-color($color, 'disabled'); }
+  &:hover:not(:disabled) { background-color: theme-color($color, 'hover'); }
+  &:active:not(:disabled) { background-color: theme-color($color, 'active'); }
 }
 
 @mixin btn-outline($color) {
   background-color: transparent;
   border-color: theme-color($color);
   color: theme-color($color);
+  
+  &:disabled {
+    border-color: theme-color($color, 'disabled');
+    color: theme-color($color, 'disabled');
+  }
 
   &:hover:not(:disabled) {
     background-color: theme-color($color);
@@ -82,17 +72,16 @@ $text-size-map: (
   &:active:not(:disabled) {
     background-color: theme-color($color, 'active');
   }
-
-  &:disabled {
-    border-color: theme-color($color, 'disabled');
-    color: theme-color($color, 'disabled');
-  }
 }
 
 @mixin btn-ghost($color) {
   background-color: transparent;
   color: theme-color($color);
 
+  &:disabled {
+    color: theme-color($color, 'disabled');
+  }
+
   &:hover:not(:disabled) {
     background-color: theme-color($color, '10');
   }
@@ -100,24 +89,11 @@ $text-size-map: (
   &:active:not(:disabled) {
     background-color: theme-color($color, '25');
   }
-
-  &:disabled {
-    color: theme-color($color, 'disabled');
-  }
 }
 
 // Button Sizes
 @mixin btn-size($size) {
-  font-size: map.get($text-size-map, $size);
-  
-  $padding-map: (
-    'xs': 0.25rem 0.5rem,
-    'sm': 0.375rem 0.75rem,
-    'md': 0.5rem 1rem,
-    'lg': 0.75rem 1.5rem,
-    'xl': 1rem 2rem
-  );
-
+  font-size: map.get($font-sizes, $size);
   padding: map.get($padding-map, $size);
 
   .btn.icon {
@@ -133,11 +109,11 @@ $text-size-map: (
     height: map.get($icon-sizes, $size);
   }
 }
-
+ 
 // Button Shapes
 @mixin btn-shape($shape) {
   @if $shape == 'rounded' {
-    border-radius: 0.375rem;
+    @include rounded(0.375rem);
   } @else if $shape == 'pill' {
     border-radius: 9999px;
   } @else if $shape == 'square' {
@@ -145,13 +121,48 @@ $text-size-map: (
   }
 }
 
+@mixin btn-group-base {
+  display: inline-flex;
+  position: relative;
+  .btn { position: relative; }
+  
+  // Handle z-index for hover states
+  .btn:hover { z-index: 1; }
+
+  // Remove double borders between buttons
+  .btn:not(:first-child) { margin-left: -1px; }
+  
+  .btn:not(:first-child, :last-child) { border-radius: 0; }
+  
+  .btn:first-child:dir(ltr) { 
+    border-top-right-radius: 0; 
+    border-bottom-right-radius: 0; 
+  }
+  
+  .btn:last-child:dir(ltr) { 
+    border-top-left-radius: 0; 
+    border-bottom-left-radius: 0; 
+  }
+  
+  @if $enable-rtl {
+    .btn:first-child:dir(rtl) { 
+      border-top-left-radius: 0; 
+      border-bottom-left-radius: 0; 
+    }
+    
+    .btn:last-child:dir(rtl) { 
+      border-top-right-radius: 0; 
+      border-bottom-right-radius: 0; 
+    }
+  }
+}
+
 // Base Button Class
 .btn {
   @include btn-base;
   @include btn-size('md');
   @include btn-shape('rounded');
 
-
   // Outline variant
   &.outline {
     @include btn-outline('text-secondary'); // Default outline style
@@ -185,17 +196,6 @@ $text-size-map: (
 }
 
 
-// Sizes
-.btn.xs { @include btn-size('xs'); }
-.btn.sm { @include btn-size('sm'); }
-.btn.md { @include btn-size('md'); }
-.btn.lg { @include btn-size('lg'); }
-.btn.xl { @include btn-size('xl'); }
-
-// Shapes
-.btn.rounded { @include btn-shape('rounded'); }
-.btn.pill { @include btn-shape('pill'); }
-.btn.square { @include btn-shape('square'); }
 
 // Icon Only Buttons
 .btn.icon {
@@ -207,41 +207,55 @@ $text-size-map: (
   &.btn-xl { padding: 1rem; }
 }
 
-// Loading Animation
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/**
+// Sizes
+.btn-group.xs > .btn, .btn.xs { @include btn-size('xs'); }
+.btn-group.sm > .btn, .btn.sm { @include btn-size('sm'); }
+.btn-group.md > .btn, .btn.md { @include btn-size('md'); }
+.btn-group.lg > .btn, .btn.lg { @include btn-size('lg'); }
+.btn-group.xl > .btn, .btn.xl { @include btn-size('xl'); }
 
+// Shapes
+.btn-group.rounded > .btn, .btn.rounded { @include btn-shape('rounded'); }
+.btn-group.pill    > .btn, .btn.pill { @include btn-shape('pill'); }
+.btn-group.square  > .btn, .btn.square { @include btn-shape('square'); }
 
-<!-- Basic buttons -->
-<button class="btn primary">Primary</button>
-<button class="btn outline secondary">Secondary</button>
-<button class="btn ghost info">Info</button>
+.btn-group {
+  @include btn-group-base;
 
-<!-- Sizes -->
-<button class="btn primary xs">Extra Small</button>
-<button class="btn primary xl">Extra Large</button>
+   // Color variants for solid buttons
+   @each $name, $color in $colors {
+    &.#{$name} > .btn{
+      @include btn-solid($name);
+    }
+  }
+}
 
-<!-- Shapes -->
-<button class="btn primary pill">Pill Button</button>
+// Outline variant
+.btn-group.outline > .btn {
+  @include btn-outline('text-secondary'); // Default outline style
+}
 
-<!-- With Icons -->
-<button class="btn btn-primary">
-  <svg class="btn-icon"><!-- icon --></svg>
-  With Icon
-</button>
+// Color variants override
+@each $name, $color in $colors {
+  .btn-group.outline.#{$name} > .btn {
+    @include btn-outline($name);
+  }
+}
 
-<!-- Icon Only -->
-<button class="btn btn-primary btn-icon-only">
-  <svg class="btn-icon"><!-- icon --></svg>
-</button>
 
-<!-- Loading State -->
-<button class="btn btn-primary loading">Loading</button>
+// Outline variant
+.btn-group.ghost > .btn {
+  @include btn-ghost('text-secondary'); // Default outline style
+}
 
-<!-- Disabled State -->
-<button class="btn btn-primary" disabled>Disabled</button>
+// Color variants override
+@each $name, $color in $colors {
+  .btn-group.ghost.#{$name} > .btn {
+    @include btn-ghost($name);
+  }
+}
 
-*/
+// Loading Animation
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}

package/src/styles/components/_checkbox.scss

@@ -1,23 +0,0 @@
-// Base checkbox reset
-.checkbox {
-    @apply appearance-none cursor-pointer select-none;
-    @apply w-4 h-4 border-2 rounded;
-    @apply transition-all duration-200;
-    @apply focus-visible:outline-2 focus-visible:outline-offset-2;
-  
-    &:checked {
-      @apply bg-current border-current;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
-    }
-  
-    &:indeterminate {
-      @apply bg-current border-current;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8z'/%3E%3C/svg%3E");
-    }
-  }
-  
-  // Size variants
-  .checkbox-sm { @apply w-3 h-3; }
-  .checkbox-md { @apply w-4 h-4; }
-  .checkbox-lg { @apply w-5 h-5; }
-  .checkbox-xl { @apply w-6 h-6; }

package/src/styles/components/_form.scss

@@ -3,11 +3,7 @@
 @use '../utilities/variables' as *;
 @use '../themes/theme' as Theme;
 
-// Form Container Mixins
-@mixin form-group {
-  position: relative;
-  margin-bottom: 1.5rem;
-}
+
 
 @mixin form-inline {
   display: flex;
@@ -51,13 +47,21 @@
     border-color: var(--primary);
     box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
   }
+}
+
+
+// Handle input with value or placeholder
+@mixin form-group {
+  position: relative;
+  margin-bottom: 1.5rem;
   
-  &:not(:placeholder-shown) + label {
+  &:has(input:not(:placeholder-shown)) > label.form-label,
+  &:has(input:focus) > label.form-label {
     @include form-label-float;
   }
-  
-  &:focus + label {
-    @include form-label-float;
+
+  // Change label color if input is focused
+  &:has(input:focus) > label {
     color: var(--primary);
   }
 }
@@ -82,6 +86,7 @@
 // Select Mixins
 @mixin form-select {
   @include form-input;
+
   appearance: none;
   background-image: url("data:image/svg+xml,..."); // todo: colored arrow svg
   background-repeat: no-repeat;
@@ -90,7 +95,7 @@
 }
 
 // Checkbox & Radio Mixins
-@mixin form-check {
+@mixin form-selection {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -98,41 +103,74 @@
   user-select: none;
 }
 
-@mixin form-check-input {
+@mixin form-selection-input {
+  &[type="checkbox"]{
+    border-radius: 0.25rem;
+  }
+  
+  &[type="radio"]{
+    border-radius: 20rem;
+  }
+  
   appearance: none;
   width: 1.25rem;
   height: 1.25rem;
   border: 2px solid var(--border-color);
-  border-radius: 0.25rem;
   margin-right: 0.5rem;
   cursor: pointer;
   
   &:checked {
-    background-color: var(--primary);
-    border-color: var(--primary);
+    background-color: var(--primary); border-color: var(--primary);
+    @each $name, $color in $colors { 
+      &.#{$name} {
+        background-color: Theme.theme-color($name); border-color: Theme.theme-color($name);}
+    }
+    
     background-image: url("data:image/svg+xml,..."); // todo: colored arrow svg
   }
 }
 
+// Input Sizes
+@mixin input-size($size) {
+  font-size: map.get($font-sizes, $size);
+  padding: map.get($padding-map, $size);
+}
+
 // Classes
 .form-group { @include form-group; }
 .form-inline { @include form-inline; }
 .form-label { @include form-label; }
 .form-input { @include form-input; }
 .form-select { @include form-select; }
-.form-check { @include form-check; }
-.form-check-input { @include form-check-input; }
+.form-check, .form-radio { @include form-selection; }
+.form-check-input, .form-radio-input { @include form-selection-input; }
 
 // Validation Classes
 .is-valid { @include form-valid; }
 .is-invalid { @include form-invalid; }
 
-// Sizes
-@for $i from 0 through 5 {
-  .form-input-#{$i} {
-    @include form-input;
-    padding: $i;
-  }
+
+small{
+  font-size: 0.875rem;
+  position: absolute;
+  right: 20px;
+  top: -10px;
+  background: #f8f9fa;
+  padding: 0 10px;
+}
+
+// Base Input Class
+.form-input, .form-select {
+  @include input-size('md'); // Default size
+
+  // Sizes
+  &.xs { @include input-size('xs'); }
+  &.sm { @include input-size('sm'); }
+  &.md { @include input-size('md'); }
+  &.lg { @include input-size('lg'); }
+  &.xl { @include input-size('xl'); }
+  &.xxl { @include input-size('2xl'); }
+  &.xxxl { @include input-size('3xl'); }
 }
 
 // Dark Mode Support

package/src/styles/components/_hamburger.scss

@@ -0,0 +1,72 @@
+@use "sass:math";
+@use 'sass:color';
+@use 'sass:map';
+
+@use '../utilities/media-queries' as Responsive;
+@use '../utilities/variables' as *;
+
+// _mixins.scss
+@mixin hamburger($color: currentColor, $size: 24px, $thickness: 2px) {
+    .hamburger {
+        --hamburger-color: #{$color};
+        --hamburger-size: #{$size};
+        --hamburger-thickness: #{$thickness};
+
+        &:focus {
+            outline: none;
+            box-shadow: none;
+        }
+
+        // display: none;
+        cursor: pointer;
+        width: var(--hamburger-size);
+        height: var(--hamburger-size);
+        position: relative;
+        border: 0;
+        background: transparent;
+        padding: 0;
+
+        span {
+            display: block;
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: var(--hamburger-thickness);
+            background-color: var(--hamburger-color);
+            transform-origin: center;
+            transition: transform 0.2s ease,
+                opacity 0.2s ease;
+
+            &:first-child {
+                top: 20%;
+            }
+
+            &:nth-child(2) {
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
+            &:last-child {
+                bottom: 20%;
+            }
+        }
+
+        &[aria-expanded="true"] span {
+            &:first-child {
+                transform: translateY(7px) rotate(45deg);
+            }
+
+            &:nth-child(2) {
+                opacity: 0;
+            }
+
+            &:last-child {
+                transform: translateY(-7px) rotate(-45deg);
+            }
+        }
+    
+        @include Responsive.media-up('md') {
+            display: none;
+        }
+    }
+}