@nuvoui/core 1.0.1 → 1.1.2

package/dist/main.js

@@ -1 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();

package/src/js/main.js

@@ -1 +0,0 @@
-import '../styles/index.scss';

package/src/logo.svg

@@ -1,12 +0,0 @@
-<svg width="418" height="418" viewBox="0 0 418 418" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_4118_5137" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="418" height="418">
-<rect width="418" height="418" fill="#F1F4D8"/>
-</mask>
-<g mask="url(#mask0_4118_5137)">
-<rect width="418" height="418" fill="#F1F4D8"/>
-<path d="M418 419H77L296.5 262.5L418 201V419Z" fill="#0476A4"/>
-<path d="M316.794 -185.998L487.294 109.316L242.011 -2.52617L128 -76.9983L316.794 -185.998Z" fill="#0476A4"/>
-<line x1="-17.2721" y1="410.484" x2="431.728" y2="185.484" stroke="#5FCFFF" stroke-width="28"/>
-<circle cx="267" cy="183" r="66.5" stroke="#FF7B00" stroke-width="15"/>
-</g>
-</svg>

package/src/styles/components/_button.scss

@@ -1,261 +0,0 @@
-// _button.scss
-@use 'sass:map';
-
-@use '../utilities/variables' as *;
-@use '../utilities/typography' as *;
-@use '../utilities/borders' as *;
-@use '../themes/theme' as *;
-
-
-// Button Base Mixins
-@mixin btn-base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid transparent;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-  }
-
-  // Loading state
-  &.loading {
-    position: relative;
-    color: transparent !important;
-    pointer-events: none;
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: 1rem;
-      height: 1rem;
-      border: 1px solid;
-      border-radius: 50%;
-      border-right-color: transparent;
-      animation: spin 0.75s linear infinite;
-    }
-  }
-}
-
-// Button Variants
-@mixin btn-solid($color) {
-  background-color: theme-color($color);
-  color: if($color == 'light', black, white); /* var(--text-inverse); */
-
-  &: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);
-    color: var(--text-inverse);
-  }
-
-  &:active:not(:disabled) {
-    background-color: theme-color($color, 'active');
-  }
-}
-
-@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');
-  }
-
-  &:active:not(:disabled) {
-    background-color: theme-color($color, '25');
-  }
-}
-
-// Button Sizes
-@mixin btn-size($size) {
-  font-size: map.get($font-sizes, $size);
-  padding: map.get($padding-map, $size);
-
-  .btn.icon {
-    $icon-sizes: (
-      'xs': 0.75rem,
-      'sm': 1rem,
-      'md': 1.25rem,
-      'lg': 1.5rem,
-      'xl': 1.75rem
-    );
-    
-    width: map.get($icon-sizes, $size);
-    height: map.get($icon-sizes, $size);
-  }
-}
- 
-// Button Shapes
-@mixin btn-shape($shape) {
-  @if $shape == 'rounded' {
-    @include rounded(0.375rem);
-  } @else if $shape == 'pill' {
-    border-radius: 9999px;
-  } @else if $shape == 'square' {
-    border-radius: 0;
-  }
-}
-
-@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
-    
-    // Color variants override
-    @each $name, $color in $colors {
-      &.#{$name} {
-        @include btn-outline($name);
-      }
-    }
-  }
-  
-  // Ghost variant
-  &.ghost {
-    @include btn-ghost('text-secondary'); // Default ghost style
-    
-    // Color variants override
-    @each $name, $color in $colors {
-      &.#{$name} {
-        @include btn-ghost($name);
-      }
-    }
-  }
-  
-  // Color variants for solid buttons
-  @each $name, $color in $colors {
-    &.#{$name} {
-      @include btn-solid($name);
-    }
-  }
-}
-
-
-
-// Icon Only Buttons
-.btn.icon {
-  padding: 0.5rem;
-  
-  &.btn-xs { padding: 0.25rem; }
-  &.btn-sm { padding: 0.375rem; }
-  &.btn-lg { padding: 0.75rem; }
-  &.btn-xl { padding: 1rem; }
-}
-
-// 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'); }
-
-.btn-group {
-  @include btn-group-base;
-
-   // Color variants for solid buttons
-   @each $name, $color in $colors {
-    &.#{$name} > .btn{
-      @include btn-solid($name);
-    }
-  }
-}
-
-// Outline variant
-.btn-group.outline > .btn {
-  @include btn-outline('text-secondary'); // Default outline style
-}
-
-// Color variants override
-@each $name, $color in $colors {
-  .btn-group.outline.#{$name} > .btn {
-    @include btn-outline($name);
-  }
-}
-
-
-// Outline variant
-.btn-group.ghost > .btn {
-  @include btn-ghost('text-secondary'); // Default outline style
-}
-
-// 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/_form.scss

