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

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

@@ -0,0 +1,146 @@
+// ============================================================================
+// SKELETON — Design System Overrides
+// Figma: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40788-4557
+// ============================================================================
+// Variants:
+//   body-text: sm (8px) | md (12px) | lg (16px)
+//   title-text: sm (16px) | md (20px) | lg (24px)
+//   shape: sm/md/lg/xl × rectangle|round
+//   box: 200×80px with corner-sm
+//   animated: shimmer effect
+// ============================================================================
+
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Root skeleton wrapper
+// ─────────────────────────────────────────────────────────────────────────
+.custom-skeleton.el-skeleton {
+  width: unset;
+  line-height: 0;
+  // ── Default item background (all variants use --er-surface-muted)
+  .el-skeleton__item {
+    background: var(--er-surface-muted);
+    border-radius: var(--er-shape-corner-50);
+  }
+
+  // ── Animated shimmer — override EP gradient colors with muted tokens.
+  //    Middle stop MUST differ from the outer stops: `el-skeleton-loading`
+  //    only animates background-position, so an identical-color gradient is
+  //    an invisible solid fill. Use --er-surface-subtle (#FAFAFA) as the band.
+  &.is-animated .el-skeleton__item {
+    background: linear-gradient(
+      90deg,
+      var(--er-surface-muted) 25%,
+      var(--er-surface-subtle) 37%,
+      var(--er-surface-muted) 63%
+    );
+    background-size: 400% 100%;
+    width: 100%;
+    height: 100%;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Variant + size preset classes
+  // EaeraSkeleton adds `variant` and `size` as separate classes on el-skeleton-item.
+  // Selectors: .<variant>.<size>  e.g. .body-text.sm
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // ── body-text — full width bar, height only
+  .body-text {
+    width: 100%;
+    &.sm {
+      height: 8px;
+    }
+    &.md {
+      height: 12px;
+    }
+    &.lg {
+      height: 16px;
+    }
+  }
+
+  // ── title-text — full width bar, taller heights
+  .title-text {
+    width: 100%;
+    &.sm {
+      height: var(--er-control-height-xxs);
+    }
+    &.md {
+      height: var(--er-control-height-xs);
+    }
+    &.lg {
+      height: var(--er-control-height-sm);
+    }
+  }
+
+  // ── rect — square block
+  .rect {
+    &.sm {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+    &.md {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+    &.lg {
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
+    }
+    &.xl {
+      width: var(--er-control-height-md);
+      height: var(--er-control-height-md);
+    }
+  }
+
+  // ── circle — same square dimensions, El-Plus handles border-radius via .el-skeleton__circle
+  .circle {
+    border-radius: var(--er-shape-corner-full);
+    &.sm {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+    &.md {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+    &.lg {
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
+    }
+    &.xl {
+      width: var(--er-control-height-md);
+      height: var(--er-control-height-md);
+    }
+  }
+
+  // ── image — rectangular block with corner radius, for avatar/profile pic placeholders
+  .skeleton-image-wrapper {
+    position: relative;
+    display: inline-flex;
+
+    .image {
+      border-radius: var(--er-shape-corner-100);
+    }
+
+    .el-skeleton__image svg {
+      display: none;
+    }
+
+    .skeleton-image__icon {
+      position: absolute;
+      width: var(--er-control-height-lg);
+      height: var(--er-control-height-lg);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: var(--er-text-muted);
+      stroke: var(--er-icon-muted);
+    }
+  }
+
+  .box {
+    border-radius: var(--er-shape-corner-100);
+  }
+}

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

@@ -0,0 +1,142 @@
+// ============================================================================
+// SLIDER — Design System Overrides
+// Figma: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE?node-id=40713-25618
+// ============================================================================
+// Variants:
+//   size: sm (24px/8px track) | md (default, 32px/8px track)
+//   disabled: opacity 50%
+//   discrete (show-stops): white breakpoint marks on track
+//   range: two-knob variant (same visual, different v-model)
+// ============================================================================
+
+@use 'input-number' as input-number;
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Mixin: track-height + button-wrapper offset per size
+// ─────────────────────────────────────────────────────────────────────────
+@mixin slider-size($height, $track-height, $button-radius) {
+  height: $height;
+
+  .el-slider__runway {
+    height: $track-height;
+  }
+
+  .el-slider__bar {
+    height: $track-height;
+  }
+
+  .el-slider__button-wrapper {
+    width: var(--er-control-height-sm);
+    height: var(--er-control-height-sm);
+    top: calc(50% - 12px);
+  }
+
+  .el-slider__stop {
+    height: $track-height;
+  }
+
+  .el-input-number {
+    height: $height;
+    @include input-number.input-number-base;
+
+    .el-input__inner {
+      height: $height;
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Custom Slider
+// ─────────────────────────────────────────────────────────────────────────
+.custom-slider.el-slider {
+  // ── Track (runway)
+  .el-slider__runway {
+    background: var(--er-surface-muted);
+  }
+
+  // ── Filled bar
+  .el-slider__bar {
+    height: 8px;
+    border-radius: 2px;
+    background: var(--er-border-brand);
+  }
+
+  // ── Knob wrapper (hit area 24×24)
+  .el-slider__button-wrapper {
+    width: var(--er-control-height-sm);
+    height: var(--er-control-height-sm);
+  }
+
+  // ── Knob: rectangular 10×16, border-radius 4px (Figma: shape/corner/xs)
+  .el-slider__button {
+    width: 10px;
+    height: var(--er-control-height-xxs);
+    border-radius: var(--er-shape-corner-50);
+    border: 1px solid var(--er-border-default);
+    background: var(--er-surface-container);
+
+    &.hover:not(.is-disabled) {
+      width: 12px;
+      height: var(--er-control-height-xs);
+      transform: scale(1);
+    }
+  }
+
+  // ── Discrete stop marks (white, 2px wide, full track height)
+  // z-index: 1 ensures stops render above the bar even in the active region
+  .el-slider__stop {
+    height: 8px;
+    width: 2px;
+    background: var(--er-surface-container);
+  }
+
+  .el-slider__runway.is-disabled .el-slider__bar {
+    background: var(--er-border-brand);
+    opacity: 0.5;
+  }
+
+  // ── Size: md (default — 32px height, 8px track) ──────────────────────
+  &.md {
+    @include slider-size(
+      var(--er-control-height-md),
+      var(--er-shape-spacing-100),
+      var(--er-shape-corner-100)
+    );
+    .el-input-number {
+      min-width: 100px;
+      @include typo.display-md;
+
+      &__decrease,
+      &__increase {
+        width: var(--er-control-height-md);
+        height: var(--er-control-height-md);
+
+        svg {
+          width: var(--er-control-height-xxs);
+          height: var(--er-control-height-xxs);
+        }
+      }
+    }
+  }
+
+  // ── Size: sm (24px height, 8px track) ────────────────────────────────
+  &.sm {
+    @include slider-size(var(--er-control-height-sm), 6px, var(--er-shape-corner-50));
+    .el-input-number {
+      min-width: 80px;
+      @include typo.display-sm;
+
+      &__decrease,
+      &__increase {
+        width: var(--er-control-height-sm);
+        height: var(--er-control-height-sm);
+
+        svg {
+          width: var(--er-control-height-xxs);
+          height: var(--er-control-height-xxs);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+// ============================================================================
+// SPINNER — Bouncing Dots Loader (lds-ellipsis)
+// ============================================================================
+// Based on: loading.io "lds-ellipsis" pattern (4 bouncing dots)
+// Usage: pure-CSS spinner for inline / standalone loading states.
+// NOTE: For Element Plus v-loading overlay styles, see _loading.scss.
+//
+// STRUCTURE (required markup):
+//   .lds-ellipsis            ← Root container (80×80px)
+//     div × 4                ← Bouncing dots, positioned via nth-child
+//
+// MARKUP:
+//   <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
+// ============================================================================
+
+.lds-ellipsis {
+  // Figma: container 80×80px
+  display: inline-block;
+  position: relative;
+  height: 10px;
+  width: 10px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 0px; // Figma: dot vertical offset within 80px container
+  width: 13px; // Figma: dot size 13×13px (perfect circle → 50%)
+  height: 13px;
+  border-radius: 50%;
+  // Figma: dot color — semantic token; original extract was #07b53b (green)
+  background: var(--er-success-default);
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px; // Figma: dot 1 x-position
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px; // Figma: dot 2 start x-position
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px; // Figma: dot 3 x-position
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px; // Figma: dot 4 x-position
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    // 24px = distance between dot slots (8 → 32 → 56)
+    transform: translate(24px, 0);
+  }
+}

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

@@ -0,0 +1,292 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ============================================================================
+// STEPS & STEP
+// ============================================================================
+// Element Plus: ElSteps, ElStep
+// ============================================================================
+
+.custom-steps.el-steps {
+  --step-dot-size: 4px;
+  --step-dot-total-size: 8px; // 4px dot + 2px border left/right
+  --step-line-size: 8px;
+  --step-text-gap: 4px;
+  --step-main-gap: 8px;
+
+  // ─────────────────────────────────────────────────────────────────────
+  // BASE
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-step {
+    position: relative;
+    flex-shrink: 1;
+  }
+
+  .el-step__head {
+    position: relative;
+  }
+
+  .el-step__icon {
+    z-index: 2;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 8px;
+    height: 8px;
+    min-width: 8px;
+    flex-shrink: 0;
+    aspect-ratio: 1 / 1;
+    border-radius: var(--er-shape-corner-150);
+    border: 2px solid var(--er-surface-muted);
+    background: var(--er-surface-fixed-white);
+
+    &:has(i) {
+      border: 2px solid var(--er-action-primary-default);
+    }
+    line-height: 1;
+  }
+
+  .el-step__icon-inner {
+    display: none;
+  }
+
+  .el-step__icon::before {
+    content: none;
+  }
+
+  .el-step__line {
+    position: absolute;
+    background-color: var(--er-surface-muted);
+    overflow: hidden;
+  }
+
+  .el-step__line-inner {
+    display: block;
+    border: none;
+    background-color: var(--er-action-primary-default);
+    width: 0;
+    height: 0;
+  }
+
+  .el-step__main {
+    white-space: normal;
+    min-width: 0;
+  }
+
+  .el-step__title {
+    @include typo.label-lg;
+    color: var(--er-text-secondary);
+    padding: 0;
+    margin: 0;
+
+    &.is-success {
+      color: var(--er-text-brand);
+    }
+  }
+
+  .el-step__description {
+    @include typo.body-sm;
+    color: var(--er-text-muted);
+    font-variant-numeric: lining-nums tabular-nums;
+    padding: 0;
+    margin: 0;
+  }
+
+  // ───────────────────────────────────────────────────────────────────────
+  // STATES
+  // ───────────────────────────────────────────────────────────────────────
+
+  .el-step.is-process,
+  .el-step.is-finish,
+  .el-step.is-success {
+    .el-step__icon {
+      border-color: var(--er-action-primary-default);
+      background: var(--er-surface-fixed-white);
+    }
+
+    .el-step__title {
+      color: var(--er-text-brand);
+    }
+  }
+
+  .el-step.is-finish,
+  .el-step.is-success {
+    .el-step__line-inner {
+      background-color: var(--er-action-primary-default);
+    }
+  }
+
+  .el-step.is-wait {
+    .el-step__icon {
+      border-color: var(--er-action-primary-default);
+      background: var(--er-surface-fixed-white);
+    }
+
+    .el-step__title {
+      color: var(--er-text-secondary);
+    }
+
+    .el-step__description {
+      color: var(--er-text-muted);
+    }
+  }
+
+  .el-step.is-error {
+    .el-step__icon {
+      border-color: var(--er-action-danger-default);
+      background: var(--er-surface-fixed-white);
+    }
+
+    .el-step__title {
+      color: var(--er-text-danger);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // HORIZONTAL
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.el-steps--horizontal {
+    display: flex;
+    align-items: flex-start;
+
+    .el-step.is-horizontal {
+      display: flex;
+      flex-direction: column-reverse;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .el-step__head {
+      width: 100%;
+      height: var(--step-dot-total-size);
+      display: flex;
+      align-items: center;
+    }
+
+    .el-step__line {
+      height: var(--step-line-size);
+      top: calc((var(--step-dot-total-size) - var(--step-line-size)) / 2);
+      left: calc(var(--step-dot-total-size) / 2);
+      right: calc(var(--step-dot-total-size) / -1);
+      width: auto;
+      border-top-right-radius: 9999px;
+      border-bottom-right-radius: 9999px;
+    }
+
+    .el-step__line-inner {
+      height: 100%;
+      width: 0;
+    }
+
+    .el-step.is-finish .el-step__line-inner,
+    .el-step.is-success .el-step__line-inner {
+      width: 100%;
+    }
+
+    .el-step__main {
+      width: max-content;
+      max-width: 240px;
+      margin-bottom: var(--step-text-gap);
+      padding: 0;
+      text-align: left;
+    }
+
+    .el-step:not(:first-child):not(:last-child) {
+      .el-step__main {
+        transform: translateX(-50%);
+        text-align: center;
+      }
+    }
+
+    .el-step:last-child {
+      flex: 0 0 auto;
+
+      .el-step__head {
+        width: var(--step-dot-total-size);
+      }
+
+      .el-step__main {
+        transform: translateX(calc(-100% + var(--step-dot-total-size)));
+        text-align: right;
+      }
+
+      .el-step__line {
+        display: none;
+      }
+    }
+
+    .el-step.is-success .el-step__line-inner,
+    .el-step__head.is-finish .el-step__line-inner,
+    .el-step__head.is-success .el-step__line-inner {
+      border-radius: 0 var(--er-shape-corner-150) var(--er-shape-corner-150) 0;
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // VERTICAL
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.el-steps--vertical {
+    display: flex;
+    flex-direction: column;
+
+    .el-step.is-vertical {
+      display: flex;
+      min-height: 56px;
+    }
+
+    .el-step__head {
+      flex: 0 0 var(--step-dot-total-size);
+      width: var(--step-dot-total-size);
+    }
+
+    .el-step__line {
+      width: var(--step-line-size);
+      height: auto;
+      left: calc((var(--step-dot-total-size) - var(--step-line-size)) / 2);
+      bottom: calc(var(--step-dot-total-size) / -1 - var(--step-dot-total-size));
+      top: calc(var(--step-dot-total-size) + var(--step-dot-total-size) / 2);
+      border-bottom-left-radius: 9999px;
+      border-bottom-right-radius: 9999px;
+    }
+
+    .el-step__line-inner {
+      width: 100%;
+      height: 0;
+    }
+
+    .el-step.is-finish .el-step__line-inner,
+    .el-step.is-success .el-step__line-inner {
+      height: 100%;
+    }
+
+    .el-step__main {
+      flex: 1;
+      padding-left: var(--step-main-gap);
+      padding-bottom: 16px;
+      text-align: left;
+    }
+
+    .el-step__title {
+      margin-top: -6px;
+    }
+
+    .el-step:last-child {
+      min-height: auto;
+
+      .el-step__line {
+        display: none;
+      }
+
+      .el-step__main {
+        padding-bottom: 0;
+      }
+    }
+
+    .el-step__head.is-finish .el-step__line-inner,
+    .el-step__head.is-success .el-step__line-inner {
+      border-radius: 0 0 var(--er-shape-corner-150) var(--er-shape-corner-150);
+    }
+  }
+}