@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_timeline.scss

@@ -0,0 +1,238 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.timeline {
+    position: relative;
+    padding-left: 0; // Reset
+    margin-bottom: 2rem;
+    list-style: none;
+
+    // The Line (Vertical)
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0.75rem; // Center of 1.5rem marker
+        width: 2px;
+        background-color: $gray-200;
+        transform: translateX(-50%);
+    }
+
+    .timeline-item {
+        position: relative;
+        padding-left: 2.5rem; // Space for marker + gap
+        padding-bottom: 2rem;
+
+        &:last-child {
+            padding-bottom: 0;
+        }
+
+        // The Marker
+        &::after {
+            content: "";
+            position: absolute;
+            left: 0; // 0.75rem center - 0.5rem radius = 0.25rem left... wait. 
+            // Let's position explicitly
+            left: 0.75rem;
+            top: 0.25rem;
+            width: 1rem;
+            height: 1rem;
+            border-radius: 50%;
+            background-color: $white;
+            border: 2px solid $gray-400;
+            transform: translateX(-50%);
+            z-index: 1;
+            transition: all 0.2s ease;
+        }
+
+        // Content Spacing
+        .timeline-content {
+            position: relative;
+        }
+
+        // States
+        &.active,
+        &.completed {
+            &::after {
+                background-color: $primary;
+                border-color: $primary;
+                box-shadow: 0 0 0 4px color.scale($primary, $alpha: -85%);
+            }
+
+            // Optional Aniamtion (Vertical)
+            &.animated::after {
+                animation: timeline-pulse 2s infinite;
+            }
+
+            // Title color
+            .timeline-title {
+                color: $primary;
+            }
+        }
+
+        &.completed {
+
+            // Maybe a checkmark icon later, but for now solid color
+            &::after {
+                background-color: $success;
+                border-color: $success;
+                box-shadow: none;
+            }
+        }
+    }
+
+    .timeline-title {
+        font-weight: 700;
+        margin-bottom: 0.25rem;
+        color: $gray-900;
+        font-size: 1rem;
+    }
+
+    .timeline-text {
+        color: $gray-600;
+        margin-bottom: 0.5rem;
+        font-size: 0.95rem;
+        line-height: 1.6;
+    }
+
+    .timeline-date {
+        font-size: 0.85rem;
+        color: $gray-500;
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    // Horizontal Variant (Wizard / Steps)
+    &.timeline-horizontal {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding-top: 1rem;
+        counter-reset: timeline-step; // Initialize counter
+
+        // Remove vertical line
+        &::before {
+            display: none;
+        }
+
+        .timeline-item {
+            padding: 0;
+            flex: 1;
+            text-align: center;
+            position: relative;
+
+            // Flex layout: Marker (Top) -> Content (Bottom)
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            // 1. The Connector Line (::after)
+            // Positioned behind the marker to connect to the NEXT item
+            &::after {
+                content: "";
+                position: absolute;
+                top: 1rem; // Center vertically with marker (2rem / 2)
+                left: 50%; // Start from center of this item
+                width: 100%; // Spans to center of next item
+                height: 3px;
+                background-color: $gray-200;
+                z-index: 0; // Behind marker
+                transform: translateY(-50%);
+            }
+
+            // Remove line from last item
+            &:last-child::after {
+                display: none;
+            }
+
+            // 2. The Marker (::before)
+            // Becomes the first flex icon because it's ::before
+            &::before {
+                counter-increment: timeline-step;
+                content: counter(timeline-step);
+
+                width: 2rem;
+                height: 2rem;
+                border-radius: 50%;
+                background-color: $white;
+                border: 2px solid $gray-300;
+                color: $gray-600;
+                font-weight: 700;
+                font-size: 0.9rem;
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                z-index: 1; // Above line
+                position: relative; // Flex item
+                margin-bottom: 0.75rem; // Space between marker and text
+                transition: all 0.2s ease;
+            }
+
+            // Hide the old marker from vertical style
+            // Note: The parent CSS defines &::after as marker. 
+            // We are repurposing ::after for the horizontal line, 
+            // so we must ensure we don't inherit the vertical marker styles on ::after incorrectly.
+            // But wait, the parent .timeline-item::after rule is specific.
+            // We need to override the parent properties for ::after completely.
+
+            // Overriding Vertical styles to be safe
+            // Vertical ::before is on .timeline, distinct.
+            // Vertical ::after is on .timeline-item. We reused it for Line. 
+            // So we just need to reset its properties in the &::after block above.
+
+
+            // STATES
+
+            // Active State
+            &.active {
+                &::before {
+                    border-color: $primary;
+                    background-color: $primary;
+                    color: $white;
+                    box-shadow: 0 0 0 4px color.scale($primary, $alpha: -85%);
+                }
+
+                // Optional Animation
+                &.animated::before {
+                    animation: timeline-pulse 2s infinite;
+                }
+            }
+
+            // Completed State
+            &.completed {
+
+                // Marker
+                &::before {
+                    content: "✓"; // Checkmark for completed
+                    background-color: $success;
+                    border-color: $success;
+                    color: $white;
+                }
+
+                // Line to next item
+                &::after {
+                    background-color: $success;
+                }
+            }
+        }
+    }
+}
+
+@keyframes timeline-pulse {
+    0% {
+        box-shadow: 0 0 0 0 color.scale($primary, $alpha: -50%);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px color.scale($primary, $alpha: -100%);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 color.scale($primary, $alpha: -100%);
+    }
+}

