@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_popovers.scss

@@ -0,0 +1,69 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.popover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1060;
+    display: block;
+    max-width: 276px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    white-space: normal;
+    font-size: 0.875rem;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0; // No border
+    border-radius: $border-radius-lg;
+    box-shadow: $box-shadow-lg; // Strong shadow
+    opacity: 0;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+
+    &.show {
+        opacity: 1;
+    }
+
+    .popover-arrow {
+        position: absolute;
+        display: block;
+        width: 1rem;
+        height: 0.5rem;
+
+        &::before,
+        &::after {
+            position: absolute;
+            display: block;
+            content: "";
+            border-color: transparent;
+            border-style: solid;
+        }
+    }
+}
+
+.popover-header {
+    padding: 0.75rem 1rem;
+    margin-bottom: 0;
+    font-size: 1rem;
+    font-weight: $font-weight-semibold;
+    background-color: #fff; // White header blending
+    border-bottom: 1px solid $gray-100;
+    border-top-left-radius: $border-radius-lg;
+    border-top-right-radius: $border-radius-lg;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.popover-body {
+    padding: 1rem 1rem;
+    color: $body-color;
+}

package/src/scss/components/_progress.scss

@@ -0,0 +1,90 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.progress {
+    --e-progress-height: 1rem;
+    --e-progress-font-size: 0.75rem;
+    --e-progress-bg: #{$gray-200}; // Lighter gray
+    --e-progress-border-radius: #{$border-radius-lg}; // Rounded
+    --e-progress-box-shadow: none; // No inner shadow
+    --e-progress-bar-color: #fff;
+    --e-progress-bar-bg: #{$primary};
+    --e-progress-bar-transition: width 0.6s ease;
+
+    display: flex;
+    height: var(--e-progress-height);
+    overflow: hidden;
+    font-size: var(--e-progress-font-size);
+    background-color: var(--e-progress-bg);
+    border-radius: var(--e-progress-border-radius);
+    box-shadow: var(--e-progress-box-shadow);
+}
+
+.progress-bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--e-progress-bar-color);
+    text-align: center;
+    white-space: nowrap;
+    background-color: var(--e-progress-bar-bg);
+    transition: var(--e-progress-bar-transition);
+}
+
+.progress-bar-striped {
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 1rem 1rem;
+}
+
+@keyframes progress-bar-stripes {
+    0% {
+        background-position-x: 1rem;
+    }
+}
+
+.progress-bar-animated {
+    animation: progress-bar-stripes 1s linear infinite;
+}
+
+// Indeterminate (loading)
+.progress-indeterminate {
+    .progress-bar {
+        width: 100%;
+        background-color: transparent;
+        background-image: linear-gradient(to right, transparent 0%, $primary 50%, transparent 100%);
+        background-size: 200% 100%;
+        animation: progress-indeterminate 1.5s infinite linear;
+    }
+}
+
+@keyframes progress-indeterminate {
+    0% {
+        background-position: 100% 0;
+    }
+
+    100% {
+        background-position: -100% 0;
+    }
+}
+
+// Sizes
+.progress-sm {
+    --e-progress-height: 0.5rem;
+}
+
+.progress-md {
+    --e-progress-height: 1rem;
+}
+
+.progress-lg {
+    --e-progress-height: 1.5rem;
+    font-size: 1rem;
+}
+
+// Colors
+@each $color, $value in $theme-colors {
+    .progress-bar-#{$color} {
+        background-color: $value;
+    }
+}

package/src/scss/components/_range.scss

@@ -0,0 +1,82 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.form-range {
+    width: 100%;
+    height: 1.5rem;
+    padding: 0;
+    background-color: transparent;
+    appearance: none;
+
+    &:focus {
+        outline: 0;
+
+        &::-webkit-slider-thumb {
+            box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba($primary, 0.25);
+        }
+    }
+
+    &::-webkit-slider-thumb {
+        width: 1rem;
+        height: 1rem;
+        margin-top: -0.25rem;
+        background-color: $primary;
+        border: 0;
+        border-radius: 1rem;
+        transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+        appearance: none;
+        cursor: pointer;
+
+        &:active {
+            background-color: color.scale($primary, $lightness: 90%);
+        }
+    }
+
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 0.5rem;
+        color: transparent;
+        cursor: pointer;
+        background-color: $gray-300;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+
+    // Firefox styles
+    &::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        background-color: $primary;
+        border: 0;
+        border-radius: 1rem;
+        transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+        appearance: none;
+        cursor: pointer;
+
+        &:active {
+            background-color: color.scale($primary, $lightness: 90%);
+        }
+    }
+
+    &::-moz-range-track {
+        width: 100%;
+        height: 0.5rem;
+        color: transparent;
+        cursor: pointer;
+        background-color: $gray-300;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+
+    &:disabled {
+        pointer-events: none;
+
+        &::-webkit-slider-thumb {
+            background-color: $gray-500;
+        }
+
+        &::-moz-range-thumb {
+            background-color: $gray-500;
+        }
+    }
+}

