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

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

@@ -0,0 +1,101 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+// ─── Backdrop scrim ───────────────────────────────────────────────────────────
+// Dim the page content behind an open dialog. Matches the Figma "Overlay" spec
+// (node 1-14516): rgba(0, 0, 0, 0.5). Element Plus tags a dialog's `.el-overlay`
+// with `el-modal-dialog`, so this targets only dialog backdrops — drawers,
+// dropdowns and other overlays keep their own styling. `!important` guarantees
+// the scrim renders even if an Element Plus theme drifts the overlay token.
+.el-overlay-dialog {
+  background-color: var(--er-surface-overlay) !important;
+}
+
+.el-overlay.el-modal-dialog {
+  position: relative;
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-dialog.el-dialog {
+  background-color: var(--er-surface-elevated);
+  border-radius: var(--er-shape-corner-250);
+  @include elevation.elevation-level-2;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 90%;
+  max-height: 644px;
+
+  .el-dialog__header {
+    padding: var(--er-shape-spacing-200);
+    margin: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--er-shape-spacing-100);
+  }
+
+  .el-dialog__headerbtn {
+    position: static;
+    width: var(--er-control-height-sm);
+    height: var(--er-control-height-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--er-icon-primary);
+
+    .el-dialog__close {
+      color: inherit;
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    &:hover {
+      color: var(--er-icon-primary);
+    }
+  }
+
+  .el-dialog__title {
+    @include typo.title-lg-em;
+    color: var(--er-text-primary);
+  }
+
+  .el-dialog__body {
+    padding: 0 var(--er-shape-spacing-200);
+    width: 100%;
+    flex: 1;
+    overflow: auto;
+
+    // Figma 40233-13398: scrollbar inset 4px from the right edge; with the
+    // 16px body padding the content stays 16px from the edge, 12px from the bar.
+    &::-webkit-scrollbar-track {
+      margin-right: 4px;
+    }
+  }
+
+  .el-dialog__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--er-shape-spacing-100);
+    padding: var(--er-shape-spacing-200);
+    margin: 0;
+  }
+
+  // ── Icon Centered ──
+  &.icon-centered {
+    .el-dialog__body {
+      align-items: center;
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.el-divider.custom-divider {
+  border-color: var(--er-border-default) !important;
+
+  .el-divider__text {
+    background-color: var(--er-surface-elevated) !important;
+  }
+}

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

@@ -0,0 +1,41 @@
+// ============================================================================
+// DRAWER — Design System Overrides
+// Figma: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40233-13890
+// ============================================================================
+// Layout: flex-col, bg white, border-left, padding 16px, gap 24px
+// Header: title 20px/500/28px, description 12px/400/16px, close 24×24px
+// Body: flex 1, overflow auto
+// ============================================================================
+
+.custom-drawer.el-drawer {
+  background: var(--er-surface-container);
+  border-left: 1px solid var(--er-border-default);
+  padding: var(--er-shape-spacing-200);
+  display: flex;
+  flex-direction: column;
+  gap: var(--er-shape-spacing-300);
+
+  .el-drawer__sr-focus {
+    display: none;
+  }
+
+  // ── Header
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0;
+    color: var(--er-text-primary);
+    align-items: flex-start;
+  }
+
+  // ── Body
+  .el-drawer__body {
+    padding: 0;
+  }
+
+  .el-drawer__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--er-shape-spacing-100);
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,69 @@
+.custom-dropdown__popper.el-popper {
+  // Popper background — force dark surface in dark mode. EP defaults to
+  // --el-bg-color-overlay (#ffffff) and wallet-selector-popper sets the inner
+  // .el-dropdown-menu to transparent, so the popper itself MUST carry the bg.
+  background-color: var(--er-surface-container) !important;
+  border-color: var(--er-border-subtle) !important;
+  border-radius: var(--er-shape-corner-150);
+
+  .el-popper__arrow::before {
+    border-color: var(--er-border-default);
+    background-color: var(--el-bg-color-overlay);
+  }
+
+  li {
+    min-width: 200px;
+  }
+
+  // Inner menu — wallet-selector-popper sets this to transparent, so inherit
+  // the popper background above. Ensure no leak-through.
+  .el-dropdown-menu {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  // Item text + hover — EP items use `--el-text-color-regular` and a light
+  // hover fill, both unreadable on the dark panel. Bind to EAERA tokens so the
+  // menu stays legible in dark mode.
+  .el-dropdown-menu__item {
+    width: 100%;
+    color: var(--el-text-color-regular, var(--er-text-secondary));
+    border-radius: var(--er-shape-corner-150);
+    &:not(.is-disabled):hover,
+    &:not(.is-disabled):focus {
+      background-color: var(--er-action-primary-subtle-hover);
+      color: var(--el-text-primary);
+    }
+
+    &.is-disabled {
+      color: var(--el-text-disabled);
+    }
+
+    i {
+      margin: 0;
+    }
+  }
+
+  .el-dropdown-menu__item:not(.is-disabled):focus:not(:hover):not(.is-selected):not(.selected) {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  &.danger {
+    .el-dropdown-menu__item {
+      color: var(--er-text-danger) !important;
+
+      &:not(.is-disabled):hover,
+      &:not(.is-disabled):focus {
+        background-color: var(--er-action-danger-subtle-hover);
+        color: var(--el-text-primary);
+      }
+    }
+  }
+}
+
+.dropdown-overlay {
+  backdrop-filter: none !important;
+  background: none;
+}

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

@@ -0,0 +1,101 @@
+// // ============================================================================
+// // EMPTY — Design System Overrides
+// // Figma: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40713-28609
+// // ============================================================================
+// // Variants:
+// //   default: illustration + title + description + action
+// //   haveDescription=false: no description paragraph
+// //   haveButton=false: no action slot
+// // ============================================================================
+// //
+// // DOM structure (.custom-empty):
+// //   .custom-empty
+// //     span.custom-empty__bg-tr          ← decorative background shape (top-right)
+// //     span.custom-empty__bg-tl          ← decorative background shape (top-left)
+// //     .custom-empty__image              ← illustration area (slot or default card)
+// //       .custom-empty__illustration     ← default 40×40 icon card
+// //         svg                           ← chart icon
+// //     .custom-empty__content            ← title + description
+// //       p.custom-empty__title           ← typo/title-md, text/primary
+// //       p.custom-empty__description     ← typo/body-md, text/muted (optional)
+// //     .custom-empty__bottom             ← action slot (only rendered when slot provided)
+// // ============================================================================
+
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+.custom-empty-wrapper {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  // ── Decorative background SVG shapes ────────────────────────────────────
+  // Figma: background-element, actual SVG assets (not CSS approximations)
+  .custom-empty__bg-tl {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  .custom-empty__bg-tr {
+    position: absolute;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+  }
+
+  .custom-empty.el-empty {
+    @apply h-full w-full flex flex-col items-center justify-center;
+    padding: var(--er-shape-spacing-200);
+    gap: var(--er-shape-spacing-150);
+    width: 100%;
+    height: 100%;
+
+    .el-empty__image {
+      // Match .custom-empty__image sizing
+      width: var(--er-control-height-lg);
+      height: var(--er-control-height-lg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--er-shape-corner-100);
+      border: 1px solid var(--er-border-subtle);
+      background: var(--er-surface-container);
+      @include elevation.elevation-level-1;
+
+      svg {
+        width: var(--er-control-height-xs);
+        height: var(--er-control-height-xs);
+      }
+    }
+
+    .custom-empty__content {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      max-width: 320px;
+    }
+
+    .custom-empty__title {
+      @include typo.title-md;
+      color: var(--er-text-primary);
+    }
+
+    .el-empty__description {
+      margin-top: 0;
+    }
+
+    .custom-empty__description {
+      @include typo.body-md;
+      color: var(--er-text-muted);
+    }
+
+    .el-empty__bottom {
+      margin-top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,151 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+.el-form.custom-form {
+  .custom-form__parent-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--er-shape-spacing-200);
+  }
+
+  .el-form-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--er-shape-spacing-50);
+    margin-bottom: 0;
+    width: 100%;
+
+    &__label {
+      @include typo.label-lg;
+      display: flex;
+      gap: var(--er-shape-spacing-50);
+      color: var(--er-text-primary);
+      align-items: center;
+      margin: 0;
+
+      &:before {
+        display: none;
+        content: '' !important;
+      }
+
+      .required-field {
+        color: var(--er-text-danger);
+      }
+    }
+
+    &__content {
+      gap: var(--er-shape-spacing-50);
+      flex: unset;
+      line-height: unset;
+    }
+
+    // ── Shared message styles ─────────────────────────────────────────────────
+    .custom-form-item {
+      &__error,
+      &__success,
+      &__info {
+        @include typo.body-sm;
+        display: flex;
+        align-items: flex-start;
+        gap: var(--er-shape-spacing-50);
+        width: 100%;
+
+        svg {
+          width: var(--er-control-height-xxs);
+          height: var(--er-control-height-xxs);
+        }
+      }
+
+      &__error {
+        color: var(--er-text-danger);
+      }
+      &__success {
+        color: var(--er-text-success);
+      }
+      &__info {
+        color: var(--er-text-muted);
+
+        .el-icon {
+          color: var(--er-icon-secondary);
+          width: var(--er-control-height-xxs);
+          height: var(--er-control-height-xxs);
+
+          svg {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    // ── Icon tooltip ──────────────────────────────────────────────────────────
+    .label-tooltip {
+      color: var(--er-icon-secondary);
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &.label-size--sm {
+      .el-form-item__label {
+        @include typo.label-sm;
+      }
+
+      .label-tooltip {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    &.label-size--md {
+      .el-form-item__label {
+        @include typo.label-md;
+      }
+
+      .label-tooltip {
+        width: 14px;
+        height: 14px;
+      }
+    }
+
+    &.label-size--lg {
+      .el-form-item__label {
+        @include typo.label-lg;
+      }
+
+      .label-tooltip {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    // ── Validation border overrides ───────────────────────────────────────────
+    &.is-error {
+      .custom-auto-complete.el-autocomplete .el-input__wrapper,
+      .custom-input.el-textarea .el-textarea__inner,
+      .custom-input-tag.el-input-tag,
+      .custom-select.el-select .el-select__wrapper,
+      .custom-input.el-input .el-input__wrapper {
+        border-color: var(--er-border-danger) !important;
+
+        &:hover {
+          border-color: var(--er-border-danger) !important;
+        }
+
+        &:focus,
+        &.is-focus,
+        &.is-focused {
+          border-color: var(--er-action-primary-default) !important;
+        }
+      }
+    }
+  }
+
+  .form-group-default {
+    display: flex;
+    gap: var(--er-shape-spacing-100);
+  }
+}

package/dist/design-system/components/_growth-balance-profit-widget.scss

@@ -0,0 +1,95 @@
+// ============================================================================
+// EaeraWidgetGrowthBalanceProfitChart — Growth / Balance / Profit widget styles
+// Design source: Figma 7DD5x9AmpudFQRF9mjSclE node 2093-100712
+// Uses --er-* custom properties (host app must provide design tokens)
+// ============================================================================
+
+.gbp-widget {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  background: var(--er-surface-container);
+  border: 1px solid var(--er-border-default);
+  border-radius: var(--er-shape-corner-200);
+  padding: var(--er-shape-spacing-200);
+  gap: var(--er-shape-spacing-200);
+
+  // ── Header ───────────────────────────────────────────────────────────────
+  &__header {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--er-shape-spacing-100) 0;
+    flex-wrap: wrap;
+    gap: var(--er-shape-spacing-100);
+  }
+
+  &__title {
+    color: var(--er-text-primary);
+    font-family: var(--er-typo-title-md-font);
+    font-size: var(--er-typo-title-md-sz);
+    line-height: var(--er-typo-title-md-line-hg);
+    font-weight: var(--er-typo-title-md-wg-em);
+    letter-spacing: var(--er-typo-title-md-tracking);
+  }
+
+  &__controls {
+    @apply w-full md:w-fit grid grid-cols-1 md:grid-cols-2 gap-3;
+  }
+
+  // ── Select dropdown ──────────────────────────────────────────────────────
+  &__select {
+    @apply my-auto;
+    width: 200px;
+  }
+
+  &__select .el-select__wrapper {
+    min-height: 32px;
+    border-radius: var(--er-shape-corner-100);
+  }
+
+  &__select-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--er-text-muted);
+  }
+
+  // ── Chart area ───────────────────────────────────────────────────────────
+  &__body {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    min-height: 440px;
+  }
+
+  &__chart {
+    width: 100%;
+    height: 440px;
+  }
+
+  // ── Empty state ──────────────────────────────────────────────────────────
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--er-shape-spacing-150);
+    height: 440px;
+  }
+
+  &__empty-icon {
+    width: 48px;
+    height: 48px;
+    color: var(--er-text-placeholder);
+  }
+
+  &__empty-text {
+    color: var(--er-text-muted);
+    font-family: var(--er-typo-body-md-font);
+    font-size: var(--er-typo-body-md-sz);
+    line-height: var(--er-typo-body-md-line-hg);
+    font-weight: var(--er-typo-body-md-wg);
+    letter-spacing: var(--er-typo-body-md-tracking);
+  }
+}

package/dist/design-system/components/_input-code.scss

@@ -0,0 +1,116 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─── Input Code / OTP ──────────────────────────────────────────────────────
+// Source: Figma UI KIT CORE — OTP input (43229:1245) / otp-input-field (43226:3187)
+
+.custom-input-otp.el-input-otp {
+  display: inline-flex;
+  align-items: center;
+  height: var(--er-control-height-3xl);
+  column-gap: 0;
+
+  .el-input-otp__input-field {
+    width: 56px;
+    height: 100%;
+    border: 1px solid var(--er-border-default);
+    border-radius: 0;
+    box-shadow: none !important;
+
+    &:first-child {
+      border-top-left-radius: var(--er-shape-corner-150);
+      border-bottom-left-radius: var(--er-shape-corner-150);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--er-shape-corner-150);
+      border-bottom-right-radius: var(--er-shape-corner-150);
+    }
+
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &:has(.el-input-otp__input[value=''])::before {
+      content: '-';
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--er-text-muted);
+      pointer-events: none;
+      @include typo.headline-lg;
+    }
+
+    &:has(.el-input-otp__input:focus)::before {
+      display: none;
+    }
+
+    &:focus-within {
+      z-index: 2;
+      border: 2px solid var(--er-action-primary-default);
+      box-shadow: 0 0 0 2px var(--er-shadow-ambient-015);
+    }
+  }
+
+  &:not(.is-disabled):not(.disabled):not(.is-danger):not(.danger):not(.is-error):not(.error)
+    .el-input-otp__input-field:hover:not(:focus-within) {
+    z-index: 1;
+    border: 2px solid var(--er-action-primary-hover);
+    box-shadow: 0 0 0 2px var(--er-shadow-ambient-015);
+  }
+
+  .el-input-otp__input {
+    padding: 0;
+    color: var(--er-text-primary);
+    background-color: transparent;
+
+    @include typo.headline-lg;
+  }
+
+  // ── Disabled ──
+  &.is-disabled,
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+
+    .el-input-otp__input-field {
+      background-color: transparent;
+    }
+  }
+
+  // ── Error / Danger ──
+  &.is-danger,
+  &.danger,
+  &.is-error,
+  &.error {
+    .el-input-otp__input-field {
+      border-color: var(--er-border-danger);
+      border-right-color: var(--er-border-danger-subtle);
+
+      &:last-child {
+        border-right-color: var(--er-border-danger);
+      }
+
+      &:hover:not(:focus-within) {
+        z-index: 1;
+        border: 2px solid var(--er-action-danger-hover);
+        box-shadow: 0 0 0 2px var(--er-shadow-ambient-015);
+      }
+
+      &:focus-within {
+        z-index: 2;
+        border: 2px solid var(--er-action-primary-default);
+        box-shadow: 0 0 0 2px var(--er-shadow-ambient-015);
+      }
+    }
+
+    .el-input-otp__input-field:has(.el-input-otp__input[value=''])::before {
+      color: var(--er-text-danger);
+    }
+
+    .el-input-otp__input {
+      color: var(--er-text-danger);
+    }
+  }
+}