@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_calendar.scss

@@ -0,0 +1,520 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.calendar {
+    width: 300px;
+    max-width: 100%;
+    padding: 1rem;
+    background-color: #fff;
+    border-radius: $border-radius-lg;
+    box-shadow: $box-shadow-sm;
+    display: inline-block;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+
+    .calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 1rem;
+
+        .calendar-title {
+            font-weight: $font-weight-bold;
+            font-size: 1rem;
+            color: $dark;
+            flex: 1;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .calendar-nav-btn {
+            background: transparent;
+            border: none;
+            color: $gray-600;
+            padding: 0.5rem;
+            cursor: pointer;
+            border-radius: $border-radius;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            font-size: 1.25rem;
+            line-height: 1;
+            width: 2rem;
+            height: 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                background-color: $gray-100;
+                color: $dark;
+                transform: scale(1.1);
+            }
+
+            &:active {
+                transform: scale(0.95);
+            }
+        }
+    }
+
+    .calendar-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 0.25rem;
+        text-align: center;
+    }
+
+    .calendar-week-day {
+        font-size: 0.75rem;
+        color: $gray-500;
+        text-transform: uppercase;
+        font-weight: $font-weight-semibold;
+        margin-bottom: 0.5rem;
+        padding: 0.25rem 0;
+    }
+
+    .calendar-cell {
+        width: 2.25rem;
+        height: 2.25rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.875rem;
+        border-radius: $border-radius;
+        cursor: pointer;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        color: $body-color;
+        position: relative;
+        overflow: visible;
+
+        &:hover:not(.disabled):not(.selected):not(.in-range) {
+            background-color: $gray-100;
+            transform: scale(1.05);
+        }
+
+        &.selected,
+        &.range-start,
+        &.range-end {
+            background-color: $primary;
+            color: #fff;
+            font-weight: $font-weight-semibold;
+            box-shadow: 0 4px 6px -1px rgba($primary, 0.4);
+            border-radius: $border-radius;
+            transform: scale(1.05);
+        }
+
+        &.range-start {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &.range-end {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &.in-range:not(.range-start):not(.range-end) {
+            background-color: color.scale($primary, $lightness: 85%);
+            color: color.scale($primary, $lightness: -20%);
+            border-radius: 0;
+        }
+
+        &.today {
+            border: 2px solid $primary;
+            font-weight: $font-weight-semibold;
+
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: 2px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 4px;
+                height: 4px;
+                background-color: $primary;
+                border-radius: 50%;
+            }
+        }
+
+        &.weekend {
+            color: $danger;
+        }
+
+        &.disabled {
+            color: $gray-300;
+            cursor: not-allowed;
+            pointer-events: none;
+            text-decoration: line-through;
+        }
+
+        &.outside-month {
+            color: $gray-400;
+            opacity: 0.5;
+        }
+
+        &.multi-selected {
+            background-color: $success;
+            color: #fff;
+            font-weight: $font-weight-semibold;
+            box-shadow: 0 2px 4px rgba($success, 0.3);
+        }
+
+        // Event indicators
+        &.has-event {
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                bottom: 3px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 4px;
+                height: 4px;
+                background-color: $primary;
+                border-radius: 50%;
+            }
+
+            &.has-multiple-events::before {
+                width: 6px;
+                height: 6px;
+            }
+        }
+
+        .event-dot {
+            position: absolute;
+            bottom: 3px;
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+
+            &.event-primary {
+                background-color: $primary;
+            }
+
+            &.event-success {
+                background-color: $success;
+            }
+
+            &.event-danger {
+                background-color: $danger;
+            }
+
+            &.event-warning {
+                background-color: $warning;
+            }
+
+            &.event-info {
+                background-color: $info;
+            }
+        }
+    }
+
+    // Event list in calendar
+    .calendar-events {
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid $gray-200;
+        max-height: 250px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &.collapsed {
+            max-height: 0;
+            padding-top: 0;
+            margin-top: 0;
+            border-top: none;
+            opacity: 0;
+        }
+
+        .events-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.75rem;
+            padding: 0 0.25rem;
+
+            h6 {
+                margin: 0;
+                font-size: 0.875rem;
+                font-weight: $font-weight-bold;
+                color: $dark;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            button {
+                flex-shrink: 0;
+                white-space: nowrap;
+            }
+        }
+
+        .event-item {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            margin-bottom: 0.5rem;
+            border-radius: $border-radius;
+            background-color: #fff;
+            border: 1px solid $gray-200;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            cursor: pointer;
+
+            &:hover {
+                background-color: $gray-50;
+                border-color: $gray-300;
+                transform: translateX(4px);
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            }
+
+            &:active {
+                transform: translateX(2px);
+            }
+
+            .event-color {
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                flex-shrink: 0;
+                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
+            }
+
+            .event-details {
+                flex: 1;
+                min-width: 0;
+
+                .event-title {
+                    font-size: 0.875rem;
+                    font-weight: $font-weight-semibold;
+                    color: $dark;
+                    margin: 0 0 0.25rem 0;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .event-time {
+                    font-size: 0.75rem;
+                    color: $gray-600;
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+
+// Compact Variant
+.calendar-compact {
+    width: 240px;
+    padding: 0.75rem;
+
+    .calendar-header {
+        margin-bottom: 0.75rem;
+
+        .calendar-title {
+            font-size: 0.875rem;
+        }
+
+        .calendar-nav-btn {
+            padding: 0.25rem;
+            width: 1.5rem;
+            height: 1.5rem;
+            font-size: 1rem;
+        }
+    }
+
+    .calendar-cell {
+        width: 1.75rem;
+        height: 1.75rem;
+        font-size: 0.75rem;
+    }
+
+    .calendar-week-day {
+        font-size: 0.625rem;
+        margin-bottom: 0.25rem;
+    }
+}
+
+// Card Variant
+.calendar-card {
+    box-shadow: $box-shadow;
+    border: 1px solid $gray-200;
+    padding: 1.5rem;
+
+    &:hover {
+        box-shadow: $box-shadow-lg;
+        transform: translateY(-2px);
+    }
+
+    .calendar-header {
+        padding-bottom: 1rem;
+        border-bottom: 1px solid $gray-200;
+        margin-bottom: 1rem;
+    }
+}
+
+// Inline Variant
+.calendar-inline {
+    width: 100%;
+    max-width: 100%;
+    box-shadow: none;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius;
+
+    .calendar-grid {
+        gap: 0.5rem;
+    }
+
+    .calendar-cell {
+        width: 100%;
+        height: 2.5rem;
+    }
+}
+
+// Date Picker
+.date-picker {
+    position: relative;
+    display: inline-block;
+
+    .date-picker-input-group {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .form-control {
+            padding-right: 2.5rem;
+        }
+
+        .date-picker-icon {
+            position: absolute;
+            right: 0.75rem;
+            pointer-events: none;
+            font-size: 1.25rem;
+            color: $gray-500;
+        }
+    }
+
+    .date-picker-popover {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        left: 0;
+        z-index: 1050;
+        display: none;
+        background: #fff;
+        border-radius: $border-radius-lg;
+        box-shadow: $box-shadow-lg;
+        padding: 0.5rem;
+
+        &.show {
+            display: block;
+            animation: fadeInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        // Make calendar compact in date picker
+        .calendar {
+            width: 260px;
+            padding: 0.75rem;
+            box-shadow: none;
+
+            .calendar-header {
+                margin-bottom: 0.75rem;
+
+                .calendar-title {
+                    font-size: 0.9rem;
+                }
+
+                .calendar-nav-btn {
+                    width: 1.75rem;
+                    height: 1.75rem;
+                    font-size: 1.1rem;
+                }
+            }
+
+            .calendar-cell {
+                width: 2rem;
+                height: 2rem;
+                font-size: 0.8rem;
+            }
+
+            .calendar-week-day {
+                font-size: 0.7rem;
+                margin-bottom: 0.4rem;
+            }
+        }
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// Time Input
+.time-input {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background-color: $gray-100;
+    border-radius: $border-radius;
+    border: 1px solid $gray-300;
+    transition: all 0.2s;
+
+    &:focus-within {
+        border-color: $primary;
+        box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+        background-color: #fff;
+    }
+
+    input {
+        width: 3rem;
+        text-align: center;
+        border: none;
+        background: transparent;
+        font-size: 1.25rem;
+        font-weight: $font-weight-semibold;
+        color: $dark;
+        outline: none;
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            opacity: 1;
+        }
+    }
+
+    .time-separator {
+        font-size: 1.5rem;
+        font-weight: $font-weight-bold;
+        color: $gray-400;
+    }
+
+    .time-period {
+        padding: 0.25rem 0.75rem;
+        background-color: $primary;
+        color: #fff;
+        border-radius: $border-radius;
+        font-size: 0.875rem;
+        font-weight: $font-weight-semibold;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+            background-color: color.scale($primary, $lightness: -10%);
+            transform: scale(1.05);
+        }
+
+        &:active {
+            transform: scale(0.95);
+        }
+    }
+}

package/src/scss/components/_card.scss

@@ -0,0 +1,52 @@
+// Card component styles
+// Can be imported individually: @use 'eldo-ui/scss/components/card';
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+
+    &.card-hoverable {
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+    }
+}
+
+.card-body {
+    flex: 1 1 auto;
+    padding: 1.5rem;
+}
+
+.card-title {
+    margin-bottom: 0.75rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.card-text {
+    margin-bottom: 0;
+    color: #64748b;
+}
+
+.card-header {
+    padding: 1rem 1.5rem;
+    margin-bottom: 0;
+    background-color: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.card-footer {
+    padding: 1rem 1.5rem;
+    background-color: #f8fafc;
+    border-top: 1px solid #e2e8f0;
+}

package/src/scss/components/_cards.scss

@@ -0,0 +1,123 @@
+@use "../abstracts/variables" as *;
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: $border-radius;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+
+    // CSS Optimization
+    container-type: inline-size;
+    content-visibility: auto;
+    contain-intrinsic-size: 0 100px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.card-interactive:hover {
+        transform: translateY(-5px);
+        box-shadow: $box-shadow-lg;
+        border-color: rgba($primary, 0.3);
+        cursor: pointer;
+    }
+}
+
+.card-body {
+    flex: 1 1 auto;
+    padding: 1rem;
+}
+
+.card-title {
+    margin-bottom: 0.5rem;
+    font-size: 1.25rem;
+}
+
+.card-subtitle {
+    margin-top: -0.25rem;
+    margin-bottom: 1rem;
+    color: var(--e-secondary);
+}
+
+.card-text {
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.card-header {
+    padding: 0.5rem 1rem;
+    margin-bottom: 0;
+    background-color: rgba(0, 0, 0, 0.03);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+    &:first-child {
+        border-radius: calc(#{$border-radius} - 1px) calc(#{$border-radius} - 1px) 0 0;
+    }
+}
+
+.card-footer {
+    padding: 0.75rem 1.25rem;
+    background-color: rgba(0, 0, 0, 0.01);
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+
+    &:last-child {
+        border-radius: 0 0 calc(#{$border-radius} - 1px) calc(#{$border-radius} - 1px);
+    }
+}
+
+// Images
+.card-img,
+.card-img-top,
+.card-img-bottom {
+    width: 100%;
+}
+
+.card-img-top {
+    border-top-left-radius: calc(#{$border-radius} - 1px);
+    border-top-right-radius: calc(#{$border-radius} - 1px);
+}
+
+.card-img-bottom {
+    border-bottom-right-radius: calc(#{$border-radius} - 1px);
+    border-bottom-left-radius: calc(#{$border-radius} - 1px);
+}
+
+.card-img-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1rem;
+    border-radius: calc(#{$border-radius} - 1px);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+// Horizontal variation
+.card-horizontal {
+    @media (min-width: 768px) {
+        flex-direction: row;
+
+        .card-img-top,
+        .card-img-bottom,
+        .card-img {
+            width: 35%;
+            object-fit: cover;
+            border-radius: calc(#{$border-radius} - 1px) 0 0 calc(#{$border-radius} - 1px);
+        }
+
+        .card-body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+    }
+}