@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_accordion.scss

@@ -0,0 +1,238 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+@use "../abstracts/functions" as *;
+
+.accordion {
+    --e-accordion-color: #{$body-color};
+    --e-accordion-bg: #fff;
+    --e-accordion-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, border-radius 0.15s ease;
+    --e-accordion-border-color: rgba(0, 0, 0, 0.125);
+    --e-accordion-border-width: 1px;
+    --e-accordion-border-radius: #{$border-radius};
+    --e-accordion-inner-border-radius: calc(#{$border-radius} - 1px);
+    --e-accordion-btn-padding-x: 1.25rem;
+    --e-accordion-btn-padding-y: 1rem;
+    --e-accordion-btn-color: #{$body-color};
+    --e-accordion-btn-bg: var(--e-accordion-bg);
+    --e-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+    --e-accordion-btn-icon-width: 1.25rem;
+    --e-accordion-btn-icon-transform: rotate(-180deg);
+    --e-accordion-btn-icon-transition: transform 0.2s ease-in-out;
+    --e-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+    --e-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    --e-accordion-body-padding-x: 1.25rem;
+    --e-accordion-body-padding-y: 1rem;
+    --e-accordion-active-color: #{color.scale($primary, $lightness: -10%)}; // Darker primary
+    --e-accordion-active-bg: #{color.scale($primary, $lightness: 90%)}; // Very light primary
+}
+
+.accordion-item {
+    background-color: var(--e-accordion-bg);
+    border: var(--e-accordion-border-width) solid var(--e-accordion-border-color);
+
+    &:first-of-type {
+        border-top-left-radius: var(--e-accordion-border-radius);
+        border-top-right-radius: var(--e-accordion-border-radius);
+
+        .accordion-button {
+            border-top-left-radius: var(--e-accordion-inner-border-radius);
+            border-top-right-radius: var(--e-accordion-inner-border-radius);
+        }
+    }
+
+    &:last-of-type {
+        border-bottom-right-radius: var(--e-accordion-border-radius);
+        border-bottom-left-radius: var(--e-accordion-border-radius);
+
+        .accordion-button {
+            &.collapsed {
+                border-bottom-right-radius: var(--e-accordion-inner-border-radius);
+                border-bottom-left-radius: var(--e-accordion-inner-border-radius);
+            }
+        }
+
+        .accordion-collapse {
+            border-bottom-right-radius: var(--e-accordion-border-radius);
+            border-bottom-left-radius: var(--e-accordion-border-radius);
+        }
+    }
+
+    // Prevent double borders
+    +.accordion-item {
+        border-top: 0;
+    }
+}
+
+.accordion-button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--e-accordion-btn-padding-y) var(--e-accordion-btn-padding-x);
+    font-size: 1rem;
+    color: var(--e-accordion-btn-color);
+    text-align: left;
+    background-color: var(--e-accordion-btn-bg);
+    border: 0;
+    border-radius: 0;
+    overflow-anchor: none;
+    transition: var(--e-accordion-transition);
+
+    &:not(.collapsed) {
+        color: var(--e-accordion-active-color);
+        background-color: var(--e-accordion-active-bg);
+        box-shadow: inset 0 calc(-1 * var(--e-accordion-border-width)) 0 var(--e-accordion-border-color);
+
+        &::after {
+            background-image: var(--e-accordion-btn-active-icon);
+            transform: var(--e-accordion-btn-icon-transform);
+        }
+    }
+
+    // Icon arrow
+    &::after {
+        flex-shrink: 0;
+        width: var(--e-accordion-btn-icon-width);
+        height: var(--e-accordion-btn-icon-width);
+        margin-left: auto;
+        content: "";
+        background-image: var(--e-accordion-btn-icon);
+        background-repeat: no-repeat;
+        background-size: var(--e-accordion-btn-icon-width);
+        transition: var(--e-accordion-btn-icon-transition);
+    }
+
+    &:hover {
+        z-index: 2;
+    }
+
+    &:focus {
+        z-index: 3;
+        border-color: var(--e-primary); // Simplified
+        outline: 0;
+        box-shadow: var(--e-accordion-btn-focus-box-shadow);
+    }
+}
+
+.accordion-header {
+    margin-bottom: 0;
+}
+
+.accordion-collapse {
+    transition: height 0.3s ease;
+
+    &.collapse:not(.show) {
+        display: none;
+    }
+}
+
+.collapsing {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+}
+
+.accordion-body {
+    padding: var(--e-accordion-body-padding-y) var(--e-accordion-body-padding-x);
+}
+
+// Flush Accordion
+.accordion-flush {
+    .accordion-collapse {
+        border-width: 0;
+    }
+
+    .accordion-item {
+        border-right: 0;
+        border-left: 0;
+        border-radius: 0;
+
+        &:first-child {
+            border-top: 0;
+        }
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        .accordion-button {
+            border-radius: 0;
+        }
+    }
+}
+
+// Compact Accordion
+.accordion-compact {
+    --e-accordion-btn-padding-y: 0.5rem;
+    --e-accordion-body-padding-y: 0.5rem;
+    font-size: 0.9rem;
+}
+
+// Subtitle helper
+.accordion-header-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1.2;
+
+    .accordion-subtitle {
+        font-size: 0.8em;
+        color: $gray-500;
+        font-weight: 400;
+        margin-top: 0.2rem;
+    }
+}
+
+// Modern Accordion (Animated & Separated)
+.accordion-modern {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    background: transparent;
+
+    .accordion-item {
+        border: 1px solid $gray-200;
+        border-radius: $border-radius-lg !important;
+        overflow: hidden;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: $box-shadow-sm;
+
+        &:hover {
+            border-color: $primary;
+            transform: translateY(-2px);
+            box-shadow: $box-shadow;
+        }
+
+        &.active,
+        &:has(.accordion-button:not(.collapsed)) {
+            border-color: $primary;
+            box-shadow: 0 10px 15px -3px rgba($primary, 0.1);
+        }
+
+        &+.accordion-item {
+            border-top: 1px solid $gray-200; // Reset parent logic
+        }
+    }
+
+    .accordion-button {
+        background-color: transparent;
+        font-weight: 600;
+        padding: 1.25rem 1.5rem;
+
+        &:not(.collapsed) {
+            color: $primary;
+            background-color: rgba($primary, 0.03);
+            box-shadow: none;
+        }
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+
+    .accordion-body {
+        padding: 0.5rem 1.5rem 1.5rem;
+        color: $gray-600;
+        line-height: 1.6;
+    }
+}

package/src/scss/components/_alert.scss

@@ -0,0 +1,85 @@
+// Alert component styles
+// Can be imported individually: @use 'eldo-ui/scss/components/alert';
+
+.alert {
+    position: relative;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &.fade-out {
+        animation: fadeOut 0.3s ease-out forwards;
+    }
+}
+
+@keyframes fadeOut {
+    to {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+}
+
+// Alert variants
+.alert-success {
+    background-color: #d1fae5;
+    border-color: #6ee7b7;
+    color: #065f46;
+
+    i {
+        color: #10b981;
+    }
+}
+
+.alert-warning {
+    background-color: #fef3c7;
+    border-color: #fcd34d;
+    color: #92400e;
+
+    i {
+        color: #f59e0b;
+    }
+}
+
+.alert-danger {
+    background-color: #fee2e2;
+    border-color: #fca5a5;
+    color: #991b1b;
+
+    i {
+        color: #ef4444;
+    }
+}
+
+.alert-info {
+    background-color: #dbeafe;
+    border-color: #93c5fd;
+    color: #1e40af;
+
+    i {
+        color: #3b82f6;
+    }
+}
+
+// Dismissible alerts
+.alert-dismissible {
+    padding-right: 3rem;
+
+    .btn-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 1.25rem 1rem;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        opacity: 0.5;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}

package/src/scss/components/_alerts.scss

@@ -0,0 +1,137 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+@use "../abstracts/functions" as *;
+
+.alert {
+    --e-alert-bg: transparent;
+    --e-alert-padding-x: 1rem;
+    --e-alert-padding-y: 1rem;
+    --e-alert-margin-bottom: 1rem;
+    --e-alert-color: inherit;
+    --e-alert-border-color: transparent;
+    --e-alert-border: 1px solid var(--e-alert-border-color);
+    --e-alert-border-radius: #{$border-radius};
+
+    position: relative;
+    padding: var(--e-alert-padding-y) var(--e-alert-padding-x);
+    margin-bottom: var(--e-alert-margin-bottom);
+    color: var(--e-alert-color);
+    background-color: var(--e-alert-bg);
+    border: var(--e-alert-border);
+    border-radius: var(--e-alert-border-radius);
+
+    // Flex for icon alignment
+    display: flex;
+    align-items: flex-start; // Icons often need top alignment if text wraps
+    gap: 0.75rem;
+
+    // For non-icon content wrapper
+    >div:not(.alert-icon):not(.btn-close) {
+        flex: 1;
+    }
+}
+
+// Generate Standard Contextual Classes
+@each $state, $value in $theme-colors {
+    .alert-#{$state} {
+        --e-alert-color: #{color.scale($value, $lightness: -60%)};
+        --e-alert-bg: #{color.scale($value, $lightness: 80%)};
+        --e-alert-border-color: #{color.scale($value, $lightness: 70%)};
+
+        @if $state =="dark" {
+            --e-alert-color: #{$light};
+            --e-alert-bg: #{$value};
+            --e-alert-border-color: #{color.scale($value, $lightness: 10%)};
+        }
+    }
+}
+
+// Generate Subtle/Chakra-Style Classes
+@each $state, $value in $theme-colors {
+    .alert-subtle-#{$state} {
+        // Chakra "Subtle" is usually very light bg, no border, darker text
+        --e-alert-color: #{color.scale($value, $lightness: -50%)};
+        --e-alert-bg: #{color.scale($value, $lightness: 92%)}; // Very light
+        --e-alert-border-color: transparent;
+
+        // Left Accent Variant (can be combined)
+        &.alert-left-accent {
+            border-left: 4px solid $value;
+            border-top-left-radius: 2px;
+            border-bottom-left-radius: 2px;
+        }
+
+        @if $state =="dark" {
+            --e-alert-bg: #{color.scale($value, $lightness: 20%)};
+            --e-alert-color: #{$light};
+
+            &.alert-left-accent {
+                border-left-color: #{color.scale($value, $lightness: 40%)};
+            }
+        }
+    }
+}
+
+// Generate Soft Variants (Refined look)
+@each $state, $value in $theme-colors {
+    @if $state !="light" and $state !="dark" {
+        .alert-soft-#{$state} {
+            --e-alert-bg: var(--e-#{$state}-soft);
+            --e-alert-color: #{color.scale($value, $lightness: -60%)};
+            --e-alert-border-color: #{color.scale($value, $lightness: 80%)};
+        }
+    }
+}
+
+// Icon helper
+.alert-icon {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.15rem; // Optical alignment with line-height
+}
+
+// Dismissible alerts
+.alert-dismissible {
+    padding-right: 3rem;
+
+    .btn-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 2;
+        padding: 1.25rem 1rem;
+    }
+}
+
+// Simple Close Button for alerts (Bootstrap style 'btn-close')
+.btn-close {
+    box-sizing: content-box;
+    width: 1em;
+    height: 1em;
+    padding: 0.25em 0.25em;
+    color: #000;
+    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
+    border: 0;
+    border-radius: 0.25rem;
+    opacity: 0.5;
+    cursor: pointer;
+
+    &:hover {
+        color: #000;
+        text-decoration: none;
+        opacity: 0.75;
+    }
+
+    &:focus {
+        outline: 0;
+        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+        opacity: 1;
+    }
+
+    &:disabled {
+        pointer-events: none;
+        user-select: none;
+        opacity: 0.25;
+    }
+}

