@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_input-otp.scss

@@ -0,0 +1,338 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.input-otp-group {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    // Base Slot Style
+    .input-otp-slot {
+        box-sizing: border-box;
+        width: 3rem; // Default LG
+        min-width: 3rem;
+        max-width: 3rem;
+        height: 3rem;
+        flex: 0 0 auto; // Prevent flex growing/shrinking
+
+        font-size: 1.125rem;
+        font-family: inherit;
+        text-align: center;
+        // Vertically align text roughly center
+        line-height: 1;
+        padding: 0;
+
+        border: 2px solid transparent;
+        border-radius: 0.875rem; // HeroUI "md" is approx 14px visually
+        background-color: transparent;
+        color: $body-color;
+
+        transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.1s;
+        appearance: none;
+        caret-color: $body-color; // Default caret
+        box-shadow: none;
+        font-weight: 400; // HeroUI usually normal/medium
+        display: block; // Ensure it behaves as a block in flex, though browser defaults vary
+
+        // Interactive States (Focus / Active)
+        &:focus,
+        &[data-focus="true"],
+        &[data-active="true"] {
+            outline: none;
+            z-index: 10;
+            // No default here if variants handle it, but for safety:
+        }
+
+        &:active {
+            transform: scale(0.97);
+        }
+
+        &:disabled,
+        &[data-disabled="true"] {
+            opacity: 0.5;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        &[readonly],
+        &[data-readonly="true"] {
+            cursor: default;
+            background-color: transparent;
+            border-color: $gray-200;
+            color: $gray-600;
+        }
+
+        &[type="password"] {
+            font-family: monospace; // Better dot alignment
+            letter-spacing: 0;
+        }
+
+        // Invalid / Error State
+        &:invalid,
+        &.is-invalid {
+            border-color: $danger !important;
+            background-color: color.scale($danger, $lightness: 90%) !important; // Light pink
+            color: $danger !important;
+
+            &:focus,
+            &[data-focus="true"] {
+                border-color: $danger !important;
+                box-shadow: 0 0 0 2px $body-bg, 0 0 0 4px $danger !important;
+                background-color: #fff !important;
+            }
+        }
+    }
+
+    // --- Helper Wrappers ---
+    .input-otp-helper-wrapper {
+        margin-top: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .input-otp-description {
+        font-size: 0.75rem;
+        color: $gray-500;
+    }
+
+    .input-otp-error-message {
+        font-size: 0.75rem;
+        color: $danger;
+    }
+
+    // --- Sizes ---
+    // SM: 32px
+    &.input-otp-sm .input-otp-slot {
+        width: 2rem;
+        min-width: 2rem;
+        max-width: 2rem;
+        height: 2rem;
+        font-size: 0.875rem;
+        border-radius: 0.5rem; // 8px
+    }
+
+    // MD: 40px (Default)
+    &.input-otp-md .input-otp-slot {
+        width: 2.5rem;
+        min-width: 2.5rem;
+        max-width: 2.5rem;
+        height: 2.5rem;
+        font-size: 1rem;
+        border-radius: 0.75rem; // 12px
+    }
+
+    // LG: 48px
+    &.input-otp-lg .input-otp-slot {
+        width: 3rem;
+        min-width: 3rem;
+        max-width: 3rem;
+        height: 3rem;
+        font-size: 1.125rem;
+        border-radius: 0.875rem; // 14px
+    }
+
+    // --- Radius Overrides ---
+    &.input-otp-radius-none .input-otp-slot {
+        border-radius: 0;
+    }
+
+    &.input-otp-radius-sm .input-otp-slot {
+        border-radius: 0.5rem;
+    }
+
+    &.input-otp-radius-md .input-otp-slot {
+        border-radius: 0.75rem;
+    }
+
+    &.input-otp-radius-lg .input-otp-slot {
+        border-radius: 0.875rem;
+    }
+
+    &.input-otp-radius-full .input-otp-slot {
+        border-radius: 9999px;
+    }
+
+    // --- Shadow ---
+    &.input-otp-shadow-sm .input-otp-slot {
+        box-shadow: $box-shadow-sm;
+    }
+
+    &.input-otp-shadow .input-otp-slot {
+        box-shadow: $box-shadow;
+    }
+
+    &.input-otp-shadow-lg .input-otp-slot {
+        box-shadow: $box-shadow-lg;
+    }
+
+    // --- Variants ---
+
+    // 1. Flat (Default)
+    &.input-otp-flat .input-otp-slot,
+    & .input-otp-slot {
+        background-color: $gray-100;
+        border-color: transparent;
+
+        &:hover {
+            background-color: color.scale($gray-100, $lightness: -3%);
+        }
+
+        &:focus,
+        &[data-active="true"] {
+            background-color: #fff;
+            border-color: transparent;
+            // Ring with Offset: 2px offset + 2px ring
+            box-shadow: 0 0 0 2px $body-bg, 0 0 0 4px $primary;
+        }
+
+        &[readonly],
+        &[data-readonly="true"] {
+            background-color: $gray-50;
+            box-shadow: none;
+        }
+    }
+
+    // 2. Bordered
+    &.input-otp-bordered .input-otp-slot {
+        background-color: transparent;
+        border-color: $gray-300;
+        border-width: 2px; // Explicit 2px border
+
+        &:hover {
+            border-color: $gray-400;
+        }
+
+        &:focus,
+        &[data-active="true"] {
+            border-color: $primary;
+            // Usually bordered validation/focus just changes border color, 
+            // but strict HeroUI might add ring too? Let's check docs.
+            // Often just border color for "bordered".
+            box-shadow: none;
+        }
+    }
+
+    // 3. Underlined
+    &.input-otp-underlined .input-otp-slot {
+        background-color: transparent;
+        border-width: 0 0 2px 0;
+        border-radius: 0;
+        box-shadow: none !important;
+
+        &:hover {
+            border-bottom-color: $gray-400;
+        }
+
+        &:focus,
+        &[data-active="true"] {
+            border-bottom-color: $primary;
+            transform: none;
+        }
+    }
+
+    // 4. Faded
+    &.input-otp-faded .input-otp-slot {
+        background-color: $gray-100;
+        border: 2px solid $gray-100;
+
+        &:hover {
+            background-color: color.scale($gray-100, $lightness: -3%);
+        }
+
+        &:focus,
+        &[data-active="true"] {
+            background-color: #fff;
+            border-color: $gray-100;
+            // Ring with offset
+            box-shadow: 0 0 0 2px $body-bg, 0 0 0 4px $gray-200;
+        }
+    }
+
+    // --- Colors ---
+    @each $color, $value in $theme-colors {
+        &.input-otp-color-#{$color} .input-otp-slot {
+            caret-color: $value;
+
+            // Flat Focus
+            &:focus,
+            &[data-active="true"] {
+                @if $color =="default" {
+                    box-shadow: 0 0 0 2px $body-bg, 0 0 0 4px $gray-400;
+                }
+
+                @else {
+                    box-shadow: 0 0 0 2px $body-bg, 0 0 0 4px $value;
+                }
+            }
+        }
+
+        // Bordered & Underlined Focus (Border only, no ring usually or subtle)
+        &.input-otp-bordered.input-otp-color-#{$color} .input-otp-slot[data-active="true"],
+        &.input-otp-underlined.input-otp-color-#{$color} .input-otp-slot[data-active="true"],
+        &.input-otp-bordered.input-otp-color-#{$color} .input-otp-slot:focus,
+        &.input-otp-underlined.input-otp-color-#{$color} .input-otp-slot:focus {
+            @if $color =="default" {
+                border-color: $body-color;
+            }
+
+            @else {
+                border-color: $value;
+            }
+
+            box-shadow: none;
+        }
+
+        // Faded Ring Color override
+        &.input-otp-faded.input-otp-color-#{$color} .input-otp-slot[data-active="true"],
+        &.input-otp-faded.input-otp-color-#{$color} .input-otp-slot:focus {
+            border-color: $gray-100; // Border stays gray
+
+            @if $color =="default" {
+                box-shadow: 0 0 0 2px $body-bg, 0 0 0 4px $gray-200;
+            }
+
+            @else {
+                box-shadow: 0 0 0 2px $body-bg, 0 0 0 4px color.scale($value, $alpha: -70%);
+            }
+        }
+    }
+
+    // --- Connected ---
+    &.input-otp-connected {
+        gap: 0;
+
+        .input-otp-slot {
+            border-radius: 0;
+            margin-right: -1px; // Collapse borders
+
+            &:focus,
+            &[data-active="true"] {
+                z-index: 20; // Ensure ring sits on top
+            }
+
+            &:first-child {
+                border-top-left-radius: 0.875rem;
+                border-bottom-left-radius: 0.875rem;
+            }
+
+            &:last-child {
+                border-top-right-radius: 0.875rem;
+                border-bottom-right-radius: 0.875rem;
+                margin-right: 0;
+            }
+        }
+
+        &.input-otp-radius-full {
+            .input-otp-slot:first-child {
+                border-top-left-radius: 9999px;
+                border-bottom-left-radius: 9999px;
+            }
+
+            .input-otp-slot:last-child {
+                border-top-right-radius: 9999px;
+                border-bottom-right-radius: 9999px;
+            }
+        }
+    }
+}

