@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_nav.scss

@@ -0,0 +1,175 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+// Base Nav
+.nav {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+    gap: 0.5rem; // Add gap
+}
+
+.nav-link {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: $gray-600;
+    text-decoration: none;
+    border-radius: $border-radius; // Default rounded
+    transition: all 0.2s ease;
+    font-weight: 500;
+
+    &:hover,
+    &:focus {
+        color: $dark;
+        background-color: $gray-100;
+        outline: 0;
+    }
+
+    &.disabled {
+        color: $gray-400;
+        pointer-events: none;
+        cursor: default;
+    }
+
+    &.active {
+        color: $primary;
+        font-weight: 600;
+    }
+}
+
+// Tabs (Underline style)
+.nav-tabs {
+    border-bottom: 2px solid $gray-200;
+    gap: 0; // No gap for connected tabs
+    margin-bottom: 0;
+
+    .nav-link {
+        margin-bottom: -2px;
+        background: none;
+        border: 0;
+        border-bottom: 2px solid transparent;
+        border-radius: 0;
+        color: $gray-600;
+
+        &:hover {
+            color: $dark;
+            background-color: transparent;
+            border-bottom-color: $gray-300;
+        }
+
+        &.active {
+            color: $primary;
+            background: none;
+            border-bottom-color: $primary;
+        }
+    }
+}
+
+// Line Tabs (Chakra Style)
+.nav-tabs-line {
+    border-bottom: 2px solid $gray-100;
+    gap: 1.5rem;
+    margin-bottom: 0;
+
+    .nav-link {
+        padding: 0.75rem 0;
+        border: 0;
+        border-bottom: 2px solid transparent;
+        border-radius: 0;
+        color: $gray-500;
+        margin-bottom: -2px;
+
+        &:hover {
+            color: $dark;
+            border-bottom-color: $gray-200;
+        }
+
+        &.active {
+            color: $primary;
+            border-bottom-color: $primary;
+            background: none;
+        }
+    }
+}
+
+// Enclosed Tabs
+.nav-tabs-enclosed {
+    background-color: $gray-50;
+    padding: 0.25rem;
+    border-radius: $border-radius-lg;
+    display: inline-flex;
+    border: 1px solid $gray-200;
+    margin-bottom: 0;
+
+    .nav-link {
+        border-radius: $border-radius;
+        color: $gray-600;
+        padding: 0.4rem 1.25rem;
+        border: 1px solid transparent;
+
+        &.active {
+            background-color: $white;
+            color: $primary;
+            border-color: $gray-200;
+            box-shadow: $box-shadow-sm;
+        }
+
+        &:hover:not(.active) {
+            background-color: rgba($white, 0.5);
+            color: $dark;
+        }
+    }
+}
+
+// Pills (Segmented Control / HeroUI Capsular)
+.nav-pills {
+    background-color: $gray-100; // Container bg
+    padding: 0.25rem;
+    border-radius: $border-radius-lg;
+    display: inline-flex;
+    gap: 0;
+
+    .nav-link {
+        border-radius: $border-radius;
+        color: $gray-600;
+        padding: 0.375rem 1rem;
+
+        &:hover {
+            color: $dark;
+            background-color: rgba(255, 255, 255, 0.5);
+        }
+
+        &.active,
+        .show>.nav-link {
+            color: $dark;
+            background-color: #fff;
+            box-shadow: $box-shadow-sm; // Elevated pill
+        }
+    }
+
+    // Fill variant
+    &.nav-fill {
+        display: flex;
+        width: 100%;
+
+        .nav-item,
+        .nav-link {
+            flex: 1 1 auto;
+            text-align: center;
+        }
+    }
+}
+
+// Tab Content
+.tab-content {
+    >.tab-pane {
+        display: none;
+
+        &.active,
+        &.show {
+            display: block;
+        }
+    }
+}

package/src/scss/components/_navbar.scss

