@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_code.scss

@@ -0,0 +1,70 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+// Inline code
+code {
+    font-size: 0.875em;
+    color: $primary;
+    word-wrap: break-word;
+
+    // Only apply background if not inside pre
+    &:not(pre > &) {
+        padding: 0.125rem 0.25rem;
+        background-color: $gray-100;
+        border-radius: $border-radius-sm;
+    }
+}
+
+// Code block styling enhancements
+pre {
+    position: relative;
+    padding: 1rem;
+    background-color: $gray-100;
+    border: 1px solid $gray-200;
+    border-radius: $border-radius;
+
+    // Ensure the code doesn't overlap with the button if it's long
+    code {
+        display: block;
+        padding-right: 3rem;
+        color: inherit;
+        background-color: transparent; // Clean reset
+    }
+}
+
+.btn-copy {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 10;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    color: $gray-600;
+    background-color: #fff;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius-sm;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        color: $primary;
+        border-color: $primary;
+        background-color: $light;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px rgba($primary, 0.25);
+    }
+
+    &.copied {
+        color: $success;
+        border-color: $success;
+        background-color: rgba($success, 0.1);
+    }
+}

package/src/scss/components/_collapse.scss

@@ -0,0 +1,13 @@
+@use "../abstracts/variables" as *;
+
+.collapse {
+    &:not(.show) {
+        display: none;
+    }
+}
+
+.collapsing {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+}

package/src/scss/components/_combobox.scss

@@ -0,0 +1,239 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.combobox-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.125rem;
+    background-color: #fff;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &:focus-within {
+        border-color: color.scale($primary, $lightness: 25%);
+        box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+    }
+
+    .combobox-input {
+        flex: 1 1 auto;
+        border: none !important;
+        padding: 0.375rem 0.75rem;
+        background: transparent;
+        outline: none;
+        min-width: 50px;
+        color: $body-color;
+
+        &::placeholder {
+            color: $gray-500;
+        }
+    }
+
+    .combobox-toggle-btn,
+    .combobox-clear-btn {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        border: none;
+        background: transparent;
+        color: $gray-500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding: 0;
+        z-index: 2;
+        transition: color 0.15s ease;
+
+        &:hover {
+            color: $primary;
+        }
+
+        &:focus {
+            outline: none;
+            color: $primary;
+        }
+
+        svg {
+            transition: transform 0.2s ease;
+        }
+    }
+
+    .combobox-toggle-btn {
+        right: 0;
+        width: 2.5rem;
+    }
+
+    .combobox-clear-btn {
+        right: 2rem;
+        width: 1.5rem;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease, color 0.15s ease;
+
+        &.show {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    &.open .combobox-toggle-btn svg {
+        transform: rotate(180deg);
+    }
+
+    // Sizes
+    &-sm {
+        min-height: calc(1.5em + 0.5rem + 2px);
+
+        .combobox-input {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .combobox-toggle-btn {
+            width: 2rem;
+        }
+
+        .combobox-clear-btn {
+            right: 1.5rem;
+            width: 1.25rem;
+        }
+    }
+
+    &-lg {
+        min-height: calc(1.5em + 1rem + 2px);
+
+        .combobox-input {
+            padding: 0.5rem 1rem;
+            font-size: 1.25rem;
+        }
+
+        .combobox-toggle-btn {
+            width: 3rem;
+        }
+
+        .combobox-clear-btn {
+            right: 2.5rem;
+            width: 2rem;
+        }
+    }
+
+    // Multi-select Tags
+    .combobox-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        padding: 0.125rem 0.25rem;
+
+        .combobox-tag {
+            display: inline-flex;
+            align-items: center;
+            background-color: color.scale($primary, $lightness: 90%);
+            color: $primary;
+            padding: 0.125rem 0.5rem;
+            border-radius: $border-radius-sm;
+            font-size: 0.8125rem;
+            font-weight: 500;
+            border: 1px solid color.scale($primary, $lightness: 80%);
+
+            .btn-close {
+                padding: 0;
+                margin-left: 0.375rem;
+                width: 0.5rem;
+                height: 0.5rem;
+                font-size: 0.5rem;
+                background-size: 0.5rem;
+            }
+        }
+    }
+}
+
+.combobox-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.375rem;
+    padding: 0.375rem;
+    background-color: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba($gray-200, 0.5);
+    border-radius: $border-radius-lg;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    z-index: 1050;
+    max-height: 250px;
+    overflow-y: auto;
+    display: none;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+
+    // Scrollbar styling
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $gray-300;
+        border-radius: 10px;
+    }
+
+    &.show {
+        display: block;
+        animation: comboboxFadeIn 0.2s ease-out;
+    }
+
+    .combobox-option {
+        padding: 0.5rem 0.75rem;
+        cursor: pointer;
+        color: $body-color;
+        border-radius: $border-radius;
+        margin-bottom: 0.125rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        transition: all 0.15s ease;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &:hover,
+        &.active,
+        &.highlighted {
+            background-color: rgba($primary, 0.1);
+            color: $primary;
+            transform: translateX(4px);
+        }
+
+        &.selected {
+            background-color: $primary;
+            color: #fff;
+
+            &::after {
+                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022z'/%3E%3C/svg%3E");
+            }
+        }
+    }
+
+    .combobox-empty {
+        padding: 1rem;
+        color: $gray-500;
+        text-align: center;
+        font-size: 0.875rem;
+    }
+}
+
+@keyframes comboboxFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/src/scss/components/_date-picker.scss