package/src/scss/components/_avatar.scss

@@ -0,0 +1,184 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.avatar {
+    --e-avatar-size: 3rem;
+    --e-avatar-font-size: calc(var(--e-avatar-size) / 2.5);
+    --e-avatar-bg: #{$gray-300};
+    --e-avatar-color: #{$gray-600};
+    --e-avatar-border-radius: #{$border-radius};
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--e-avatar-size);
+    height: var(--e-avatar-size);
+    font-size: var(--e-avatar-font-size);
+    font-weight: 500;
+    color: var(--e-avatar-color);
+    background-color: var(--e-avatar-bg);
+    border-radius: var(--e-avatar-border-radius);
+    line-height: 1;
+    overflow: hidden;
+    user-select: none;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: inherit;
+    }
+
+    svg {
+        width: 60%;
+        height: 60%;
+        fill: currentColor;
+    }
+
+    &.avatar-bordered {
+        border: 2px solid $white;
+    }
+
+    // Sizes (Chakra UI Scale)
+    &.avatar-2xs {
+        --e-avatar-size: 1rem;
+        font-size: 0.5rem;
+    }
+
+    &.avatar-xs {
+        --e-avatar-size: 1.5rem;
+        font-size: 0.75rem;
+    }
+
+    &.avatar-sm {
+        --e-avatar-size: 2rem;
+        font-size: 0.875rem;
+    }
+
+    &.avatar-md {
+        --e-avatar-size: 3rem;
+        font-size: 1.25rem;
+    }
+
+    &.avatar-lg {
+        --e-avatar-size: 4rem;
+        font-size: 1.5rem;
+    }
+
+    &.avatar-xl {
+        --e-avatar-size: 6rem;
+        font-size: 2.25rem;
+    }
+
+    &.avatar-2xl {
+        --e-avatar-size: 8rem;
+        font-size: 3rem;
+    }
+
+    // Shapes
+    &.rounded-circle {
+        border-radius: 50%;
+    }
+
+    &.rounded-0 {
+        border-radius: 0;
+    }
+
+    &.rounded-md {
+        border-radius: $border-radius;
+    }
+}
+
+.avatar-group {
+    display: flex;
+    align-items: center;
+
+    .avatar {
+        border: 2px solid #fff;
+        margin-left: -0.75rem;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:hover {
+            z-index: 10;
+        }
+    }
+}
+
+// Avatar Badge / Status
+.avatar-badge {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // Scale badge relative to avatar font-size/width
+    width: 0.3em;
+    height: 0.3em;
+    min-width: 12px;
+    min-height: 12px;
+    padding: 0;
+
+    background-color: $gray-500;
+    border: 0.15em solid #fff;
+    border-radius: 50%;
+    font-size: inherit; // inherrit parent avatar font size context for em scaling
+
+    // Adjust positioning slightly to sit on the edge
+    transform: translate(25%, 25%);
+
+    // Status colors
+    &.bg-success {
+        background-color: $success;
+    }
+
+    &.bg-warning {
+        background-color: $warning;
+    }
+
+    &.bg-danger {
+        background-color: $danger;
+    }
+
+    &.bg-primary {
+        background-color: $primary;
+    }
+
+    &.bg-secondary {
+        background-color: $secondary;
+    }
+
+    // Positions
+    &.top-0 {
+        top: 0;
+        bottom: auto;
+        transform: translate(25%, -25%);
+    }
+
+    &.start-0 {
+        right: auto;
+        left: 0;
+        transform: translate(-25%, 25%);
+    }
+
+    &.top-0.start-0 {
+        transform: translate(-25%, -25%);
+    }
+}
+
+// Avatar Ring (Active Speaker / Selected)
+.avatar-ring {
+    box-shadow: 0 0 0 2px $white, 0 0 0 4px $primary;
+
+    &.ring-success {
+        box-shadow: 0 0 0 2px $white, 0 0 0 4px $success;
+    }
+
+    &.ring-danger {
+        box-shadow: 0 0 0 2px $white, 0 0 0 4px $danger;
+    }
+}

