@eaera-com/eaera-widgets-v2 0.1.63 → 0.1.65

package/dist/design-system/components/_alert.scss

@@ -0,0 +1,150 @@
+// ============================================================================
+// ALERT COMPONENT — EAERA DESIGN SYSTEM
+// ============================================================================
+// Source: Figma UI Kit Core
+// Node:   https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40233-14068
+// Component: EaeraAlert.vue (wraps el-alert, class="custom-alert")
+//
+// Rendered DOM (Element Plus ElAlert):
+//   .custom-alert.el-alert.el-alert--{type}.is-light
+//     ├── .el-alert__icon                    (when :show-icon)
+//     └── .el-alert__content
+//           ├── .el-alert__title             (when title)
+//           ├── .el-alert__description       (slot / :message)
+//           └── .el-alert__close-btn         (when :closable)
+// ============================================================================
+
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+@mixin alert-type($bg, $text) {
+  background-color: $bg;
+
+  .el-alert__icon {
+    color: $text;
+  }
+
+  // No title: the semantic color applies to the single-line description text
+  &:not(.custom-alert--with-title) {
+    .el-alert__description {
+      color: $text;
+    }
+  }
+
+  // With title: the semantic color applies to the title; description is always secondary
+  &.custom-alert--with-title {
+    .el-alert__title {
+      color: $text;
+    }
+
+    .el-alert__description {
+      color: var(--er-text-secondary);
+    }
+  }
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-alert.el-alert {
+  // Override EP `width: 100%` / padding / bg / border-radius / no border
+  width: 100%;
+  padding: var(--er-shape-spacing-100);
+  gap: var(--er-shape-spacing-150);
+  background-color: var(--er-surface-neutral-subtle);
+  border: none;
+  border-radius: var(--er-shape-corner-100);
+
+  .el-alert__icon {
+    width: var(--er-control-height-xs);
+    height: var(--er-control-height-xs);
+    margin-right: 0;
+    color: var(--er-icon-secondary);
+
+    * {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .el-alert__content {
+    flex: 1;
+    @include typo.body-sm;
+    color: var(--er-text-secondary);
+  }
+
+  .el-alert__title {
+    @include typo.title-sm-em;
+    color: var(--er-text-primary);
+  }
+
+  .el-alert__description {
+    @include typo.body-sm;
+    color: var(--er-text-secondary);
+  }
+
+  .el-alert__close-btn {
+    // Keep EP `position: absolute; top: 12px; right: 16px` so the X sits at the top-right
+    // (do NOT set position: static — that drops it into the content flow at the bottom)
+    // right is overridden per case below: 8px (no title) / 12px (with title)
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--er-control-height-sm);
+    height: var(--er-control-height-sm);
+    padding: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-50);
+    color: var(--er-icon-primary);
+
+    &:hover {
+      color: var(--er-text-primary);
+      background-color: var(--er-action-neutral-subtle-hover);
+    }
+  }
+
+  // No title (single line): center the X vertically with the icon/text line
+  // (with-title keeps EP's absolute top: 12px aligned to the title row)
+  &:not(.custom-alert--with-title) {
+    .el-alert__close-btn {
+      top: 50%;
+      transform: translateY(-50%);
+      right: 8px;
+    }
+  }
+
+  // ── With Title: left-align stacked title + description ──
+  &.custom-alert--with-title {
+    padding: var(--er-shape-spacing-150);
+    align-items: flex-start;
+
+    .el-alert__close-btn {
+      right: 12px;
+    }
+
+    .el-alert__content {
+      align-items: flex-start;
+    }
+  }
+
+  // ── Color types (bg + icon follow the tint; text color targets description when
+  // no title, or the title when a title is present — no border on any variant) ──
+  &.custom-alert--default {
+    @include alert-type(var(--er-surface-neutral-subtle), var(--er-text-secondary));
+  }
+
+  &.custom-alert--success {
+    @include alert-type(var(--er-surface-success-subtle), var(--er-text-success));
+  }
+
+  &.custom-alert--warning {
+    @include alert-type(var(--er-surface-warning-subtle), var(--er-text-warning));
+  }
+
+  &.custom-alert--error {
+    @include alert-type(var(--er-surface-danger-subtle), var(--er-text-danger));
+  }
+
+  &.custom-alert--info {
+    @include alert-type(var(--er-surface-information-subtle), var(--er-text-information));
+  }
+}

package/dist/design-system/components/_auto-complete.scss

@@ -0,0 +1,165 @@
+// ============================================================================
+// AUTO COMPLETE COMPONENT STYLES
+// ============================================================================
+// Source: Figma UI Kit Production - Auto Complete (node-id=40538:29899)
+// Based on: EaeraAutoComplete.vue component (wraps Element Plus ElAutocomplete)
+// IMPORTANT: Colors use Layer 3 tokens only
+//
+// ELEMENT PLUS STRUCTURE:
+// .el-autocomplete                    ← Root wrapper (inline-block)
+//   .el-input                         ← Input component (reuses input styles)
+//     .el-input__wrapper              ← Input container (border, padding, bg)
+//       .el-input__prefix             ← Left icon slot
+//       input.el-input__inner         ← Actual input element
+//       .el-input__suffix             ← Right icon slot
+// .el-autocomplete-suggestion         ← Dropdown panel (teleported to body)
+//   .el-autocomplete-suggestion__wrap ← Scroll container
+//     .el-autocomplete-suggestion__list
+//       li                            ← Suggestion items
+// ============================================================================
+
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+// ─────────────────────────────────────────────────────────────────────────
+// AUTO COMPLETE SIZES — from Figma (node-id=40538:29899)
+// Figma axes: state (default/hover/focus), is-disabled, is-danger, is-filled, size (sm/md/lg)
+// SM: h-24px (not in figma width but implied), px-6px, border-radius xs (4px) — inferred from sm pattern
+// MD: h-32px, px-8px, border-radius sm (8px)
+// LG: h-40px, px-12px, border-radius sm (8px)
+// ─────────────────────────────────────────────────────────────────────────
+
+.custom-auto-complete.el-autocomplete {
+  .el-icon {
+    width: var(--er-control-height-xxs) !important;
+    height: var(--er-control-height-xxs) !important;
+
+    &.el-input__clear {
+      width: 12px !important;
+      height: 12px !important;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .el-input {
+    &:hover:not(.is-disabled) {
+      border-color: var(--er-action-primary-default);
+    }
+  }
+
+  .el-input__wrapper {
+    height: var(--er-control-height-md);
+    padding: 0 var(--er-shape-spacing-100);
+    gap: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-100);
+    border: 1px solid var(--er-border-default);
+    background-color: var(--er-surface-container);
+    box-shadow: none !important;
+
+    &:hover {
+      border-color: var(--er-action-primary-hover);
+    }
+
+    &.is-focus,
+    &:focus-within {
+      border-color: var(--er-action-primary-default);
+    }
+  }
+
+  // Input text
+  .el-input__inner {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+
+    &::placeholder {
+      @include typo.body-md;
+      color: var(--er-text-muted); // Figma: text/muted #a1a1aa
+    }
+  }
+
+  &.sm .el-input__inner,
+  &.sm .el-input__inner::placeholder {
+    @include typo.body-sm;
+  }
+
+  &.lg .el-input__wrapper {
+    height: var(--er-control-height-lg);
+    padding: 0 var(--er-shape-spacing-150);
+    gap: var(--er-shape-spacing-75);
+    border-radius: var(--er-shape-corner-150);
+  }
+
+  &.is-danger .el-input__wrapper,
+  &.danger .el-input__wrapper {
+    border-color: var(--er-border-danger);
+
+    &:hover {
+      border-color: var(--er-border-danger);
+    }
+
+    &.is-focus,
+    &:focus-within {
+      border-color: var(--er-action-primary-default);
+    }
+  }
+
+  &.is-disabled .el-input__wrapper,
+  .el-input.is-disabled .el-input__wrapper {
+    background-color: var(--er-surface-container);
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: var(--er-border-default);
+    }
+  }
+
+  .el-input__suffix,
+  .el-input__prefix {
+    display: flex;
+    align-items: center;
+  }
+
+  .el-input__prefix-inner {
+    width: var(--er-control-height-xxs);
+    height: var(--er-control-height-xxs);
+    
+    >:last-child{
+      margin-right: 0;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.sm .el-input__wrapper {
+    height: var(--er-control-height-sm);
+    padding: 0 var(--er-shape-spacing-75);
+    gap: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-75);
+
+    .el-input__prefix-inner {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  // ── XL ──
+  &.xl .el-input__wrapper {
+    height: var(--er-control-height-xl);
+    padding: 0 var(--er-shape-spacing-200);
+    gap: var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-150);
+
+    .el-input__prefix-inner {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+  }
+}

package/dist/design-system/components/_avatar-group.scss

@@ -0,0 +1,25 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Avatar Group (EaeraAvatarGroup)
+// Figma: group layout — avatars overlap -4px, stacked left-to-right
+// ─────────────────────────────────────────────────────────────────────────
+
+// ─────────────────────────────────────────────────────────────────────────
+// Mixin for avatar/overflow sizes
+// ─────────────────────────────────────────────────────────────────────────
+@mixin avatar-group-size($size, $border-width: 1px) {
+  width: $size;
+  height: $size;
+  border-width: $border-width;
+}
+
+.custom-avatar-group.el-avatar-group {
+  display: flex;
+  align-items: center;
+  isolation: isolate;
+
+  .custom-avatar.el-avatar:not(:first-child) {
+    margin-left: -4px;
+  }
+}

package/dist/design-system/components/_avatar.scss

@@ -0,0 +1,40 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+// ─────────────────────────────────────────────────────────────────────────
+// Mixin for avatar/overflow sizes
+// ─────────────────────────────────────────────────────────────────────────
+@mixin avatar-size($size, $border-width: 1px) {
+  width: $size;
+  height: $size;
+  border-width: $border-width;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Individual Avatar
+// ─────────────────────────────────────────────────────────────────────────
+.custom-avatar.el-avatar {
+  background: var(--er-surface-brand-subtle);
+  color: var(--er-action-primary-default);
+  border: 1px solid var(--er-neutral-white);
+
+  // ── Size overrides (EaeraAvatar passes string size as a CSS class)
+  &.sm {
+    @include avatar-size(var(--er-control-height-xxs));
+    @include typo.label-sm;
+  }
+  &.md {
+    @include avatar-size(var(--er-control-height-xs));
+    @include typo.label-sm;
+  }
+  &.lg {
+    @include avatar-size(var(--er-control-height-sm));
+    @include typo.label-md;
+  }
+  &.xl {
+    @include avatar-size(var(--er-control-height-md), 2px);
+    @include typo.title-md;
+  }
+  &[class*='2xl'] {
+    @include avatar-size(var(--er-control-height-lg), 2px);
+    @include typo.title-lg;
+  }
+}

package/dist/design-system/components/_badge.scss

@@ -0,0 +1,80 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin badge-type($bg) {
+  background-color: $bg !important;
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-badge.el-badge {
+  position: relative;
+
+  .el-badge__content {
+    position: absolute;
+    right: -8px !important;
+    top: -8px !important;
+    transform: none !important;
+    height: 16px;
+    min-width: 16px;
+    padding: 0 4px;
+    border-radius: var(--er-shape-corner-200);
+    @include typo.label-sm;
+    text-align: center;
+    white-space: nowrap;
+    color: var(--er-text-inverse);
+    border: none;
+
+    // ── Types ──
+    &.el-badge__content--primary {
+      @include badge-type(var(--er-icon-brand));
+    }
+
+    &.el-badge__content--success {
+      @include badge-type(var(--er-icon-success));
+    }
+
+    &.el-badge__content--warning {
+      @include badge-type(var(--er-icon-warning));
+    }
+
+    &.el-badge__content--danger {
+      @include badge-type(var(--er-icon-danger));
+    }
+
+    &.el-badge__content--info {
+      @include badge-type(var(--er-icon-information));
+    }
+
+    // ── Dot ──
+    &.is-dot {
+      right: -4px !important;
+      top: -4px !important;
+      width: 8px;
+      height: 8px;
+      min-width: 8px;
+      padding: 0;
+      border-radius: var(--er-shape-corner-200);
+      border: none;
+
+      &.el-badge__content--primary {
+        @include badge-type(var(--er-icon-brand));
+      }
+
+      &.el-badge__content--success {
+        @include badge-type(var(--er-icon-success));
+      }
+
+      &.el-badge__content--warning {
+        @include badge-type(var(--er-icon-warning));
+      }
+
+      &.el-badge__content--danger {
+        @include badge-type(var(--er-icon-danger));
+      }
+
+      &.el-badge__content--info {
+        @include badge-type(var(--er-icon-information));
+      }
+    }
+  }
+}

package/dist/design-system/components/_breadcrumb.scss

@@ -0,0 +1,91 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin breadcrumb-size($height, $padding-x, $radius) {
+  .el-breadcrumb__inner {
+    height: $height;
+    padding: 0 $padding-x;
+    border-radius: $radius;
+    @content;
+  }
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-breadcrumb.el-breadcrumb {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  .el-breadcrumb__inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--er-text-primary) !important;
+    white-space: nowrap;
+  }
+
+  .el-breadcrumb__inner.is-link {
+    color: var(--er-text-primary) !important;
+
+    &:hover {
+      background-color: var(--er-action-neutral-subtle-hover);
+      color: var(--er-text-primary) !important;
+    }
+  }
+
+  .el-breadcrumb__inner:not(.is-link),
+  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
+    color: var(--er-text-brand) !important;
+  }
+
+  .el-breadcrumb__item.is-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .el-breadcrumb__separator {
+    color: var(--er-icon-muted);
+    &.el-icon {
+      margin: 0;
+    }
+  }
+
+  // ── MD ──
+  &.md {
+    @include breadcrumb-size(
+      var(--er-control-height-md),
+      var(--er-shape-spacing-100),
+      var(--er-shape-corner-100)
+    ) {
+      @include typo.label-lg;
+    }
+
+    .el-breadcrumb__separator.el-icon {
+      width: 16px;
+      height: 16px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  // ── SM ──
+  &.sm {
+    @include breadcrumb-size(
+      var(--er-control-height-sm),
+      var(--er-shape-spacing-50),
+      var(--er-shape-corner-50)
+    ) {
+      @include typo.label-md;
+    }
+
+    .el-breadcrumb__separator.el-icon {
+      width: 12px;
+      height: 12px;
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+}