package/src/scss/components/_toasts.scss

@@ -0,0 +1,75 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.toast {
+    width: 350px;
+    max-width: 100%;
+    font-size: 0.875rem;
+    pointer-events: auto;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0; // No border
+    box-shadow: $box-shadow-lg;
+    border-radius: $border-radius-lg;
+    overflow: hidden;
+
+    &:not(.show) {
+        display: none;
+    }
+}
+
+.toast-header {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    color: $gray-600;
+    background-color: #fff;
+    background-clip: padding-box;
+    border-bottom: 1px solid $gray-100;
+
+    strong {
+        color: $dark;
+        font-weight: $font-weight-semibold;
+    }
+
+    .btn-close {
+        margin-right: -0.375rem;
+        margin-left: auto; // Push to right
+    }
+}
+
+.toast-body {
+    padding: 1rem;
+    word-wrap: break-word;
+    color: $body-color;
+}
+
+.toast-container {
+    position: absolute;
+    z-index: 1090;
+    width: max-content;
+    max-width: 100%;
+    pointer-events: none;
+    padding: 1rem;
+
+    > :not(:last-child) {
+        margin-bottom: 0.75rem;
+    }
+
+    // Positioning utility
+    &.top-0 {
+        top: 0;
+    }
+
+    &.end-0 {
+        right: 0;
+    }
+
+    &.bottom-0 {
+        bottom: 0;
+    }
+
+    &.start-0 {
+        left: 0;
+    }
+}

package/src/scss/components/_tooltips.scss

@@ -0,0 +1,50 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.tooltip {
+    position: absolute;
+    z-index: 1080;
+    display: block;
+    margin: 0;
+    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.75rem; // Smaller font
+    word-wrap: break-word;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    &.show {
+        opacity: 1;
+    }
+
+    .tooltip-arrow {
+        position: absolute;
+        display: block;
+        width: 0.8rem;
+        height: 0.4rem;
+
+        &::before {
+            position: absolute;
+            content: "";
+            border-color: transparent;
+            border-style: solid;
+        }
+    }
+}
+
+.tooltip-inner {
+    max-width: 200px;
+    padding: 0.4rem 0.75rem;
+    color: #fff;
+    text-align: center;
+    background-color: $gray-900;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow-sm;
+}

package/src/scss/components/_tree-view.scss

@@ -0,0 +1,72 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.tree-view {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+
+    // Recursive nesting padding
+    .tree-group {
+        list-style: none;
+        padding-left: 1.5rem;
+        display: none; // Hidden by default
+
+        &.show {
+            display: block;
+        }
+    }
+
+    .tree-item {
+        margin-bottom: 0.25rem;
+    }
+
+    .tree-content {
+        display: flex;
+        align-items: center;
+        padding: 0.375rem 0.5rem;
+        cursor: pointer;
+        border-radius: $border-radius-sm;
+        transition: background-color .15s ease;
+        color: $body-color;
+
+        &:hover {
+            background-color: $gray-100;
+        }
+
+        &.active {
+            background-color: color.scale($primary, $lightness: 90%);
+            color: $primary;
+        }
+    }
+
+    .tree-toggle {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin-right: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $gray-500;
+        transition: transform .2s ease;
+
+        // Ensure styling only if it contains svg
+        svg {
+            width: 1em;
+            height: 1em;
+        }
+
+        &.expanded {
+            transform: rotate(90deg);
+        }
+
+        &.hidden {
+            visibility: hidden;
+        }
+    }
+
+    .tree-label {
+        font-weight: 500; // Slightly thicker
+        user-select: none;
+    }
+}