@@ -0,0 +1,228 @@
+@use "../abstracts/variables" as *;
+
+.navbar {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1.5rem;
+    transition: all 0.3s ease;
+    background-color: #fff;
+    border-bottom: 1px solid #e2e8f0;
+
+    // Glassmorphism variant
+    &.navbar-glass {
+        background-color: rgba(255, 255, 255, 0.85);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
+        position: sticky;
+        top: 0;
+        z-index: 1020;
+    }
+
+    &.navbar-transparent {
+        background-color: transparent;
+        border-bottom: none;
+        box-shadow: none;
+    }
+
+    &.navbar-dark {
+        background-color: #0f172a; // Slate-900
+        border-bottom: 1px solid #1e293b;
+        color: #fff;
+
+        .navbar-brand,
+        .nav-link {
+            color: #f8fafc;
+
+            &:hover {
+                color: #fff;
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+        }
+
+        .form-control {
+            background-color: #1e293b;
+            border-color: #334155;
+            color: #fff;
+
+            &::placeholder {
+                color: #94a3b8;
+            }
+
+            &:focus {
+                background-color: #0f172a;
+                border-color: #3b82f6;
+            }
+        }
+    }
+}
+
+.navbar-brand {
+    padding: 0;
+    margin-right: 2rem;
+    font-size: 1.25rem;
+    font-weight: 700;
+    text-decoration: none;
+    color: #0f172a; // Slate-900
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    letter-spacing: -0.025em;
+
+    img {
+        height: 32px;
+        width: auto;
+    }
+}
+
+.navbar-nav {
+    display: flex;
+    flex-direction: row;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+    gap: 0.5rem;
+
+    @media (max-width: 991.98px) {
+        flex-direction: column;
+        width: 100%;
+        margin-top: 1rem;
+        gap: 0.25rem;
+    }
+}
+
+.nav-link {
+    display: block;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    font-weight: 500;
+    color: #64748b; // Slate-500
+    border-radius: 0.375rem;
+    transition: all 0.2s ease;
+    font-size: 0.9375rem;
+
+    &:hover {
+        color: #0f172a; // Slate-900
+        background-color: #f1f5f9; // Slate-100
+    }
+
+    &.active {
+        color: #2563eb; // Primary Blue
+        background-color: rgba(37, 99, 235, 0.08);
+        font-weight: 600;
+    }
+}
+
+// Utilities for Navbar
+.navbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.navbar-search {
+    position: relative;
+    max-width: 320px;
+    width: 100%;
+
+    .form-control {
+        padding-left: 2.5rem;
+        border-radius: 99px;
+        font-size: 0.875rem;
+    }
+
+    .search-icon {
+        position: absolute;
+        left: 1rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #94a3b8;
+        pointer-events: none;
+    }
+}
+
+// Toggler logic
+.navbar-toggler {
+    padding: 0.25rem 0.75rem;
+    font-size: 1.25rem;
+    line-height: 1;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    transition: box-shadow 0.15s ease-in-out;
+    color: rgba(0, 0, 0, 0.55);
+    border-color: rgba(0, 0, 0, 0.1);
+
+    &:focus {
+        text-decoration: none;
+        outline: 0;
+        box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
+    }
+}
+
+.navbar-toggler-icon {
+    display: inline-block;
+    width: 1.5em;
+    height: 1.5em;
+    vertical-align: middle;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+}
+
+// Dark variant toggler
+.navbar-dark {
+    .navbar-toggler {
+        color: rgba(255, 255, 255, 0.55);
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .navbar-toggler-icon {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+    }
+}
+
+// Responsive layout enforcement
+@media (max-width: 991.98px) {
+    .navbar-collapse {
+        margin-top: 1rem;
+        padding: 1rem;
+        background-color: #fff;
+        border-radius: 0.5rem;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+        // Ensure within glass navbar it looks seamless or distinct
+        .navbar-glass & {
+            background-color: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+        }
+
+        .navbar-dark & {
+            background-color: #1e293b; // Slate-800
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+        }
+    }
+
+    .navbar-nav {
+        flex-direction: column !important; // Force column layout overriding Bootstrap
+        gap: 0.5rem;
+        width: 100%;
+    }
+
+    .navbar-actions {
+        margin-top: 1rem;
+        justify-content: flex-start; // Align left on mobile
+        flex-wrap: wrap;
+    }
+
+    .navbar-search {
+        max-width: 100%; // Full width on mobile
+        margin-bottom: 1rem;
+    }
+}

package/src/scss/components/_number-input.scss

@@ -0,0 +1,67 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.number-input {
+    display: flex;
+    align-items: center;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius;
+    overflow: hidden;
+    width: fit-content;
+
+    button {
+        background-color: $gray-100;
+        border: none;
+        padding: 0.5rem 0.75rem;
+        cursor: pointer;
+        color: $gray-600;
+        transition: background-color 0.2s, color 0.2s;
+
+        &:hover:not(:disabled) {
+            background-color: $gray-200;
+            color: $dark;
+        }
+
+        &:active:not(:disabled) {
+            background-color: $gray-300;
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+
+    input[type="number"] {
+        border: none;
+        text-align: center;
+        width: 3rem;
+        padding: 0.5rem 0;
+        -moz-appearance: textfield;
+        appearance: textfield;
+
+        &:focus {
+            outline: none;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+
+    // Solid Variant
+    &.number-input-solid {
+        border: none;
+        background-color: $gray-100;
+
+        input {
+            background-color: transparent;
+        }
+
+        button {
+            background-color: transparent;
+        }
+    }
+}

package/src/scss/components/_offcanvas.scss

@@ -0,0 +1,123 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.offcanvas {
+    position: fixed;
+    bottom: 0;
+    z-index: 1045;
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    visibility: hidden;
+    background-color: #fff;
+    background-clip: padding-box;
+    outline: 0;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: $box-shadow-lg; // Stronger shadow
+
+    &.show {
+        visibility: visible;
+    }
+}
+
+.offcanvas-start {
+    top: 0;
+    left: 0;
+    width: 400px;
+    border-right: 0; // Remove border, use shadow
+    transform: translateX(-100%);
+
+    &.show {
+        transform: none;
+    }
+}
+
+.offcanvas-end {
+    top: 0;
+    right: 0;
+    width: 400px;
+    border-left: 0;
+    transform: translateX(100%);
+
+    &.show {
+        transform: none;
+    }
+}
+
+.offcanvas-top {
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 30vh;
+    max-height: 100%;
+    border-bottom: 0;
+    transform: translateY(-100%);
+
+    &.show {
+        transform: none;
+    }
+}
+
+.offcanvas-bottom {
+    right: 0;
+    left: 0;
+    height: 30vh;
+    max-height: 100%;
+    border-top: 0;
+    transform: translateY(100%);
+
+    &.show {
+        transform: none;
+    }
+}
+
+.offcanvas-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem; // More breathing room
+
+    .btn-close {
+        padding: 0.5rem;
+        margin-right: -0.5rem;
+        color: $gray-500;
+        transition: color 0.2s;
+
+        &:hover {
+            color: $dark;
+        }
+    }
+}
+
+.offcanvas-title {
+    margin-bottom: 0;
+    line-height: 1.5;
+    font-weight: $font-weight-bold;
+    font-size: 1.25rem;
+}
+
+.offcanvas-body {
+    flex-grow: 1;
+    padding: 1.5rem;
+    overflow-y: auto;
+}
+
+.offcanvas-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1040;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3); // Lighter overlay
+    backdrop-filter: blur(4px); // HeroUI Blur
+    transition: opacity 0.3s linear;
+
+    &.fade {
+        opacity: 0;
+    }
+
+    &.show {
+        opacity: 1;
+    }
+}

package/src/scss/components/_pagination.scss

@@ -0,0 +1,64 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.pagination {
+    display: flex;
+    padding-left: 0;
+    list-style: none;
+}
+
+.page-item {
+    &:first-child {
+        .page-link {
+            border-top-left-radius: $border-radius;
+            border-bottom-left-radius: $border-radius;
+        }
+    }
+
+    &:last-child {
+        .page-link {
+            border-top-right-radius: $border-radius;
+            border-bottom-right-radius: $border-radius;
+        }
+    }
+
+    &.active .page-link {
+        z-index: 3;
+        color: #fff;
+        background-color: $primary;
+        border-color: $primary;
+    }
+
+    &.disabled .page-link {
+        color: $secondary;
+        pointer-events: none;
+        background-color: #fff;
+        border-color: #dee2e6;
+    }
+}
+
+.page-link {
+    position: relative;
+    display: block;
+    color: $primary;
+    text-decoration: none;
+    background-color: #fff;
+    border: 1px solid #dee2e6;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    padding: 0.375rem 0.75rem;
+
+    &:hover {
+        z-index: 2;
+        color: color.scale($primary, $lightness: -20%);
+        background-color: #e9ecef;
+        border-color: #dee2e6;
+    }
+
+    &:focus {
+        z-index: 3;
+        color: color.scale($primary, $lightness: -20%);
+        background-color: #e9ecef;
+        outline: 0;
+        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    }
+}

package/src/scss/components/_placeholders.scss

@@ -0,0 +1,52 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.placeholder {
+    display: inline-block;
+    min-height: 1em;
+    vertical-align: middle;
+    cursor: wait;
+    background-color: currentColor;
+    opacity: 0.5;
+
+    &.btn::before {
+        display: inline-block;
+        content: "";
+    }
+}
+
+.placeholder-xs {
+    min-height: .6em;
+}
+
+.placeholder-sm {
+    min-height: .8em;
+}
+
+.placeholder-lg {
+    min-height: 1.2em;
+}
+
+.placeholder-glow {
+    .placeholder {
+        animation: placeholder-glow 2s ease-in-out infinite;
+    }
+}
+
+@keyframes placeholder-glow {
+    50% {
+        opacity: 0.2;
+    }
+}
+
+.placeholder-wave {
+    mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
+    mask-size: 200% 100%;
+    animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+    100% {
+        mask-position: -200% 0%;
+    }
+}