@amelharrak/eldo-ui 1.0.1

package/src/scss/docs/_layout.scss

@@ -0,0 +1,251 @@
+// Documentation Layout
+.bd-sidebar {
+    position: fixed;
+    top: 60px;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    padding: 2rem 0;
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+    overflow-y: auto;
+
+    // Scrollbar specific for sidebar
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #cbd5e1; // Slate-300
+        border-radius: 20px;
+        border: transparent;
+    }
+
+    // Sidebar Navigation Styling (Premium Overhaul)
+    .btn-toggle {
+        display: inline-flex;
+        align-items: center;
+        padding: .5rem 1.25rem;
+        width: 100%;
+        color: #334155; // Slate-700
+        background: transparent;
+        border: 0;
+        font-weight: 600;
+        font-size: 0.875rem;
+        transition: all 0.2s ease;
+        border-radius: 0.5rem;
+
+        &:hover,
+        &:focus {
+            color: #0f172a; // Slate-900
+            background-color: #f1f5f9; // Slate-100
+        }
+
+        &::after {
+            width: 1rem;
+            height: 1rem;
+            margin-left: auto;
+            content: "";
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); // Slate-400 Chevron
+            background-repeat: no-repeat;
+            background-size: 1rem;
+            transition: transform .2s ease-in-out;
+        }
+
+        &[aria-expanded="true"] {
+            color: #0f172a;
+
+            &::after {
+                transform: rotate(90deg);
+                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); // Darker on active
+            }
+        }
+    }
+
+    // Sub-navigation container
+    .btn-toggle-nav {
+        list-style: none; // Remove bullets
+        padding-left: 0; // Reset padding since we control indentation via link padding
+        margin-top: 0.25rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .btn-toggle-nav a {
+        display: block;
+        padding: .35rem 1rem;
+        text-decoration: none;
+        color: #64748b; // Slate-500
+        font-size: 0.875rem;
+        border-left: 1px solid #e2e8f0; // Slate-200 rail
+        margin-left: 0.75rem; // Align with text of parent
+        transition: all 0.2s ease;
+        position: relative;
+
+        &:hover,
+        &:focus {
+            color: #0f172a; // Slate-900
+            border-left-color: #94a3b8; // Slate-400
+        }
+
+        &.active,
+        &[aria-current="page"] {
+            color: #0d6efd; // Brand Primary
+            border-left-color: #0d6efd;
+            font-weight: 500;
+            background: rgba(13, 110, 253, 0.03); // Very subtle backing
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+}
+
+// Docs Callout
+.bd-callout {
+    padding: 1.25rem;
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    border: 1px solid #e9ecef;
+    border-left-width: .25rem;
+    border-radius: .25rem;
+
+    h4 {
+        margin-bottom: .25rem;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+
+    +.bd-callout {
+        margin-top: -.25rem;
+    }
+}
+
+.bd-callout-info {
+    border-left-color: #5bc0de;
+
+    h4 {
+        color: #5bc0de;
+    }
+}
+
+.bd-callout-warning {
+    border-left-color: #f0ad4e;
+
+    h4 {
+        color: #f0ad4e;
+    }
+}
+
+.bd-main {
+    padding: 2rem;
+}
+
+// Premium Table of Contents (TOC)
+.bd-toc {
+    position: sticky;
+    top: 5rem;
+    height: calc(100vh - 7rem);
+    overflow-y: auto;
+    padding-left: 1.5rem;
+    border-left: 1px solid var(--glass-border, rgba(0, 0, 0, 0.05));
+
+    // Hide scrollbar but keep functionality
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    .bd-toc-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .bd-toc-heading {
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-weight: 700;
+        color: #64748b; // Slate-500
+        margin-bottom: 1rem;
+    }
+
+    nav {
+        font-size: 0.875rem;
+
+        .nav-link {
+            display: block;
+            padding: 0.25rem 0 0.25rem 1rem;
+            color: #64748b; // Slate-500
+            text-decoration: none;
+            border-left: 2px solid transparent; // Marker line
+            margin-left: -1px; // Overlap border
+            transition: all 0.2s ease;
+
+            &:hover {
+                color: #0f172a; // Slate-900
+                border-left-color: #cbd5e1; // Slate-300
+            }
+
+            &.active {
+                color: #38bdf8; // Sky-400 (Brand)
+                border-left-color: #38bdf8;
+                font-weight: 500;
+                background: transparent; // Override default
+            }
+
+            // Nested items (H3) handled by inline styles in JS, 
+            // but we can enforce some defaults here if needed
+        }
+    }
+}
+
+// Premium Navbar (Glassmorphism)
+.bd-navbar {
+    position: fixed; // Explicitly fix position
+    top: 0;
+    left: 0;
+    right: 0;
+
+    background-color: rgba(255, 255, 255, 0.8) !important; // Override bg-primary if present
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    height: 60px;
+    z-index: 1030;
+
+    .navbar-brand {
+        color: #0f172a !important; // Slate-900
+        font-weight: 700;
+        letter-spacing: -0.02em;
+    }
+
+    .navbar-nav .nav-link {
+        color: #64748b; // Slate-500
+
+        &:hover,
+        &.active {
+            color: #0f172a;
+        }
+    }
+
+    // Badge styling fix for light background
+    .badge {
+        background-color: #f1f5f9 !important; // Slate-100
+        color: #475569 !important; // Slate-600
+        border: 1px solid #e2e8f0;
+    }
+
+    // Github link and utility icons
+    a {
+        color: #64748b !important;
+
+        &:hover {
+            color: #0f172a !important;
+        }
+    }
+}

package/src/scss/docs/_search.scss

@@ -0,0 +1,141 @@
+// Command Palette (Shadcn-like)
+.command-palette-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    z-index: 2000;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 15vh;
+    opacity: 0;
+    animation: fadeIn 0.15s ease forwards;
+}
+
+.command-palette {
+    width: 100%;
+    max-width: 640px;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transform: scale(0.98);
+    animation: scaleIn 0.15s ease forwards;
+
+    .command-header {
+        display: flex;
+        align-items: center;
+        padding: 0 1rem;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+
+        svg {
+            color: #94a3b8; // Slate-400
+        }
+    }
+
+    .command-input {
+        flex: 1;
+        border: none;
+        outline: none;
+        padding: 1.25rem 0.75rem;
+        font-size: 1.1rem;
+        color: #0f172a; // Slate-900
+        background: transparent;
+
+        &::placeholder {
+            color: #94a3b8;
+        }
+    }
+
+    .command-list {
+        max-height: 400px;
+        overflow-y: auto;
+        padding: 0.5rem;
+
+        // Custom Scrollbar
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(0, 0, 0, 0.1);
+            border-radius: 3px;
+        }
+    }
+
+    .command-group-heading {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: #64748b; // Slate-500
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-top: 0.5rem;
+    }
+
+    .command-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem;
+        border-radius: 6px;
+        cursor: pointer;
+        color: #334155; // Slate-700
+        font-size: 0.95rem;
+        transition: all 0.1s;
+        text-decoration: none;
+
+        svg {
+            width: 18px;
+            height: 18px;
+            color: #94a3b8;
+        }
+
+        &:hover,
+        &.selected {
+            background: #f1f5f9; // Slate-100
+            color: #0f172a; // Slate-900
+
+            svg {
+                color: #0f172a;
+            }
+        }
+
+        .shortcut {
+            margin-left: auto;
+            font-size: 0.75rem;
+            color: #94a3b8;
+        }
+    }
+
+    .command-empty {
+        padding: 3rem;
+        text-align: center;
+        font-size: 0.9rem;
+        color: #64748b;
+    }
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes scaleIn {
+    to {
+        transform: scale(1);
+    }
+}
+
+// Global hook for hiding scrollbar when modal is open
+body.command-open {
+    overflow: hidden;
+}

package/src/scss/eldo.scss

@@ -0,0 +1,74 @@
+// Base
+@use 'base/reset';
+@use 'base/typography';
+@use 'base/transitions';
+
+// Layout
+@use 'layout/grid';
+@use 'layout/container';
+
+// Components
+@use 'components/accordion';
+@use 'components/alerts';
+@use 'components/avatar';
+@use 'components/badge';
+@use 'components/blockquote';
+@use 'components/breadcrumb';
+@use 'components/list-group';
+@use 'components/buttons';
+@use 'components/button-group';
+@use 'components/cards';
+@use 'components/charts';
+@use 'components/code';
+@use 'components/checkbox';
+@use 'components/carousel';
+@use 'components/combobox';
+@use 'components/divider'; // New
+@use 'components/forms';
+@use 'components/file-upload';
+@use 'components/floating-labels';
+@use 'components/calendar';
+@use 'components/range'; // Feature addition
+@use 'components/navbar';
+@use 'components/nav';
+@use 'components/number-input'; // New
+@use 'components/dropdown';
+@use 'components/pagination';
+@use 'components/collapse';
+@use 'components/modal';
+@use 'components/offcanvas';
+@use 'components/placeholders'; // Batch 4
+@use 'components/popovers'; // Batch 4
+@use 'components/scrollspy'; // Batch 4
+@use 'components/skeleton';
+@use 'components/slider'; // New
+@use 'components/snippet'; // New
+@use 'components/progress';
+@use 'components/input-otp'; // Batch 11
+@use 'components/form-select'; // New (Batch 13)
+@use 'components/spinners';
+@use 'components/stat';
+@use 'components/switch'; // Batch 9
+@use 'components/table'; // New
+@use 'components/tag'; // Batch 5
+@use 'components/tags-input'; // Batch 5
+@use 'components/timeline';
+@use 'components/toasts'; // Batch 4
+@use 'components/tooltips'; // Batch 4
+@use 'components/tree-view';
+@use 'components/stepper';
+@use 'components/user'; // New
+
+// Utilities
+@use 'utilities/api';
+@use 'utilities/glass';
+@use 'utilities/helpers'; // Added
+@use 'utilities/colors'; // Keep colors separate or merge later if desired, but API handles bg/text usually. Let's keep distinct custom colors if needed, but API covers standard.
+// @use 'utilities/display'; // Removed: Covered by API
+// @use 'utilities/spacing'; // Removed: Covered by API
+
+// Documentation Specific Styles
+@use 'docs/layout';
+@use 'docs/search';
+@use "docs/examples";
+@use "pages/landing";

package/src/scss/layout/_container.scss

@@ -0,0 +1,37 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.container,
+.container-fluid {
+    width: 100%;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@each $breakpoint, $width in $grid-breakpoints {
+    @include media-up($breakpoint) {
+        .container {
+            @if $breakpoint ==sm {
+                max-width: 540px;
+            }
+
+            @if $breakpoint ==md {
+                max-width: 720px;
+            }
+
+            @if $breakpoint ==lg {
+                max-width: 960px;
+            }
+
+            @if $breakpoint ==xl {
+                max-width: 1140px;
+            }
+
+            @if $breakpoint ==xxl {
+                max-width: 1320px;
+            }
+        }
+    }
+}

package/src/scss/layout/_grid.scss

@@ -0,0 +1,49 @@
+@use "sass:math";
+@use "sass:map";
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(-1 * var(--e-gutter-y, 0));
+    margin-right: calc(-.5 * var(--e-gutter-x, 1.5rem));
+    margin-left: calc(-.5 * var(--e-gutter-x, 1.5rem));
+
+    >* {
+        flex-shrink: 0;
+        width: 100%;
+        max-width: 100%;
+        padding-right: calc(.5 * var(--e-gutter-x, 1.5rem));
+        padding-left: calc(.5 * var(--e-gutter-x, 1.5rem));
+        margin-top: var(--e-gutter-y, 0);
+    }
+}
+
+.col {
+    flex: 1 0 0%;
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: "";
+
+    @if $breakpoint !=xs {
+        $infix: "-#{$breakpoint}";
+    }
+
+    @include media-up($breakpoint) {
+
+        // 12 column grid
+        @for $i from 1 through 12 {
+            .col#{$infix}-#{$i} {
+                flex: 0 0 auto;
+                width: math.percentage(math.div($i, 12));
+            }
+        }
+
+        .col#{$infix}-auto {
+            flex: 0 0 auto;
+            width: auto;
+        }
+    }
+}