package/src/scss/components/_user.scss

@@ -0,0 +1,26 @@
+@use "../abstracts/variables" as *;
+
+.user {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacer * 0.75;
+
+    // Avatar is handled by _avatar.scss, usually .avatar class
+
+    .user-info {
+        display: flex;
+        flex-direction: column;
+        line-height: 1.2;
+    }
+
+    .user-name {
+        font-weight: $font-weight-semibold;
+        font-size: $font-size-base;
+        color: $gray-900;
+    }
+
+    .user-description {
+        font-size: $font-size-sm;
+        color: $gray-500;
+    }
+}

package/src/scss/docs/_examples.scss

@@ -0,0 +1,148 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+// HeroUI-like Documentation Tabs & Example Style
+
+.example-tabs-wrapper {
+    background: transparent;
+    margin-bottom: 2rem;
+
+    // The Navigation Bar (Tabs)
+    .nav-tabs {
+        border-bottom: 2px solid transparent;
+        padding: 0;
+        gap: 1.25rem;
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.75rem;
+
+        .nav-item {
+            margin-bottom: 0;
+        }
+
+        .nav-link {
+            border: none;
+            border-bottom: 2px solid transparent;
+            border-radius: 0;
+            padding: 0.5rem 0;
+            background: none;
+            color: $gray-500;
+            font-weight: 500;
+            font-size: 0.9rem;
+            transition: all 0.2s;
+            margin: 0;
+
+            &:hover {
+                color: $body-color;
+            }
+
+            &.active {
+                color: #000;
+                border-bottom-color: #000;
+                font-weight: 600;
+            }
+        }
+    }
+
+    // The Content Area
+    .tab-content {
+
+        // Preview Pane (White Bordered Box)
+        .tab-pane[id$="-preview"] {
+            border: 1px solid $gray-200;
+            border-radius: $border-radius-lg;
+            padding: 2.5rem;
+            background-color: #fff;
+
+            // Clean/White Background (No Dots)
+            background-image: none;
+
+            // CRITICAL FIX: Only flex when active!
+            display: none;
+
+            &.active {
+                display: flex;
+                flex-direction: column;
+                // align-items: flex-start; // Removed to allow full width (responsive)
+                gap: 1.5rem;
+                overflow-x: auto; // Allow scrolling on small screens
+            }
+
+            // Allow children (the example wrapper) to take full width if needed
+            >* {
+                width: 100%;
+                max-width: 100%;
+            }
+
+            // Clean up internal example styling
+            .bd-example {
+                padding: 0 !important;
+                margin: 0 !important;
+                border: none !important;
+                background: transparent !important;
+            }
+        }
+
+        // Code Pane (Dark Box)
+        .tab-pane[id$="-code"] {
+            border-radius: $border-radius-lg;
+            overflow: hidden;
+            background-color: #1e1e1e; // HeroUI Dark
+            position: relative;
+            min-height: 3rem;
+
+            // Visibility Logic
+            display: none;
+
+            &.active {
+                display: block;
+            }
+
+            pre[class*="language-"] {
+                background: transparent !important;
+                margin: 0 !important;
+                padding: 1.5rem !important;
+                border: none !important;
+                border-radius: 0 !important;
+                box-shadow: none !important;
+                text-shadow: none !important;
+            }
+
+            // Copy Button
+            button {
+                position: absolute;
+                top: 0.75rem;
+                right: 0.75rem;
+                z-index: 10;
+                color: $gray-400;
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                border-radius: $border-radius;
+                background-color: rgba(255, 255, 255, 0.05);
+                font-size: 0.75rem;
+                padding: 0.25rem 0.65rem;
+                transition: all 0.2s;
+
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.1);
+                    color: #fff;
+                    border-color: $gray-500;
+                }
+            }
+
+            code,
+            pre,
+            div,
+            span {
+                background-color: transparent !important;
+                text-shadow: none !important;
+            }
+
+            code {
+                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+                font-size: 0.875rem !important;
+                line-height: 1.6 !important;
+                color: #f8f9fa;
+            }
+        }
+    }
+}