package/src/scss/components/_scrollspy.scss

@@ -0,0 +1,239 @@
+// Scrollspy
+@use "sass:color";
+@use "../abstracts/variables" as *;
+// Styles for the documentation scrollspy example
+
+// Container styling
+.scrollspy-container {
+    position: relative;
+    height: 480px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    border: 1px solid $gray-200;
+    border-radius: $border-radius-lg;
+    padding: 2rem;
+    background-color: $white;
+
+    // Custom scrollbar
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $gray-100;
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $gray-300;
+        border-radius: 3px;
+
+        &:hover {
+            background: $gray-400;
+        }
+    }
+}
+
+// Navigation styling
+.scrollspy-nav {
+    position: sticky;
+    top: 1rem;
+    padding: 0;
+
+    // Main links
+    >.nav-link {
+        display: block;
+        padding: 0.75rem 1.25rem;
+        color: $gray-600;
+        text-decoration: none;
+        transition: all 0.2s ease-in-out;
+        border: none;
+        border-left: 4px solid transparent;
+        margin-left: 0;
+        font-weight: 500;
+        background: transparent;
+
+        &:hover {
+            color: $primary;
+            background-color: rgba($primary, 0.05);
+            padding-left: 1.5rem;
+        }
+
+        &.active {
+            color: $primary !important;
+            font-weight: 700;
+            border-left-color: $primary !important;
+            background-color: rgba($primary, 0.1);
+            background: linear-gradient(90deg, rgba($primary, 0.12) 0%, rgba($primary, 0) 100%);
+            padding-left: 1.5rem;
+            box-shadow: inset 1px 0 0 rgba($primary, 0.1);
+        }
+    }
+
+    // Nested links
+    .nav {
+        display: none; // Hidden by default
+        padding-left: 0;
+
+        .nav-link {
+            padding: 0.5rem 1.25rem 0.5rem 2rem;
+            font-size: 0.85rem;
+            color: $gray-500;
+            border-left: 3px solid transparent;
+
+            &:hover {
+                color: $primary;
+            }
+
+            &.active {
+                color: $primary !important;
+                border-left-color: rgba($primary, 0.5) !important;
+                background-color: rgba($primary, 0.04);
+                font-weight: 600;
+                padding-left: 2rem;
+            }
+        }
+    }
+
+    // Show nested nav when parent is active
+    // Bootstrap adds .active to the parent link
+    .nav-link.active+.nav {
+        display: block !important;
+    }
+}
+
+// Layout wrapper
+.scrollspy-layout {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    gap: 0;
+    position: relative;
+    border: 1px solid $gray-200;
+    border-radius: $border-radius-lg;
+    overflow: hidden;
+    background: $white;
+
+    .scrollspy-sidebar {
+        background: $gray-50;
+        border-right: 1px solid $gray-200;
+        padding: 1.5rem 0;
+    }
+
+    .scrollspy-content {
+        padding: 2rem;
+        height: 500px;
+        overflow-y: auto;
+        scroll-behavior: smooth;
+    }
+}
+
+// Dark Variant
+.scrollspy-dark {
+    border-color: $gray-800;
+    background: #1a1d21;
+    color: $gray-300;
+
+    .scrollspy-sidebar {
+        background: #212529;
+        border-right-color: $gray-800;
+    }
+
+    .scrollspy-nav {
+
+        .nav-item .nav-link,
+        a.nav-link {
+            color: $gray-400;
+
+            &:hover {
+                color: color.adjust($primary, $lightness: 10%);
+                background-color: rgba($primary, 0.1);
+            }
+
+            &.active {
+                color: color.adjust($primary, $lightness: 10%) !important;
+                border-left-color: color.adjust($primary, $lightness: 10%) !important;
+                background: linear-gradient(90deg, rgba($primary, 0.2) 0%, rgba($primary, 0) 100%);
+            }
+        }
+
+        .nav .nav-link {
+            color: $gray-500;
+
+            &.active {
+                color: color.adjust($primary, $lightness: 10%) !important;
+                border-left-color: rgba($primary, 0.4) !important;
+            }
+        }
+    }
+
+    .scrollspy-content {
+
+        h4,
+        h5 {
+            color: $gray-100;
+            border-bottom-color: $gray-700;
+        }
+
+        p {
+            color: $gray-400;
+        }
+    }
+}
+
+// List Group Variant
+.list-group-scrollspy {
+    position: sticky;
+    top: 1rem;
+
+    .list-group-item {
+        border: none;
+        padding: 0.75rem 1.25rem;
+        color: $gray-600;
+        background-color: transparent;
+        transition: all 0.2s;
+        border-radius: $border-radius;
+        margin-bottom: 2px;
+
+        &:hover {
+            background-color: $gray-100;
+            color: $primary;
+        }
+
+        &.active {
+            color: color.adjust($primary, $lightness: 10%) !important;
+            background-color: rgba($primary, 0.1) !important;
+            font-weight: 600;
+            box-shadow: none !important;
+            transform: translateX(5px);
+            border-left: 3px solid $primary !important;
+            border-radius: 0 $border-radius $border-radius 0;
+            // Override bootstrap default selection border
+            border-top: none;
+            border-bottom: none;
+            border-right: none;
+        }
+    }
+}
+
+// Content styling shared
+.scrollspy-content {
+
+    h4,
+    h5 {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px dashed $gray-300;
+        color: $dark;
+        scroll-margin-top: 4rem;
+
+        &:first-child {
+            margin-top: 0 !important;
+        }
+    }
+
+    p {
+        line-height: 1.6;
+        margin-bottom: 1rem;
+    }
+}