@@ -1,195 +0,0 @@
-// _forms.scss
-@use 'sass:map';
-@use '../utilities/variables' as *;
-@use '../themes/theme' as Theme;
-
-
-
-@mixin form-inline {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-// Label Mixins
-@mixin form-label {
-  position: absolute;
-  left: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: all 0.2s ease-in-out;
-  color: var(--text-secondary);
-  pointer-events: none;
-  font-size: 1rem;
-}
-
-@mixin form-label-float {
-  top: 0;
-  font-size: 0.875rem;
-  transform: translateY(-50%);
-  background: var(--bg-primary);
-  padding: 0 0.5rem;
-}
-
-// Input Mixins
-@mixin form-input {
-  width: 100%;
-  padding: 0.85rem;
-  border: 1px solid Theme.theme-color('border-color');
-  border-radius: 0.5rem;
-  background: Theme.theme-color('input-bg');
-  color: var(--text-primary);
-  font-size: 1rem;
-  transition: all 0.2s ease-in-out;
-  
-  &:focus {
-    outline: none;
-    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;
-  
-  &:has(input:not(:placeholder-shown)) > label.form-label,
-  &:has(input:focus) > label.form-label {
-    @include form-label-float;
-  }
-
-  // Change label color if input is focused
-  &:has(input:focus) > label {
-    color: var(--primary);
-  }
-}
-
-// Validation Mixins
-@mixin form-valid {
-  border-color: var(--success);
-  
-  & + label {
-    color: var(--success);
-  }
-}
-
-@mixin form-invalid {
-  border-color: var(--danger);
-  
-  & + label {
-    color: var(--danger);
-  }
-}
-
-// 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;
-  background-position: right 1rem center;
-  padding-right: 2.5rem;
-}
-
-// Checkbox & Radio Mixins
-@mixin form-selection {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-@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);
-  margin-right: 0.5rem;
-  cursor: pointer;
-  
-  &:checked {
-    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, .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; }
-
-
-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
-// [data-theme="dark"] {
-//   .form-input,
-//   .form-select {
-//     background-color: var(--bg-secondary);
-//     border-color: var(--border-color-dark);
-    
-//     &:focus {
-//       border-color: var(--primary-dark);
-//     }
-//   }
-// }
-
-// Accessibility
-@media (prefers-reduced-motion: reduce) {
-  .form-input,
-  .form-label {
-    transition: none;
-  }
-}

package/src/styles/components/_hamburger.scss

@@ -1,72 +0,0 @@
-@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;
-        }
-    }
-}

package/src/styles/components/_navbar.scss

@@ -1,137 +0,0 @@
-// _navbar.scss
-
-@use '../utilities/media-queries' as Responsive;
-@use '../utilities/shadows' as *;
-@use '../utilities/variables' as *;
-@use '../layouts/container' as Container;
-@use '../layouts/flex' as Flex;
-
-.navbar {
-    @include Container.container-flex;
-    @include Flex.align-center;
-    @include Flex.between;
-
-    &:hover {
-        @include shadow('lg', 'dark');
-    }
-
-    background-color: var(--nav-bg);
-
-    .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;
-            }
-        }
-
-        // Nested dropdowns
-        .submenu {
-            top: 0;
-            left: 100%;
-        }
-    }
-
-    .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
-            }
-        }
-    }
-
-    // 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;
-            width: 100%;
-
-            &[data-visible="true"] {
-                display: flex;
-            }
-
-            li {
-                width: 100%;
-                text-align: left;
-
-                .submenu {
-                    position: relative;
-                    left: 0;
-                    top: 0;
-                    display: none;
-                    visibility: visible;
-                    opacity: 1;
-                    pointer-events: auto;
-                    box-shadow: none;
-                    background-color: var(--nav-hover);
-
-                    &[data-visible="true"] {
-                        display: flex;
-                        flex-direction: column;
-                    }
-                }
-            }
-        }
-
-        .navbar__cta {
-            width: 100%;
-            justify-content: center;
-            padding: 1rem 0;
-        }
-    }
-}