package/src/scss/components/_list-group.scss

@@ -0,0 +1,95 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.list-group {
+    --e-list-group-color: #{$body-color};
+    --e-list-group-bg: #fff;
+    --e-list-group-border-color: rgba(0, 0, 0, 0.125);
+    --e-list-group-border-width: 1px;
+    --e-list-group-border-radius: #{$border-radius};
+    --e-list-group-item-padding-x: 1rem;
+    --e-list-group-item-padding-y: 0.5rem;
+    --e-list-group-action-color: #495057;
+    --e-list-group-action-hover-color: #495057;
+    --e-list-group-action-hover-bg: #f8f9fa;
+    --e-list-group-action-active-color: #212529;
+    --e-list-group-action-active-bg: #e9ecef;
+    --e-list-group-disabled-color: #6c757d;
+    --e-list-group-disabled-bg: #fff;
+    --e-list-group-active-color: #fff;
+    --e-list-group-active-bg: #{$primary};
+    --e-list-group-active-border-color: #{$primary};
+
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-bottom: 0;
+    border-radius: var(--e-list-group-border-radius);
+
+    // Optimization
+    content-visibility: auto;
+    contain-intrinsic-size: 0 50px;
+}
+
+.list-group-item {
+    position: relative;
+    display: block;
+    padding: var(--e-list-group-item-padding-y) var(--e-list-group-item-padding-x);
+    color: var(--e-list-group-color);
+    text-decoration: none;
+    background-color: var(--e-list-group-bg);
+    border: var(--e-list-group-border-width) solid var(--e-list-group-border-color);
+
+    &:first-child {
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+    }
+
+    &:last-child {
+        border-bottom-right-radius: inherit;
+        border-bottom-left-radius: inherit;
+    }
+
+    &.disabled,
+    &:disabled {
+        color: var(--e-list-group-disabled-color);
+        pointer-events: none;
+        background-color: var(--e-list-group-disabled-bg);
+    }
+
+    &.active {
+        z-index: 2;
+        color: var(--e-list-group-active-color);
+        background-color: var(--e-list-group-active-bg);
+        border-color: var(--e-list-group-active-border-color);
+    }
+
+    +.list-group-item {
+        border-top-width: 0;
+
+        &.active {
+            margin-top: calc(var(--e-list-group-border-width) * -1);
+            border-top-width: var(--e-list-group-border-width);
+        }
+    }
+}
+
+// Interactive list items
+.list-group-item-action {
+    width: 100%;
+    color: var(--e-list-group-action-color);
+    text-align: inherit;
+
+    &:hover,
+    &:focus {
+        z-index: 1; // Place above sibling items (less rounded corners)
+        color: var(--e-list-group-action-hover-color);
+        text-decoration: none;
+        background-color: var(--e-list-group-action-hover-bg);
+    }
+
+    &:active {
+        color: var(--e-list-group-action-active-color);
+        background-color: var(--e-list-group-action-active-bg);
+    }
+}