package/src/scss/components/_skeleton.scss

@@ -0,0 +1,108 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.skeleton {
+    position: relative;
+    overflow: hidden;
+    background-color: $gray-300;
+    border-radius: $border-radius;
+    width: 100%;
+
+    // Animation
+    &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: translateX(-100%);
+        background-image: linear-gradient(90deg,
+                rgba(#fff, 0) 0,
+                rgba(#fff, 0.2) 20%,
+                rgba(#fff, 0.5) 60%,
+                rgba(#fff, 0));
+        animation: shimmer 2s infinite;
+    }
+
+    // Shapes
+    &.skeleton-text {
+        height: 1em;
+        margin-bottom: 0.5rem;
+        border-radius: $border-radius-sm;
+    }
+
+    &.skeleton-circle {
+        border-radius: 50%;
+    }
+
+    &.skeleton-rect {
+        border-radius: 0;
+    }
+
+    // Fixed sizes
+    &.skeleton-w-10 {
+        width: 10%;
+    }
+
+    &.skeleton-w-20 {
+        width: 20%;
+    }
+
+    &.skeleton-w-30 {
+        width: 30%;
+    }
+
+    &.skeleton-w-40 {
+        width: 40%;
+    }
+
+    &.skeleton-w-50 {
+        width: 50%;
+    }
+
+    &.skeleton-w-60 {
+        width: 60%;
+    }
+
+    &.skeleton-w-70 {
+        width: 70%;
+    }
+
+    &.skeleton-w-80 {
+        width: 80%;
+    }
+
+    &.skeleton-w-90 {
+        width: 90%;
+    }
+}
+
+@keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+// Pulse Animation Variant
+.skeleton-pulse {
+    &::after {
+        display: none; // Disable shimmer
+    }
+
+    animation: pulse 1.5s ease-in-out 0.5s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.4;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/src/scss/components/_slider.scss

@@ -0,0 +1,95 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.form-range {
+    width: 100%;
+    height: 1.5rem;
+    padding: 0;
+    background-color: transparent;
+    appearance: none;
+
+    &:focus {
+        outline: 0;
+
+        &::-webkit-slider-thumb {
+            box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba($primary, 0.25);
+        }
+    }
+
+    &::-webkit-slider-thumb {
+        width: 1rem;
+        height: 1rem;
+        margin-top: -0.25rem;
+        background-color: $primary;
+        border: 0;
+        border-radius: 1rem;
+        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        appearance: none;
+        cursor: pointer;
+
+        &:active {
+            background-color: color.scale($primary, $lightness: 10%);
+        }
+    }
+
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 0.5rem;
+        color: transparent;
+        cursor: pointer;
+        background-color: $gray-300;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+
+    // Firefox
+    &::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        background-color: $primary;
+        border: 0;
+        border-radius: 1rem;
+        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        appearance: none;
+        cursor: pointer;
+    }
+
+    &::-moz-range-track {
+        width: 100%;
+        height: 0.5rem;
+        color: transparent;
+        cursor: pointer;
+        background-color: $gray-300;
+        border-color: transparent;
+        border-radius: 1rem;
+    }
+
+    // Sizes
+    &.form-range-sm {
+        height: 1rem;
+
+        &::-webkit-slider-thumb {
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-top: -0.125rem;
+        }
+
+        &::-webkit-slider-runnable-track {
+            height: 0.375rem;
+        }
+    }
+
+    &.form-range-lg {
+        height: 2rem;
+
+        &::-webkit-slider-thumb {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-top: -0.5rem;
+        }
+
+        &::-webkit-slider-runnable-track {
+            height: 0.75rem;
+        }
+    }
+}