@nuvoui/core 0.3.1 → 1.1.2

package/src/styles/components/_button.scss

@@ -1,247 +0,0 @@
-// _button.scss
-@use 'sass:map';
-
-@use '../utilities/variables' as *;
-@use '../utilities/typography' 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 {
-  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: 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');
-  }
-}
-
-@mixin btn-outline($color) {
-  background-color: transparent;
-  border-color: theme-color($color);
-  color: theme-color($color);
-
-  &:hover:not(:disabled) {
-    background-color: theme-color($color);
-    color: var(--text-inverse);
-  }
-
-  &: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);
-
-  &:hover:not(:disabled) {
-    background-color: theme-color($color, '10');
-  }
-
-  &: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
-  );
-
-  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' {
-    border-radius: 0.375rem;
-  } @else if $shape == 'pill' {
-    border-radius: 9999px;
-  } @else if $shape == 'square' {
-    border-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);
-    }
-  }
-}
-
-
-// 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 {
-  padding: 0.5rem;
-  
-  &.btn-xs { padding: 0.25rem; }
-  &.btn-sm { padding: 0.375rem; }
-  &.btn-lg { padding: 0.75rem; }
-  &.btn-xl { padding: 1rem; }
-}
-
-// Loading Animation
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/**
-
-
-<!-- Basic buttons -->
-<button class="btn primary">Primary</button>
-<button class="btn outline secondary">Secondary</button>
-<button class="btn ghost info">Info</button>
-
-<!-- Sizes -->
-<button class="btn primary xs">Extra Small</button>
-<button class="btn primary xl">Extra Large</button>
-
-<!-- Shapes -->
-<button class="btn primary pill">Pill Button</button>
-
-<!-- With Icons -->
-<button class="btn btn-primary">
-  <svg class="btn-icon"><!-- icon --></svg>
-  With Icon
-</button>
-
-<!-- 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>
-
-<!-- Disabled State -->
-<button class="btn btn-primary" disabled>Disabled</button>
-
-*/

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

@@ -1,157 +0,0 @@
-// _forms.scss
-@use 'sass:map';
-@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;
-  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);
-  }
-  
-  &:not(:placeholder-shown) + label {
-    @include form-label-float;
-  }
-  
-  &:focus + label {
-    @include form-label-float;
-    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-check {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-@mixin form-check-input {
-  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-image: url("data:image/svg+xml,..."); // todo: colored arrow svg
-  }
-}
-
-// 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; }
-
-// 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;
-  }
-}
-
-// 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/_navbar.scss

@@ -1,141 +0,0 @@
-// _navbar.scss
-
-@use '../utilities/responsive' 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;
-            }
-        }
-
-        .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
-                }
-            }
-        }
-
-        .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;
-            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;
-                }
-            }
-
-            // Nested dropdowns
-            .submenu {
-                top: 0;
-                left: 100%;
-            }
-        }
-
-        // 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;
-            }
-        }
-    }
-}

package/src/styles/utilities/_hamburger.scss

@@ -1,74 +0,0 @@
-@use "sass:math";
-@use 'sass:color';
-@use 'sass:map';
-@use '../utilities/responsive' as Responsive;
-
-@use './variables' as *;
-
-// _mixins.scss
-@mixin hamburger($color: currentColor, $size: 24px, $thickness: 2px) {
-    .hamburger {
-        @include Responsive.media-up('md') {
-            display: none;
-        }
-
-        & {
-            --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;
-
-            &[aria-expanded="true"] span {
-                &:first-child {
-                    transform: translateY(7px) rotate(45deg);
-                }
-
-                &:nth-child(2) {
-                    opacity: 0;
-                }
-
-                &:last-child {
-                    transform: translateY(-7px) rotate(-45deg);
-                }
-            }
-
-            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%;
-                }
-            }
-        }
-    }
-}