@amelharrak/eldo-ui 1.0.1

package/src/scss/components/_file-upload.scss

@@ -0,0 +1,233 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+// Custom File Input
+.form-control[type="file"] {
+    &::file-selector-button {
+        background-color: $gray-200;
+        color: $body-color;
+        border: 0;
+        border-right: 1px solid $gray-300;
+        margin-right: 1rem;
+        transition: background-color .15s ease-in-out, color .15s ease-in-out;
+
+        &:hover {
+            background-color: $gray-300;
+        }
+    }
+}
+
+// Dropzone Area (Base)
+.dropzone {
+    width: 100%;
+    min-height: 150px;
+    padding: 2rem;
+    border: 2px dashed $gray-300;
+    border-radius: $border-radius;
+    background-color: $gray-100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    transition: all .2s ease-in-out;
+
+    &:hover,
+    &.dragover {
+        background-color: color.scale($primary, $alpha: -95%);
+        border-color: $primary;
+        color: $primary;
+    }
+
+    .dropzone-icon {
+        width: 3rem;
+        height: 3rem;
+        margin-bottom: 1rem;
+        color: $gray-500;
+        transition: color .15s ease-in-out;
+    }
+
+    &:hover .dropzone-icon,
+    &.dragover .dropzone-icon {
+        color: $primary;
+    }
+
+    .dropzone-text {
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+    }
+
+    .dropzone-hint {
+        font-size: 0.875rem;
+        color: $gray-600;
+    }
+}
+
+// Premium Dropzone
+.dropzone-premium {
+    position: relative;
+    padding: 3rem 2rem;
+    background: #fff;
+    border: 2px dashed $gray-200;
+    border-radius: $border-radius-xl;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: color.scale($primary, $alpha: -98%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    .dropzone-icon-wrapper {
+        width: 64px;
+        height: 64px;
+        background: color.scale($primary, $alpha: -92%);
+        border-radius: $border-radius-lg;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 1.5rem;
+        color: $primary;
+        transition: all 0.3s ease;
+        position: relative;
+    }
+
+    &:hover {
+        border-color: $primary;
+        transform: translateY(-2px);
+        box-shadow: $box-shadow-lg;
+
+        &::before {
+            opacity: 1;
+        }
+
+        .dropzone-icon-wrapper {
+            transform: scale(1.11);
+            background: $primary;
+            color: #fff;
+        }
+    }
+
+    &.dragover {
+        border-color: $primary;
+        background: color.scale($primary, $alpha: -95%);
+        transform: scale(1.02);
+    }
+}
+
+// Avatar Upload
+.upload-avatar {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto;
+
+    .avatar-preview {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 4px solid #fff;
+        box-shadow: $box-shadow;
+    }
+
+    .upload-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        cursor: pointer;
+
+        svg {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    &:hover .upload-overlay {
+        opacity: 1;
+    }
+}
+
+// Upload Item (File List)
+.upload-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: #fff;
+    border: 1px solid $gray-200;
+    border-radius: $border-radius-lg;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: $primary;
+        transform: translateX(4px);
+    }
+
+    .file-icon {
+        width: 40px;
+        height: 40px;
+        background: $gray-100;
+        border-radius: $border-radius;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+        color: $gray-600;
+    }
+
+    .file-info {
+        flex: 1;
+        min-width: 0;
+
+        .file-name {
+            display: block;
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 0.125rem;
+        }
+
+        .file-progress {
+            height: 4px;
+            background: $gray-200;
+            border-radius: 2px;
+            overflow: hidden;
+
+            .progress-bar {
+                height: 100%;
+                background: $primary;
+                transition: width 0.3s ease;
+            }
+        }
+    }
+
+    .file-action {
+        margin-left: 1rem;
+        color: $gray-400;
+        cursor: pointer;
+
+        &:hover {
+            color: $danger;
+        }
+    }
+}

package/src/scss/components/_floating-labels.scss