package/src/scss/components/_modal.scss

@@ -0,0 +1,166 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1055;
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: 0;
+
+    &.fade .modal-dialog {
+        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease; // Bouncy scale
+        transform: scale(0.95);
+        opacity: 0;
+    }
+
+    &.show .modal-dialog {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    &.show {
+        display: block;
+    }
+}
+
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: 0.5rem;
+    pointer-events: none;
+    display: flex; // Center alignment support
+    align-items: center;
+    min-height: calc(100% - 1rem); // Vertically center
+
+    @media (min-width: 576px) {
+        max-width: 500px;
+        margin: 1.75rem auto;
+        min-height: calc(100% - 3.5rem);
+    }
+}
+
+.modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - 3.5rem);
+}
+
+.modal-sm {
+    @media (min-width: 576px) {
+        max-width: 300px;
+    }
+}
+
+.modal-lg {
+    @media (min-width: 992px) {
+        max-width: 800px;
+    }
+}
+
+.modal-xl {
+    @media (min-width: 1200px) {
+        max-width: 1140px;
+    }
+}
+
+.modal-fullscreen {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+
+    .modal-content {
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+    }
+
+    .modal-body {
+        overflow-y: auto;
+    }
+}
+
+.modal-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    pointer-events: auto;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0; // Remove border
+    border-radius: $border-radius-lg * 1.5; // Larger radius
+    outline: 0;
+    box-shadow: $box-shadow-lg;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1050;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3); // Lighter overlay
+    backdrop-filter: blur(4px); // HeroUI Blur
+    transition: opacity 0.2s linear;
+
+    &.fade {
+        opacity: 0;
+    }
+
+    &.show {
+        opacity: 1;
+    }
+}
+
+.modal-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 1.5rem 0.5rem; // Spacious header
+    border-bottom: 0; // Removing inner borders for cleaner look
+    border-top-left-radius: calc(#{$border-radius-lg} * 1.5);
+    border-top-right-radius: calc(#{$border-radius-lg} * 1.5);
+
+    .btn-close {
+        padding: 0.5rem;
+        margin: -0.5rem -0.5rem -0.5rem auto;
+    }
+}
+
+.modal-title {
+    margin-bottom: 0;
+    line-height: 1.5;
+    font-weight: $font-weight-bold;
+    font-size: 1.25rem;
+}
+
+.modal-body {
+    position: relative;
+    flex: 1 1 auto;
+    padding: 0.5rem 1.5rem 1.5rem; // Adjust padding
+}
+
+.modal-footer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0.75rem 1.5rem 1.5rem;
+    border-top: 0; // Remove border
+    border-bottom-right-radius: calc(#{$border-radius-lg} * 1.5);
+    border-bottom-left-radius: calc(#{$border-radius-lg} * 1.5);
+
+    >* {
+        margin: 0.25rem;
+    }
+}