package/src/scss/components/_badge.scss

@@ -0,0 +1,70 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+@use "../abstracts/functions" as *;
+
+.badge {
+    --e-badge-padding-x: 0.65em;
+    --e-badge-padding-y: 0.35em;
+    --e-badge-font-size: 0.75em;
+    --e-badge-font-weight: 700;
+    --e-badge-color: #fff;
+    --e-badge-border-radius: #{$border-radius-sm};
+
+    display: inline-block;
+    padding: var(--e-badge-padding-y) var(--e-badge-padding-x);
+    font-size: var(--e-badge-font-size);
+    font-weight: var(--e-badge-font-weight);
+    line-height: 1;
+    color: var(--e-badge-color);
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: var(--e-badge-border-radius);
+
+    &:empty {
+        display: none;
+    }
+}
+
+.rounded-pill {
+    border-radius: 50rem !important;
+}
+
+// Solid variants
+@each $state, $value in $theme-colors {
+    .bg-#{$state} {
+        background-color: var(--e-#{$state}) !important;
+        color: color-contrast($value);
+    }
+}
+
+// Subtle variants (Chakra-style)
+@each $state, $value in $theme-colors {
+    .badge-subtle-#{$state} {
+        // Use a very light background (tint)
+        background-color: color.scale($value, $lightness: 85%);
+        // Use a darker shade for the text
+        color: color.scale($value, $lightness: -40%);
+
+        // Dark mode adjustment if needed
+        @if $state =="dark" {
+            background-color: color.scale($value, $lightness: 20%);
+            color: #fff;
+        }
+
+        @if $state =="light" {
+            background-color: $gray-200;
+            color: #000;
+        }
+    }
+}
+
+// Soft variants
+@each $state, $value in $theme-colors {
+    @if $state !="light" and $state !="dark" {
+        .badge-soft-#{$state} {
+            background-color: var(--e-#{$state}-soft);
+            color: color.scale($value, $lightness: -40%);
+        }
+    }
+}