@@ -0,0 +1,247 @@
+@use "sass:math";
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.form-floating {
+    position: relative;
+
+    >.form-control,
+    >.form-control-plaintext,
+    >.form-select {
+        height: 3.5rem;
+        line-height: 1.25;
+        border-radius: $border-radius;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    >label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 1rem 0.75rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        pointer-events: none;
+        border: 1px solid transparent;
+        transform-origin: 0 0;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        color: $gray-600;
+    }
+
+    >.form-control {
+        padding: 1rem 0.75rem;
+
+        &::placeholder {
+            color: transparent;
+        }
+
+        &:focus,
+        &:not(:placeholder-shown) {
+            padding-top: 1.625rem;
+            padding-bottom: 0.625rem;
+        }
+
+        &:-webkit-autofill {
+            padding-top: 1.625rem;
+            padding-bottom: 0.625rem;
+        }
+    }
+
+    >.form-select {
+        padding-top: 1.625rem;
+        padding-bottom: 0.625rem;
+    }
+
+    >.form-control:focus~label,
+    >.form-control:not(:placeholder-shown)~label,
+    >.form-select~label {
+        opacity: 0.65;
+        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+    }
+
+    >.form-control:-webkit-autofill~label {
+        opacity: 0.65;
+        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+    }
+
+    // Default focus state
+    >.form-control:focus~label,
+    >.form-select:focus~label {
+        color: $primary;
+        opacity: 1;
+    }
+}
+
+// Outline Style
+.form-floating-outline {
+    &.form-floating {
+        >label {
+            padding: 1rem 0.75rem;
+            background-color: transparent;
+            z-index: 2;
+        }
+
+        >.form-control:focus~label,
+        >.form-control:not(:placeholder-shown)~label,
+        >.form-select~label {
+            transform: scale(0.85) translateY(-1.35rem) translateX(0.5rem);
+            background-color: #fff;
+            padding: 0 0.5rem;
+            height: auto;
+            opacity: 1;
+        }
+
+        >.form-control:focus~label,
+        >.form-select:focus~label {
+            color: $primary;
+        }
+    }
+}
+
+// Underline Style
+.form-floating-underline {
+    &.form-floating {
+
+        >.form-control,
+        >.form-select {
+            border: 0;
+            border-bottom: 2px solid $gray-200;
+            border-radius: 0;
+            background-color: transparent;
+            padding-left: 0;
+            padding-right: 0;
+
+            &:focus {
+                box-shadow: none;
+                border-bottom-color: $primary;
+            }
+        }
+
+        >label {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        >.form-control:focus~label,
+        >.form-control:not(:placeholder-shown)~label,
+        >.form-select~label {
+            transform: scale(0.85) translateY(-1rem) translateX(0);
+            opacity: 1;
+        }
+
+        >.form-control:focus~label,
+        >.form-select:focus~label {
+            color: $primary;
+        }
+    }
+}
+
+// Glass Style - Premium Edition
+.form-floating-glass {
+    &.form-floating {
+
+        >.form-control,
+        >.form-select {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px) saturate(180%);
+            -webkit-backdrop-filter: blur(20px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+            color: #fff;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+            &::placeholder {
+                color: rgba(255, 255, 255, 0.5);
+            }
+
+            &:focus {
+                background: rgba(255, 255, 255, 0.15);
+                border-color: rgba(255, 255, 255, 0.3);
+                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2),
+                    inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
+                outline: none;
+            }
+
+            &:hover:not(:focus) {
+                background: rgba(255, 255, 255, 0.12);
+                border-color: rgba(255, 255, 255, 0.25);
+            }
+        }
+
+        >label {
+            color: rgba(255, 255, 255, 0.8);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        >.form-control:focus~label,
+        >.form-control:not(:placeholder-shown)~label,
+        >.form-select:focus~label,
+        >.form-select~label {
+            color: rgba(255, 255, 255, 0.95) !important;
+            opacity: 1;
+        }
+    }
+}
+
+// Color Variants
+$floating-colors: (
+    "primary": $primary,
+    "success": $success,
+    "warning": $warning,
+    "danger": $danger,
+    "info": $info,
+);
+
+@each $name, $color in $floating-colors {
+    .floating-#{$name} {
+        &.form-floating {
+
+            >.form-control:focus,
+            >.form-select:focus {
+                border-color: $color;
+
+                &:not(:focus-visible) {
+                    box-shadow: 0 0 0 0.25rem rgba($color, 0.25);
+                }
+
+                &:focus-visible {
+                    box-shadow: 0 0 0 0.25rem rgba($color, 0.25);
+                }
+            }
+
+            // Re-apply for individual styles
+            &.form-floating-underline {
+
+                >.form-control:focus,
+                >.form-select:focus {
+                    border-bottom-color: $color;
+                    box-shadow: none;
+                }
+            }
+
+            >.form-control:focus~label,
+            >.form-select:focus~label {
+                color: $color !important;
+            }
+        }
+    }
+}
+
+// States
+.form-floating {
+
+    >.form-control:disabled,
+    >.form-control[readonly],
+    >.form-select:disabled {
+        background-color: $gray-100;
+        opacity: 0.7;
+        cursor: not-allowed;
+
+        ~label {
+            color: $gray-500;
+        }
+    }
+}

package/src/scss/components/_form-select.scss

@@ -0,0 +1,49 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.form-select {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+    -moz-padding-start: calc(0.75rem - 3px);
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: $body-color;
+    background-color: #fff;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    border: 0; // No border like HeroUI input
+    border-radius: $border-radius-lg;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    background-clip: padding-box; // make sure bg doesn't bleed
+    background-color: $gray-100; // Light gray bg
+    transition: background-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+
+    &:hover {
+        background-color: color.scale($gray-100, $lightness: -3%);
+    }
+
+    &:focus {
+        background-color: #fff;
+        border-color: transparent;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgba($primary, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    }
+
+    // Multiple select
+    &[multiple],
+    &[size]:not([size="1"]) {
+        padding-right: 0.75rem;
+        background-image: none;
+    }
+
+    &:disabled {
+        background-color: $gray-200;
+        color: $gray-600;
+        cursor: not-allowed;
+    }
+}

package/src/scss/components/_forms.scss

@@ -0,0 +1,41 @@
+@use "sass:color";
+@use "../abstracts/variables" as *;
+
+.form-label {
+    margin-bottom: 0.5rem;
+    display: inline-block;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: $line-height-base;
+    color: $body-color;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    appearance: none;
+    border-radius: $border-radius;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &:focus {
+        color: $body-color;
+        background-color: #fff;
+        border-color: color.scale($primary, $lightness: 25%);
+        outline: 0;
+        box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+    }
+
+    &::placeholder {
+        color: $secondary;
+        opacity: 1;
+    }
+
+    &:disabled {
+        background-color: $secondary;
+        opacity: 1;
+    }
+}

package/src/scss/components/_index.scss

@@ -0,0 +1,7 @@
+// Component index for modular imports
+// Import all: @use 'eldo-ui/scss/components';
+// Import specific: @use 'eldo-ui/scss/components/button';
+
+@forward 'button';
+@forward 'alert';
+@forward 'card';