@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_snippet.scss

@@ -0,0 +1,79 @@
+@use "../abstracts/variables" as *;
+@use "sass:color";
+
+.snippet {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $spacer;
+    padding: $spacer * 0.5 $spacer;
+    background-color: $gray-100;
+    border-radius: $border-radius-lg; // More rounded like HeroUI
+    border: 1px solid $gray-200;
+    font-family: $font-family-code;
+    font-size: $font-size-sm;
+    color: $gray-800;
+    min-width: 200px;
+
+    // Symbol (like $)
+    .snippet-symbol {
+        user-select: none;
+        color: $gray-500;
+        margin-right: $spacer * 0.25;
+    }
+
+    // actual code text
+    .snippet-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // Copy Button (Icon only)
+    .snippet-copy-btn {
+        background: transparent;
+        border: none;
+        color: $gray-500;
+        cursor: pointer;
+        padding: 0.25rem;
+        border-radius: $border-radius;
+        transition: all 0.2s;
+        line-height: 0;
+
+        &:hover {
+            color: $gray-800;
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        &.copied {
+            color: $success;
+        }
+    }
+
+    // Variations
+    &.snippet-solid {
+        background-color: $gray-900;
+        color: $white;
+        border-color: $gray-900;
+
+        .snippet-symbol {
+            color: $gray-400;
+        }
+
+        .snippet-copy-btn {
+            color: $gray-400;
+
+            &:hover {
+                color: $white;
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+        }
+    }
+
+    &.snippet-flat {
+        background-color: transparent;
+        border-color: transparent;
+    }
+}

package/src/scss/components/_spinners.scss

@@ -0,0 +1,137 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+@keyframes spinner-border {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner-border {
+    display: inline-block;
+    width: 1.5rem; // Slightly smaller default
+    height: 1.5rem;
+    vertical-align: -0.125em;
+    border: 0.15rem solid currentColor; // Refined thin border
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border 0.75s linear infinite;
+
+    &.text-primary {
+        color: $primary;
+    }
+
+    &.text-secondary {
+        color: $secondary;
+    }
+
+    &.text-success {
+        color: $success;
+    }
+
+    &.text-danger {
+        color: $danger;
+    }
+
+    &.text-warning {
+        color: $warning;
+    }
+
+    &.text-info {
+        color: $info;
+    }
+
+    &.text-light {
+        color: $light;
+    }
+
+    &.text-dark {
+        color: $dark;
+    }
+}
+
+.spinner-border-sm {
+    width: 1rem;
+    height: 1rem;
+    border-width: 0.125em;
+}
+
+@keyframes spinner-grow {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.spinner-grow {
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    vertical-align: -0.125em;
+    background-color: currentColor;
+    border-radius: 50%;
+    opacity: 0;
+    animation: spinner-grow 0.75s linear infinite;
+}
+
+.spinner-grow-sm {
+    width: 1rem;
+    height: 1rem;
+}
+
+// Dots Spinner (Modern)
+.spinner-dots {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    div {
+        width: 0.5rem;
+        height: 0.5rem;
+        margin: 0 0.2rem;
+        background-color: currentColor;
+        border-radius: 50%;
+        animation: spinner-dots-bounce 1.4s infinite ease-in-out both;
+
+        &:nth-child(1) {
+            animation-delay: -0.32s;
+        }
+
+        &:nth-child(2) {
+            animation-delay: -0.16s;
+        }
+    }
+}
+
+@keyframes spinner-dots-bounce {
+
+    0%,
+    80%,
+    100% {
+        transform: scale(0);
+    }
+
+    40% {
+        transform: scale(1);
+    }
+}
+
+// Loading Overlay (New)
+.loader-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(2px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    border-radius: inherit;
+}

package/src/scss/components/_stat.scss

@@ -0,0 +1,42 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.stat {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-label {
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: $gray-600;
+}
+
+.stat-number {
+    font-weight: 700;
+    font-size: 2.25rem;
+    line-height: 1.2;
+    color: $body-color;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+
+.stat-help-text {
+    font-size: 0.875rem;
+    color: $gray-500;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: center;
+
+    svg {
+        margin-right: 0.25rem;
+    }
+
+    &.type-increase {
+        color: $success;
+    }
+
+    &.type-decrease {
+        color: $danger;
+    }
+}

package/src/scss/components/_stepper.scss

@@ -0,0 +1,104 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.stepper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 2rem;
+    position: relative;
+
+    // The connecting line
+    &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: $gray-200;
+        transform: translateY(-50%);
+        z-index: 1;
+    }
+}
+
+.stepper-item {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    background-color: $white;
+    padding: 0 0.5rem;
+}
+
+.stepper-circle {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background-color: $white;
+    border: 2px solid $gray-200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: $font-weight-bold;
+    color: $gray-500;
+    transition: all 0.3s ease;
+}
+
+.stepper-label {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+    color: $gray-500;
+}
+
+// States
+.stepper-item.completed {
+    .stepper-circle {
+        background-color: $success;
+        border-color: $success;
+        color: $white;
+    }
+
+    .stepper-label {
+        color: $success;
+    }
+}
+
+.stepper-item.active {
+    .stepper-circle {
+        background-color: $white;
+        border-color: $primary;
+        color: $primary;
+        box-shadow: 0 0 0 4px color.scale($primary, $alpha: -80%);
+    }
+
+    .stepper-label {
+        color: $primary;
+        font-weight: $font-weight-bold;
+    }
+}
+
+// Vertical variation
+.stepper-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+
+    &::before {
+        left: 1.25rem;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        height: 100%;
+        transform: translateX(-50%);
+    }
+
+    .stepper-item {
+        flex-direction: row;
+        padding: 0;
+        background: transparent;
+    }
+}

package/src/scss/components/_switch.scss

@@ -0,0 +1,57 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.form-switch {
+    padding-left: 3.5em;
+    margin-bottom: 0.5rem;
+
+    .form-check-input {
+        width: 3em;
+        margin-left: -3.5em;
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+        background-position: left center;
+        border-radius: 3em;
+        transition: background-position 0.2s ease-in-out, background-color 0.2s ease-in-out;
+        border: 2px solid $gray-300;
+
+        &:focus {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e");
+        }
+
+        &:checked {
+            background-position: right center;
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+            background-color: $primary;
+            border-color: $primary;
+        }
+    }
+
+    // Switch Sizes
+    &.form-switch-sm {
+        padding-left: 2.5em;
+
+        .form-check-input {
+            width: 2em;
+            margin-left: -2.5em;
+            height: 1.25em;
+        }
+    }
+
+    &.form-switch-lg {
+        padding-left: 4.5em;
+
+        .form-check-input {
+            width: 4em;
+            margin-left: -4.5em;
+            height: 2em;
+        }
+    }
+}
+
+// Color variations
+@each $color, $value in $theme-colors {
+    .form-switch-#{$color} .form-check-input:checked {
+        background-color: $value;
+        border-color: $value;
+    }
+}

package/src/scss/components/_table.scss

@@ -0,0 +1,109 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+// Table Variables
+.table {
+    --e-table-bg: transparent;
+    --e-table-header-bg: transparent;
+    --e-table-header-color: #64748b; // Slate-500
+    --e-table-border-color: #e2e8f0; // Slate-200
+    --e-table-striped-bg: #f8fafc; // Slate-50
+    --e-table-striped-color: #1e293b; // Slate-800
+    --e-table-hover-bg: #f1f5f9; // Slate-100
+    --e-table-hover-color: #0f172a; // Slate-900
+
+    width: 100%;
+    margin-bottom: 1rem;
+    color: #334155; // Slate-700
+    vertical-align: top;
+    border-color: var(--e-table-border-color);
+
+    // Header Styling
+    > :not(caption)>*>* {
+        padding: 1rem 1rem; // Reduced horizontal padding (was 1.5rem)
+        background-color: var(--e-table-bg);
+        border-bottom-width: 1px;
+        box-shadow: inset 0 0 0 9999px var(--e-table-accent-bg);
+    }
+
+    >thead {
+        vertical-align: middle; // Vertically center headers
+
+        th {
+            text-align: left; // Default align left matching standard data
+            font-weight: 600;
+            font-size: 0.8125rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: #475569;
+            background-color: #f8fafc;
+            border-bottom: 1px solid #e2e8f0;
+        }
+    }
+
+    >tbody {
+        vertical-align: middle; // Ensure data is vertically centered
+
+        tr {
+            transition: background-color 0.2s ease;
+        }
+    }
+}
+
+// Clean Variant (Floating Rows)
+.table-clean {
+    border-collapse: separate;
+    border-spacing: 0 0.5rem; // Row gap
+
+    >thead th {
+        background-color: transparent;
+        border-bottom: 0;
+        padding-bottom: 0.5rem;
+    }
+
+    >tbody>tr {
+        background-color: #fff;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        border-radius: 0.5rem;
+
+        >td {
+            background-color: transparent; // Let row bg show
+            border: 0;
+
+            &:first-child {
+                border-top-left-radius: 0.5rem;
+                border-bottom-left-radius: 0.5rem;
+            }
+
+            &:last-child {
+                border-top-right-radius: 0.5rem;
+                border-bottom-right-radius: 0.5rem;
+            }
+        }
+
+        &:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            background-color: #fff; // Keep white styling on hover
+            z-index: 1;
+            position: relative;
+        }
+    }
+}
+
+// Striped
+.table-striped {
+    >tbody>tr:nth-of-type(odd)>* {
+        --e-table-accent-bg: var(--e-table-striped-bg);
+        color: var(--e-table-striped-color);
+    }
+}
+
+// Hover Effect (Standard)
+.table-hover {
+    >tbody>tr:hover>* {
+        --e-table-accent-bg: var(--e-table-hover-bg);
+        color: var(--e-table-hover-color);
+        cursor: pointer;
+    }
+}

package/src/scss/components/_tag.scss

@@ -0,0 +1,60 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+@use "../abstracts/functions" as *;
+
+// Tags are similar to badges but often have different interaction sizing
+// and are usually 'subtle' by default in the requested style.
+
+.tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+    border-radius: $border-radius-sm;
+    white-space: nowrap;
+    vertical-align: top;
+
+    // Default to a subtle gray interaction
+    background-color: $gray-200;
+    color: $gray-800;
+
+    .btn-close {
+        width: 0.5em;
+        height: 0.5em;
+        margin-left: 0.5rem;
+        padding: 0;
+        opacity: 0.5;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+// Rounded tags
+.tag-rounded {
+    border-radius: 50rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+}
+
+// Tag Variants similar to badges
+@each $state, $value in $theme-colors {
+    .tag-#{$state} {
+        background-color: color.scale($value, $lightness: 85%);
+        color: color.scale($value, $lightness: -40%);
+
+        @if $state =="dark" {
+            background-color: color.scale($value, $lightness: 20%);
+            color: #fff;
+        }
+    }
+
+    .tag-solid-#{$state} {
+        background-color: $value;
+        color: color-contrast($value);
+    }
+}

package/src/scss/components/_tags-input.scss

@@ -0,0 +1,60 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.tags-input-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: $body-color;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    cursor: text;
+
+    &.focus-within {
+        border-color: color.scale($primary, $lightness: 40%);
+        outline: 0;
+        box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+    }
+
+    .tag-item {
+        display: inline-flex;
+        align-items: center;
+        background-color: $gray-200;
+        color: $gray-800;
+        border-radius: $border-radius-sm;
+        padding: 0.125rem 0.5rem;
+        font-size: 0.875rem;
+
+        .btn-close {
+            margin-left: 0.5rem;
+            font-size: 0.75rem;
+            width: 0.5em;
+            height: 0.5em;
+            background-size: 0.75em;
+        }
+    }
+
+    input.tags-input-field {
+        border: none;
+        outline: none;
+        background: transparent;
+        flex-grow: 1;
+        min-width: 150px;
+        color: inherit;
+        padding: 0;
+        margin: 0;
+
+        &::placeholder {
+            color: $gray-500;
+        }
+    }
+}