@@ -0,0 +1,102 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.date-picker {
+    position: relative;
+    display: inline-block;
+
+    .date-picker-input-group {
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        .form-control {
+            padding-right: 2.5rem; // Space for icon
+        }
+
+        .date-picker-icon {
+            position: absolute;
+            right: 0.75rem;
+            color: $gray-500;
+            pointer-events: none;
+        }
+    }
+
+    .date-picker-popover {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1060;
+        margin-top: 0.5rem;
+        background-color: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: $border-radius-lg;
+        box-shadow: $box-shadow-lg;
+        display: none; // hidden by default
+
+        &.show {
+            display: block;
+            animation: fadeInScale 0.2s ease-out;
+        }
+
+        @keyframes fadeInScale {
+            from {
+                opacity: 0;
+                transform: scale(0.95);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+    }
+}
+
+.time-input {
+    display: flex;
+    align-items: center;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius;
+    padding: 0.25rem 0.5rem;
+    background-color: #fff;
+
+    input[type="number"] {
+        border: none;
+        width: 2.5rem;
+        text-align: center;
+        -moz-appearance: textfield;
+        appearance: textfield;
+
+        &:focus {
+            outline: none;
+            background-color: $gray-100;
+            border-radius: $border-radius-sm;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+
+    .time-separator {
+        margin: 0 0.25rem;
+        font-weight: bold;
+        color: $gray-500;
+    }
+
+    .time-period {
+        margin-left: 0.5rem;
+        color: $gray-600;
+        font-size: 0.875rem;
+        cursor: pointer;
+        padding: 0.125rem 0.375rem;
+        border-radius: $border-radius-sm;
+
+        &:hover {
+            background-color: $gray-100;
+        }
+    }
+}

package/src/scss/components/_divider.scss

@@ -0,0 +1,55 @@
+@use "../abstracts/variables" as *;
+
+.divider {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: $spacer 0;
+    color: $gray-500;
+    font-size: $font-size-sm;
+    white-space: nowrap;
+    border: 0; // Reset hr
+
+    // Line style
+    &::before,
+    &::after {
+        content: "";
+        flex: 1;
+        border-top: 1px solid $gray-200;
+    }
+
+    &:not(:empty)::before {
+        margin-right: $spacer * 0.5;
+    }
+
+    &:not(:empty)::after {
+        margin-left: $spacer * 0.5;
+    }
+
+    // Vertical Divider
+    &.divider-vertical {
+        display: inline-flex;
+        width: auto;
+        height: auto;
+        min-height: 1.5rem;
+        margin: 0 $spacer;
+        flex-direction: column;
+        align-self: stretch;
+
+        &::before,
+        &::after {
+            border-top: 0;
+            border-left: 1px solid $gray-200;
+        }
+
+        &:not(:empty)::before {
+            margin-right: 0;
+            margin-bottom: $spacer * 0.5;
+        }
+
+        &:not(:empty)::after {
+            margin-left: 0;
+            margin-top: $spacer * 0.5;
+        }
+    }
+}

package/src/scss/components/_dropdown.scss

@@ -0,0 +1,122 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-toggle {
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &::after {
+        display: inline-block;
+        content: "";
+        border-top: 0.3em solid;
+        border-right: 0.3em solid transparent;
+        border-bottom: 0;
+        border-left: 0.3em solid transparent;
+        transition: transform 0.2s;
+    }
+
+    &[aria-expanded="true"]::after {
+        transform: rotate(180deg);
+    }
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    min-width: 12rem;
+    padding: 0.5rem;
+    margin: 0.5rem 0 0; // Spacing from button
+    font-size: 0.875rem;
+    color: $body-color;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0; // No border
+    border-radius: $border-radius-lg;
+    box-shadow: $box-shadow-lg;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    &.show {
+        display: block;
+        opacity: 1;
+        animation: dropdown-fade-in 0.2s ease forwards;
+    }
+}
+
+@keyframes dropdown-fade-in {
+    from {
+        opacity: 0;
+        margin-top: 1.5rem; // Increased offset start
+    }
+
+    to {
+        opacity: 1;
+        margin-top: 0.5rem; // Target offset
+    }
+}
+
+.dropdown-item {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    clear: both;
+    font-weight: 400;
+    color: $body-color;
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    border-radius: $border-radius; // Rounded items
+    text-decoration: none;
+    transition: background-color 0.15s, color 0.15s;
+
+    &:hover,
+    &:focus {
+        color: $dark;
+        background-color: $gray-100; // Light gray hover like HeroUI
+    }
+
+    &.active,
+    &:active {
+        color: $primary;
+        background-color: color.scale($primary, $lightness: 90%); // Light primary bg
+        font-weight: $font-weight-semibold;
+    }
+
+    &.disabled,
+    &:disabled {
+        color: $gray-400;
+        pointer-events: none;
+        background-color: transparent;
+    }
+}
+
+.dropdown-divider {
+    height: 0;
+    margin: 0.5rem 0;
+    overflow: hidden;
+    border-top: 1px solid $gray-100;
+}
+
+.dropdown-header {
+    display: block;
+    padding: 0.5rem 1rem;
+    margin-bottom: 0;
+    font-size: 0.75rem;
+    color: $gray-500;
+    white-space: nowrap;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+}