package/src/scss/pages/_landing-config.scss

@@ -0,0 +1,135 @@
+    // ===== Configuration Section =====
+    .configuration-section {
+        padding: 6rem 0;
+        background: #f8fafc;
+
+        .config-card {
+            background: white;
+            border-radius: 16px;
+            padding: 2rem;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            &:hover {
+                transform: translateY(-4px);
+                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+                border-color: #c7d2fe;
+            }
+
+            .config-header {
+                display: flex;
+                align-items: flex-start;
+                gap: 1rem;
+                margin-bottom: 1.5rem;
+
+                .config-icon {
+                    width: 48px;
+                    height: 48px;
+                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+                    border-radius: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-size: 1.25rem;
+                    flex-shrink: 0;
+                }
+
+                .config-title {
+                    font-size: 1.25rem;
+                    font-weight: 700;
+                    color: #0f172a;
+                    margin-bottom: 0.25rem;
+                }
+
+                .config-description {
+                    color: #64748b;
+                    margin: 0;
+                    font-size: 0.875rem;
+                }
+            }
+
+            .config-code {
+                flex: 1;
+                background: #0f172a;
+                border-radius: 12px;
+                padding: 1.5rem;
+                margin-bottom: 1.5rem;
+                overflow-x: auto;
+
+                pre {
+                    margin: 0;
+
+                    code {
+                        font-family: 'JetBrains Mono', monospace;
+                        font-size: 0.875rem;
+                        line-height: 1.7;
+                        color: #e2e8f0;
+                    }
+                }
+            }
+
+            .config-features {
+                display: flex;
+                flex-direction: column;
+                gap: 0.75rem;
+
+                .feature-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-size: 0.875rem;
+                    color: #475569;
+
+                    i {
+                        font-size: 1rem;
+                    }
+                }
+            }
+        }
+
+        .config-option {
+            text-align: center;
+            padding: 2rem 1.5rem;
+            background: white;
+            border-radius: 12px;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+
+            &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+                border-color: #c7d2fe;
+            }
+
+            .option-icon {
+                width: 56px;
+                height: 56px;
+                background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 0 auto 1rem;
+                color: #6366f1;
+                font-size: 1.5rem;
+            }
+
+            .option-title {
+                font-size: 1.125rem;
+                font-weight: 700;
+                color: #0f172a;
+                margin-bottom: 0.5rem;
+            }
+
+            .option-description {
+                color: #64748b;
+                margin: 0;
+                font-size: 0.875rem;
+                line-height: 1.5;
+            }
+        }
+    }